Paddy ... stvarno jednostavno rješenje problema koji svi imamo tijekom dizajniranja tipki ...

Svi izrađujemo gumbe. Oni su svugdje na našim web stranicama i dizajnom aplikacija. U Sketch-u zaista ne postoji jednostavan način rukovanja s gumbima. Nakon što ga napravite, dobro je dok ne morate napraviti sljedeći, zatim morate promijeniti veličinu tog pravokutnika tako da odgovara vašoj novoj naljepnici, neprestano provjeravajući udaljenosti kako biste bili sigurni da je pravilno postavljen.

Stvaranje dinamičkog gumba u Sketch with Paddy je jednostavno. Provest ću vas kroz postavljanje gumba, pronalaženje vrijednosti paddinga i pomoću simbola da biste vidjeli stvarnu vrijednost ovog dodatka. Također ćemo stvoriti gumb s ikonom. Prije nego što počnemo, svakako preuzmite dodatak ovdje: https://github.com/DWilliames/paddy-sketch-plugin ili ga koristite SketchRunner da biste ga instalirali.

Za ove ćemo gumbe koristiti značajku obloga sloja. Vodiči o ostalim značajkama bit će naknadno.

KORAK 01: Stvorite svoj gumb i dodijelite mu jednostavnu oznaku.

ovdje nema ništa fancy ... još ...

KORAK 02: Izračunavanje vrijednosti paddinga.

Jednom kada naljepnica bude tamo gdje želite, jednostavno odaberite tekst i držite opcijsku tipku dok držite pokazivač miša unutar gumba. Skica će vam pokazati udaljenost etikete od rubova gumba.

udaljenost se izračunava od rubova gumba do graničnog okvira teksta.

KORAK 03: Grupirajte elemente gumba.

Odaberite tekst i gumb i kliknite gumb Grupe na alatnoj traci ili upotrijebite prečac, CMD + G.

KORAK 04: Kad se grupiramo, možemo koristiti Paddy.

Prvo odaberite svoj grupirani gumb. Zatim odaberite Paddy iz izbornika dodataka ili upotrijebite SketchRunner. Obavezno odaberite "Padding for Selection"

KORAK 05: Dodajte vrijednosti paddinga.

Dijaloški okvir za Paddyja prilično je jednostavan. Sve što trebate učiniti je unijeti vrijednosti koje smo pronašli ranije, 12 16 12 16. Paddy postavlja te vrijednosti ovim redoslijedom, gore desno dolje lijevo. Ovo je baš kao CSS. Paddy vam također omogućuje prečac ovih vrijednosti poput CSS-a. Na primjer, možete koristiti jednu vrijednost poput 20, koja bi bila primjena 20 na sve 4 strane. Također možete upotrijebiti dvije vrijednosti poput 20 40, koje će primijeniti 20 na vrh i dno, te 40 na desnu i lijevu stranu. Za ovaj primjer, koristit ćemo 12 16 12 16. (mogli bismo koristiti i 12 16) Nakon što to učinite, samo kliknite OK.

KORAK 06: Paddy Magic.

Nakon što to učinite, vaš gumb neće izgledati mnogo drugačije. Ali. sad možemo napraviti malo Paddy magije! Kliknite unutar teksta svoj gumb i promijenite ga na nešto dugo poput "Dobri dizajneri žele da se dokaže pogrešno, loši dizajneri se nadaju da će se pokazati ispravnim." (Ovo je lijep citat Andyja Budda) Nakon što to učinite, samo trebate kliknuti izvan tekstualne oznake i voilà !, vaš gumb će se smanjiti veličine u podlogu koju smo postavili.

Ako pogledate detalje gumba na ploči slojeva, vidjet ćete da na sloju gumba dodaje se [12 16]. Ovo je sve što dodatak radi, te vrijednosti dodaje najniži sloj u grupi, tamo možete zapravo promijeniti vrijednosti i primijenit ćete dodatak kao da koristite dijaloški okvir Paddy.

KORAK 07: Paddy također radi sa simbolima!

Lakša je promjena naljepnica gumba. Pokušajmo. Prvo, stvorite simbol iz našeg gumba klikom na gumb "Stvori simbol" (nema prečaca, osim ako niste nešto prilagođeni.) Pojavit će se dijaloški okvir Stvori novi simbol. Nazovimo ovaj simbol nešto jednostavno, "gumb s tekstom" i kliknite OK.

KORAK 08: Prevladati taj simbol.

Sada kada je naš gumb simbol, vrlo je lako promijeniti naljepnicu i dopustiti Paddyju da promijeni veličinu našeg gumba. Odaberite novi simbol gumba. Pojavit će se jedna desna ploča Overrides. Upišite svoju novu naljepnicu i pritisnite enter / return. To je to! vaš je gumb svježe Paddyjev.

KORAK 09: Omogućite malo jači gumb i dodajte ikonu.

Kreirajte novi gumb sa svojom ikonom. Kao što smo to učinili u koraku 2, tako ćemo otkriti obloge koje trebamo postaviti. No, umjesto mjerenja udaljenosti od teksta, odabiremo i ikonu i naljepnicu i mjerimo odande. Da biste to učinili, odaberite ikonu i naljepnicu, držeći opcijsku tipku dok stavljate pokazivač miša unutar gumba da biste vidjeli mjerenja.

KORAK 10: Ponovite

Ostalo je jednostavno. Grupirajte tri elementa kao što smo učinili u koraku 3. Pokrenite Paddy i upotrijebite vrijednosti koje smo pronašli u koraku 9, 8 16 7 8. Idemo naprijed i učinimo to simbolom i nazovimo ga „ikonskim gumbom“

Postoji jedna posebna stvar koju morate učiniti da biste bili sigurni da se naša ikona neće razvući kad promijenimo našu etiketu. Kliknite stranicu Simboli na ploči Stranice na lijevoj strani sučelja Sketch. Zatim kliknite na ikonu tako da je odabrana. Na desnoj strani sučelja Sketch vidjet ćete ploču Ograničenja. Ovdje možemo reći ikoni kako se treba ponašati kada promijenite veličinu gumba. Obavezno odaberite "Fix Width" i "Fix Height." Također odaberite gornju i lijevu ručicu, govoreći ikoni da ostane prikvačena na gornjoj i lijevoj strani gumba.

KORAK 11: Postavite neka ograničenja

S postavljenim ograničenjima ikone sada možemo promijeniti svoju naljepnicu. Vratite se na primjerak simbola našeg gumba i upotrijebite ploču za poništavanje da biste promijenili naljepnicu.

Ako želite da ikona bude s desne strane, možete učiniti istu stvar kao što je gore spomenuto, samo okrenite tamo gdje ste označeni i ikona.

Zaključak: to je to! Sada možete napraviti gumbe koji će uvijek zadržati oblik. Zamislite svo vrijeme koje ćete uštedjeti da ne morate cijeli dan mijenjati gumbe!

Ako volite ovaj dodatak, zašto ne povikati Davidu Williamesu (tvorcu Paddyja) kavu ️ ​​putem PayPala da podijelite ljubav! Definitivno će mu pomoći da bude u mogućnosti dodatno podržavati ovaj dodatak. Možete ga pratiti i na twitteru @davidwilliames

** Napomena ** Otkako sam ovo objavio, David je rekao da se od ugniježđene podrške traži mnogo i da radi na tome. Ostanite u toku!

Ovo je prvi u nizu članaka koji će uskoro stići na sketchtools.co. Tamo još nema ništa, ali pratite me na twitteru ili ovdje na Mediumu da saznate kada ima.