Share
I det här snabba tipset visar jag dig ett väldigt enkelt sätt att lägga på vadderingar och avstånd till dina mönster i Sketch.
Låt mig börja med att visa dig ett problem som du kanske har mött många gånger när du arbetar i Sketch. Låt oss säga att du vill skapa en enkel knapp; du skulle börja med en rektangelform på tavlan, ge den en lämplig färg, så lägger du till text på det på ett annat lager. Slutligen skulle du justera objekten, gruppera dem tillsammans, och du skulle bli gjort.
Låt oss nu föreställa dig att du vill skapa en annan knapp; liknande, men med annan text. Du skulle sannolikt kopiera den som redan gjorts, ändra sedan texten.
Om du antar att du vill behålla samma sidodelning på var och en, så ändrar du bredden på rektanglarna beroende på hur du vill att de ska visas. En manuell process:
Det här kan verka som en enkel uppgift, men om du måste göra det om och om igen kan det verkligen vara tidskrävande.
Så låt mig presentera Paddy; ett plugin för Sketch som kommer att spara dig väskor med tiden.
Börja med att installera pluginet, då med lite text markerad på din tavla, gå till Plugins> Paddy> Ange vaddering för val. I dialogrutan som dyker upp kan du ställa in vaddering som du skulle göra i CSS. Till exempel anger du ett värde på 10 20 kommer att ge dig 10px av vaddering på toppen och botten, med 20px till höger och vänster.
Paddy kommer då automatiskt att skapa en backround rektangel, som är precis som du ville. Men här är den snygga delen: När du ändrar texten kommer bakgrundsrektangeln att behålla de vadderade måtten du ställde in tidigare.
Redigering av lagnamnet från Bakgrund (10 20) att säga, Bakgrund (20 20) kommer att ändra padding för att återspegla de nya värdena.
Detta fungerar också när du lägger till mellanrum mellan objekt. Föreställ dig att vi har två knappar och vi vill lägga till 50px avstånd mellan dem. Vi väljer båda knapparna och går sedan till Plugins> Paddy> Spacing för val och vi kan sedan ange det värde vi vill ha. Vi skulle använda v enheter för att definiera vertikalt avstånd, eller h enheter för horisontella.
I det här fallet har vi använt 50v För att rymma våra två knappar exakt 50px ifrån varandra, vertikalt.
Som du kan se har knappgrupperna blivit inslagna i en annan grupp, som rymmer distansvärdet. Om vi skulle lägga till en annan knapp inom den här gruppen skulle den också få samma avstånd. Och om vi skulle ändra vadderingsvärdena eller textlängden inom en av dessa knappar, skulle hela saken bli omräknad och omplacerad för oss.
Paddy är en bra plugin; Jag rekommenderar att du laddar ner det och tar en titt på några av de andra sakerna det kan göra. Det kommer definitivt att spara dig tid!
Accentsconagua