Share
I dette raske tipset vil jeg vise deg en veldig enkel måte å legge til polstring og avstand til designene dine i Sketch.
La meg begynne med å vise deg et problem du kanskje har møtt mange ganger når du jobber i Sketch. La oss si at du vil lage en enkel knapp; du ville starte med en rektangelform på tavlen, gi den en passende farge, så legger du til tekst på den på et annet lag. Til slutt vil du justere objektene, gruppere dem sammen, og du vil bli ferdig.
La oss nå forestille deg at du vil opprette en annen knapp; lignende, men med forskjellig tekst. Du vil trolig kopiere den allerede laget, og deretter endre teksten.
Forutsatt at du vil beholde samme sidestopp på hver enkelt, vil du da endre bredden på rektanglene avhengig av hvordan du vil at de skal vises. En manuell prosess:
Dette kan virke som en enkel oppgave, men hvis du må gjøre dette igjen og igjen, kan det faktisk være veldig tidkrevende.
Så la meg introdusere Paddy; et plugin for Sketch som vil spare deg for poser med tid.
Begynn med å installere pluginet, da, med litt tekst valgt på tavlen din, gå til Plugins> Paddy> Skriv inn polstring for valg. I dialogboksen som dukker opp, kan du sette polstring akkurat som du ville i CSS. For eksempel skriver du inn en verdi på 10 20 vil gi deg 10px med polstring på toppen og bunnen, med 20px til høyre og venstre.
Paddy vil da automatisk lage et backround rektangel, størrelse akkurat som du ønsket. Men her er den kule delen: Når du endrer teksten, beholder bakgrunnsrektangel de polstermålinger du har satt inn tidligere.
Redigerer lagnavnet fra Bakgrunn (10 20) å si, Bakgrunn (20 20) vil endre polstring for å gjenspeile de nye verdiene.
Dette fungerer også når du legger mellomrom mellom objekter. Tenk deg at vi har to knapper, og vi vil legge til 50px avstand mellom dem. Vi velger begge knappene, så gå til Plugins> Paddy> Spacing for valg og vi kan da skrive inn verdien vi vil ha. Vi vil bruke v enheter for å definere vertikal avstand, eller h enheter for horisontal.
I dette tilfellet har vi brukt 50V For å plassere våre to knapper nøyaktig 50 px fra hverandre, vertikalt.
Som du kan se, har knappgruppene blitt pakket inn i en annen gruppe, som har avstandsverdien. Hvis vi skulle legge til en annen knapp i denne gruppen, ville den også arve den samme avstanden. Og hvis vi skulle endre polstringsverdiene, eller tekstlengden i en av disse knappene, ville hele greien bli omregnet og reposisjonert for oss.
Paddy er et flott plugin; Jeg anbefaler at du laster ned den og ser på noen av de andre tingene det kan gjøre. Det vil definitivt spare deg tid!
Accentsconagua