Mastering Alignment and Distribution in Sketch

I denna handledning kommer vi att lära oss hur du perfekt anpassar objekt och distribuerar dem med Sketch 3. Jag ska använda några grundläggande exempel för att förklara alternativen fullt - du kommer bli förvånad över några av dem!

1. Anpassa ett enda lager till Artboard

Det här är kanske den enklaste tekniken här. 

Titta på inspektörens översta sida: Du får se några justeringsrelaterade knappar. De sex knapparna som är placerade till höger (justera vänster, horisontellt, höger, övre, vertikalt och nedåt) är för att anpassa lager mellan varandra, men om du bara har ett enkelt objekt valt, kommer det att anpassas till moderkortet. Så här fungerar det:

Som nämnts kan du använda samma knappar när du har valt flera objekt för att anpassa dem till varandra. Men hur är det om vi vill anpassa flera objekt till tavlan?

2. Anpassa flera lager till Artboard

För att inrikta flera objekt på listposten gruppera dem i en enda laggrupp. Gruppen kommer att fungera som ett enda objekt när du använder justeringsknapparna.

Gruppering på detta sätt kanske inte alltid passar din situation. Låt mig visa dig ett annat tillvägagångssätt.

Välj de lager du vill justera, håll ner alt-tangenten för att göra justeringsikonerna i inspektören ändra sitt utseende. Nu anpassar du skikten till tavlan! Tänk på att du måste ha de valda lagren inom tavlan, annars kommer det här alternativet inte att vara tillgängligt. 

I följande exempel har jag valt tre olika lager:

Detta fungerar också med Layer-grupper; vilket betyder att du kan välja flera laggrupper, håll ner Alt-tangenten och anpassa dem till tavlan.

3. Anpassning till specifika lager

En annan situation: Jag vill göra allt anpassat till ett enda objekt. Först måste du förstå att Sketch alltid är anpassad till längst ut lagret av alla de valda. Det skiktet kallas "nyckelobjektet".

Följaktligen är det objektet som hittas i det längsta översta läget att vara nyckelobjektet för att anpassa alla markerade objekt till toppen. Här är ett exempel där jag justerar tre objekt i högra högra läget (den röda rutan är vårt "nyckelobjekt"):

Det skulle vara trevligt om vi kunde ändra nyckelobjektet för att matcha det vi vill ha, eller hur? Här är tricket: Låsa skiktet du vill fungera som nyckelobjekt,välj sedan alla lager igen. (Du kan bara välja låsta skikt genom listan Lag). 

I följande exempel är den blå torget redan låst, så det kommer att fungera som vårt nya nyckelobjekt. Låt oss nu justera föremålen till höger igen:

Jag upptäckte detta praktiska trick tack vare SketchTips. Och du kan använda Justera till plugin gjord av Lucien Lee för att uppnå samma resultat. 

4. Justera vektorpunkter

Tips: Du kan också använda justeringsknapparna för att anpassa flera vektorgrader när du är i Redigeringsläge. Välj vektorobjektet, dubbelklicka för att växla till Redigera-läge (du kan också använda redigeringsikonet på huvudverktygsfältet) och välj alla vektorpunkter du vill anpassa.

5. Distribuera lager

Om vi ​​tittar på toppen av inspektionspanelen märker du att jag ännu inte har nämnt de två inriktningsikonen till vänster. Dessa knappar är för att fördela objekt horisontellt och vertikalt. Vi kan också distribuera dem jämnt, vilket är väldigt användbart! Låt oss säga att vi har några former markerade och vi skulle vilja distribuera dem horisontellt. Använd Distribuera horisontellt knappen eller gå till Ordna> Distribuera> Horisontellt.

De vänstra och righmost skikten kommer att stanna där de är, medan skikten i mitten kommer att fördelas jämnt mellan dem. Du kan göra detsamma längs den vertikala axeln med Distribuera vertikalt alternativ.

6. Distribuera lager med fast avstånd

Okej, men vad händer om jag vill ha dessa lager 20px ifrån varandra? Distribuera horisontellt / vertikalt hjälper inte här.

I det här fallet kan vi använda Gör nätet verktyg (Ordna> Gör nätet) För att definiera horisontella och vertikala avstånd mellan objekten. Det kan vara lite svårt att förstå först, så låt mig visa dig ett annat animerat exempel:

Här ville jag distribuera fyra olika lager med ett 20px mellanrum mellan dem. Jag gjorde ett raster med en enda rad (för att anpassa alla lager horisontellt) och fyra kolumner (en kolumn per lager). Sedan ställer jag in kolumnerna till 20px för att få önskat avstånd. Om jag vill fördela lagren vertikalt måste jag göra ett raster med fyra rader (med 20px marginal) och en kolumn.

Om du inte känner dig bekväm med att använda den här metoden kan du prova SketchDistributor-plugin. Den låter dig distribuera valda objekt med ett visst avstånd. 

Det var allt tills vidare

Jag hoppas att du haft denna handledning. Att mäta justerings- och distributionsverktygen i Sketch sparar mycket tid!