Paddy ... en rigtig enkel løsning på et problem, vi alle har, mens vi designer knapper ...

Vi laver alle knapper. De findes overalt på vores site- og applikationsdesign. I Sketch er der virkelig ingen let måde at håndtere knapper på. Når du først har lavet en, er du god, indtil du skal lave den næste, så skal du ændre størrelsen på det rektangel, så det passer til din nye etiket, ved konstant at kontrollere afstandene for at sikre dig, at det hele er placeret korrekt.

Det er nemt at oprette en dynamisk knap i Sketch med Paddy. Jeg vil lede dig gennem opsætning af din knap, finde ud af polsterværdierne og bruge symboler til at se den reelle værdi af dette plugin. Vi opretter også en knap med et ikon. Før vi starter, skal du sørge for at downloade plugin her: https://github.com/DWilliames/paddy-sketch-plugin eller bruge SketchRunner til at installere det.

Vi bruger lagpolstring-funktionen til disse knapper. Vejledninger om de andre funktioner kommer senere.

TRIN 01: Opret din knap, og giv den en simpel etiket.

intet fan her ... endnu ...

TRIN 02: Find ud af dine polstringsværdier.

Når din etiket er der, hvor du vil have den, skal du blot vælge teksten og holde optionstasten nede, mens du holder musemarkøren inde i knappen. Skitse viser dig afstanden til etiketten fra kanterne på din knap.

afstanden beregnes fra kanternes knap til tekstens afgrænsningsfelt.

TRIN 03: Gruppér dine knapelementer.

Vælg din tekst og knap, og klik på knappen Gruppe på værktøjslinjen, eller brug genvejen, CMD + G.

TRIN 04: Når vi er samlet, kan vi bruge Paddy.

Vælg først din grupperede knap. Vælg derefter Paddy fra plugins-menuen, eller brug SketchRunner. Sørg for at vælge “Polstring til valg”

TRIN 05: Tilføj polsterværdierne.

Dialogboksen til Paddy er ret enkel. Alt hvad du skal gøre er at indtaste de værdier, som vi fandt tidligere, 12 16 12 16. Paddy sætter disse værdier i denne rækkefølge øverst til højre nederst til venstre. Dette er ligesom CSS. Paddy giver dig også mulighed for at genvej disse værdier som CSS. For eksempel kan du bruge en enkelt værdi som 20, som vil gælde 20 på alle 4 sider. Du kan også bruge to værdier som 20 40, der gælder 20 foroven og bunden og 40 til højre og venstre. I dette eksempel bruger vi 12 16 12 16. (vi kunne også brugt 12 16) Når du først har gjort det, skal du bare klikke på ok.

TRIN 06: Paddy Magic.

Når du har gjort det, ser din knap ikke meget anderledes ud. Men. nu kan vi lave noget Paddy magi! Klik inde i din knap til teksten og ændre den til noget længe som "Gode designere vil have vist sig forkert, dårlige designere håber at blive bevist rigtige." (Dette er et dejligt citat fra Andy Budd) Når du har gjort det, har du kun nødt til at klikke uden for tekstetiketten og voilà !, ændrer din knap størrelse til den polstring, som vi indstiller.

Hvis du ser på detaljer om knappen i lagpanelet, vil du se, at knappelaget har en [12 16] knyttet til den. Dette er alt, hvad plugin gør, det føjer disse værdier til det nederste lag i gruppen, du kan faktisk ændre værdierne der, og du har anvendt plugin, som om du brugte Paddy-dialogboksen.

TRIN 07: Paddy fungerer også med symboler!

Gør det lettere at skifte knapetiketter. Lad os prøve det. Opret først et symbol ud af vores knap ved at klikke på knappen "Opret symbol" (der er ingen genvej, medmindre du har noget brugerdefineret.) Dialogboksen Opret nyt symbol vises. Lad os navngive dette symbol på noget enkelt, "tekstknap" og klik på ok.

TRIN 08: Overstyr det symbol.

Nu hvor vores knap er et symbol, er det meget let at ændre etiketten og give Paddy mulighed for at ændre størrelsen på vores knap. Vælg dit nye knopsymbol. Til højre vises panelet Tilsidesættelse. Skriv din nye etiket, og tryk på enter / return. Det er det! din knap er frisk Paddy'ed.

TRIN 09: Lad os gøre en smule mere avanceret knap og tilføje et ikon.

Opret en ny knap med dit ikon. Som vi gjorde i trin 2, skal vi finde ud af den polstring, som vi er nødt til at indstille. I stedet for at måle afstanden fra teksten, skal vi vælge både ikonet og etiketten og måle derfra. For at gøre dette skal du vælge både ikonet og etiketten ved at holde optionstasten nede, mens du placerer musemarkøren inde i knappen for at se målingerne.

TRIN 10: Gentag

Resten er enkel. Gruppér de tre elementer, ligesom vi gjorde i trin 3. Kør Paddy og brug de værdier, vi fandt i trin 9, 8 16 7 8. Lad os springe videre og gøre det til et symbol og kalde det "ikonknap"

Nu er der en speciel ting, du skal gøre for at sikre dig, at vores ikon ikke kommer til at blive strakt, når vi ændrer vores etiket. Klik på siden Symboler i panelet Sider i venstre side af skitse-grænsefladen. Klik derefter på ikonet, så det er valgt. På højre side af Sketch-grænsefladen ser du panelet Begrænsninger. Her kan vi fortælle ikonet, hvordan man skal opføre sig, når knappen ændres til størrelse. Sørg for at vælge “Fix Width” og “Fix Height.” Vælg også øverste og venstre håndtag, idet du beder ikonet om at blive fastgjort til øverste og venstre side af knappen.

TRIN 11: Indstil nogle begrænsninger

Med ikonets begrænsninger indstillet, kan vi nu ændre vores etiket. Gå tilbage til symbolforekomsten af ​​vores knap, og brug overstyringspanelet til at ændre etiketten.

Hvis du vil have ikonet til højre, kan du gøre det samme som nævnt ovenfor, bare vende, hvor du mærker og ikonet er.

Konklusion: Det er det! Nu kan du lave knapper, der altid holder deres form. Tænk på hele tiden, som du sparer for ikke at skulle ændre størrelse på knapper hele dagen!

Hvis du elsker dette plugin, hvorfor ikke råbe David Williames (skaberen af ​​Paddy) en kaffe ️ via PayPal for at dele kærligheden! Det vil bestemt hjælpe ham med at kunne støtte dette plugin yderligere. Du kan også følge ham på twitteren @ davidwilliames

** Bemærk ** Siden jeg har offentliggjort dette, har David sagt, at indlejret symbolstøtte er blevet anmodet om meget, og at han arbejder på det. Bliv hængende!

Dette er den første i en række artikler, der snart kommer til sketchtools.co. Der er ikke noget der endnu, men følg mig på twitter eller her på Medium for at finde ud af, hvornår der er noget.