Auto Layout är ett viktigt verktyg för varje designer och Figma-användare. Den här funktionen låter dig göra ändringar som att ändra storlek på eller flytta om ramar och objekt. Auto Layout gör att du kan justera ett elements höjd och vikt, till exempel med en automatisk inställning, vilket halverar ditt arbete.
Eftersom skärmstorleken ändras beroende på vilken enhet eller webbläsare användaren kommer att använda för att komma åt webbplatsen, gör Auto Layout att elementen inuti ramarna anpassar sig till dessa ändringar. Detta gör att layouten och strukturen ser mer exakt ut och i synergi. Läs vidare för att lära dig hur du använder Auto Layout i Figma och dess funktioner.
Använder automatisk layout
För att använda Auto Layout och alla dess funktioner måste du först lägga till den i en ram du arbetar med, vilket kan vara en ny ram eller en med innehåll, objekt och komponenter. När du har valt ramen eller objekten lägger du till Auto Layout så här:
- Tryck på “Alt + A” på ditt tangentbord (fungerar på Mac och Windows).
- Högerklicka på objekten eller komponenterna och klicka på Auto Layout (Du måste lägga till den här funktionen till varje komponent eftersom det är omöjligt i bulk).
- Tryck på plusikonen bredvid alternativet “Auto Layout” i menyn på Figma.
Förutom att lägga till Auto Layout till din ram kan du göra olika saker, från att stapla ramar till att duplicera, ordna och ta bort objekt.
Lägga till och ta bort objekt
Att lägga till objekt i din ram är ganska enkelt. Du behöver bara ta tag i objektet du vill lägga till och följa indikatorn. Och om du ska ta bort en, dra ut den igen och tryck på delete. Om du väljer att lägga till ett större objekt än den överordnade ramen måste du undvika Figma standardinställningar för att kunna göra det. Du kan göra detta genom att hålla ned “Ctrl”-knappen för Windows och “Command” för Mac.
Duplicera objekt
Om du vill lägga till två eller flera identiska objekt till ramen kan du duplicera dem, vilket är en användbar funktion för automatisk lager. Så här kan du göra det:
- Tryck på objektet du vill duplicera.
- Håll ned “Ctrl” och “D” knapparna samtidigt om du har Windows.
- För Mac, duplicera genom att hålla ned “Kommando”- och “D”-knapparna.
Ordna objekt
Om du inte gillar utseendet på din ram och organisationen av objekt och komponenter inuti den, kan du ordna om dem. Om du har slagit samman två lager måste du kringgå Figma-standardinställningarna genom att trycka på “Ctrl” för Windows och “Kommando” för Mac för att komma åt djupvalsalternativet och flytta komponenten från det ursprungliga lagret. Men om det är en ram kan du markera ett objekt och flytta det någon annanstans, på samma sätt som att lägga till objekt, eller använda piltangenten.
Automatiska layoutnivåer
En annan funktion i Auto Layout är att kombinera fler ramar till en för att skapa ett mer komplicerat gränssnitt där du kan lägga över olika Auto Layout-nivåer som knapp- och knapprader, ett inlägg och en tidslinje. Varje nivå låter dig lägga till ytterligare ett objekt till din ram. Knapp- och knappradsnivåer är horisontella, medan ett inlägg är ett vertikalt lager där du kan mata in beskrivningar, bilder etc.
När du staplar två ramar samman, slås de samman och får egenskaperna för en överordnad ram. Detta gör att användaren kan implementera justerbara objekt. Du kan ta tag i en och sätta den på en annan för att sammanfoga två ramar. För att göra detta måste du:
- Välj en ram och allt du vill lägga till i den.
- Tryck på “Shift + A” för att lägga till en ram för automatisk layout.
Auto Layout-funktioner
Alternativet Auto Layout i Figma har många värdefulla egenskaper eller funktioner, från en riktning och staplingsordning till avstånd, storleksändring och justering. Det här avsnittet kommer att tala om var och en av dessa funktioner mer i detalj.
Riktning
Som namnet antyder hänvisar riktning till ordningen på objekt i en ram. När du använder Auto Layout kan objekten placeras:
- Vertikalt – Objekt placeras på y-axeln. Det här alternativet är lämpligt för listor, menyer, nyhetsflöden, etc.
- Horisontellt – Objekt och komponenter på x-axeln (knappar, ikoner, etc.).
- Wrap position – Objekt ställs in i flera kolumner och rader.
Staplingsordning
Du kan välja vilken staplingsordning som passar din ram bäst. Detta är en visuell förändring endast eftersom staplingsordningen förblir densamma (om den är 1,2,3 förblir den 1,2,3 men med visuella justeringar). När objekt staplas på varandra kan du välja vilket som ska ligga överst. Så, till exempel, om du har tre saker markerade 1, 2 och 3, kan du antingen 1 eller 3. Så här kan du göra detta:
- Välj ramen för Auto Layout.
- Navigera till alternativet Auto Layout till höger på skärmen.
- Tryck på de tre horisontella prickarna för att öppna avancerade alternativ.
- Hitta alternativet “Canvas Stacking”.
- Välj “Först överst” eller “Sist överst.”
Absolut ställning
En annan “Layer Flow”-egenskap är en absolut position, förutom staplingsordning och riktning. Med den här funktionen kan du placera ett objekt var du vill och ignorera ramgränserna. Så här aktiverar du det:
- Ta ett föremål och placera det inuti ramen.
- I menyn till höger, bredvid värden för “X” och “Y”, tryck på ikonen som liknar en kvadrat utan kanter med plus inuti.
- Flytta objektet längs ramens linjer.
Gap Setting
Det finns några funktioner du kan justera när det kommer till avstånd, till exempel gap. Du har två sätt att ändra mellanrummet: automatiskt och att skriva in ett specifikt mellanrum. Om du vill att ditt gap ska vara så stort som möjligt, måste du välja autoinställningen i Auto Layout-menyn. Men om du ska ange dina värden, skriv dem i de tilldelade rutorna.
Dessutom kan gapinställning ställas in för alla riktningar. Om dina ikoner bara är horisontella och vertikala kan du välja ett horisontellt mellanrum mellan dem. Men om de är i ett lindningsläge kan du justera vertikala och horisontella mellanrumsinställningar.
Justeringsinställning
När du har ställt in funktioner för riktning, utfyllnad och mellanrum kan du justera justeringen av det underordnade objektet i din ram eftersom den här funktionen beror på avståndsinställningarna. Du kan inte ändra justeringen av varje objekt, utan välj ett mönster som erbjuds i menyn för Auto Layout. Du kan klicka på rutnätet 3×3 i menyn och välja vilken justering du vill ha. Detta kan göras med piltangenter eller WSAD-knappar på ditt tangentbord.
Dessutom kan du välja autoinställningen här för att växla horisontella och vertikala justeringar som en rad. Med specifika värden kan du ha alla nio alternativen (överst till vänster, nedre vänster, vänster, höger vänster, nedre höger, etc.).
Du kan också justera textjusteringen genom att aktivera det här alternativet från menyn och hålla ned “B”-knappen.
Ändra storlek
Ändring av storleksalternativ för Auto Layout har många ytterligare egenskaper som kraminnehåll, fyllningsalternativ, justering av bredd och höjd, dimensioner, etc. Du kan välja autoalternativet om du vill att dina värden ska vara fasta, men det begränsar möjligheterna. För att ändra storlek rekommenderar vi att du ställer in dina värden.
Du kan välja ett fast värde eller ställa in det på högsta eller minsta möjliga dimensioner för bredd och höjd. Kram-innehåll låter dig justera storleken på en ram baserat på det underordnade objektet, medan alternativet för fyllningsbehållare ändrar storlek på ett objekt enligt den överordnade ramen.
Skapa unika ramar med automatisk layout
Auto Layout, som en av de väsentliga Figma-funktionerna, kan justera din ram och föremål och fack inuti den efter dina önskemål. Dess egenskaper och funktioner är flera, vilket gör att du kan skapa en ordentlig och snygg produkt. Auto Layout är ett grundläggande verktyg du måste behärska innan du arbetar i Figma.
Vilken Auto Layout-funktion använder du mest? Låt oss veta i kommentarsfältet nedan.