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:
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:
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:
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:
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:
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:
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.
Praktisk guide för Stockholm län i oktober 2026: vad du kan så, plantera och flytta, hur frost och dagslängd påverkar, plus en vecka-för-vecka-checklista.
Planera plantering för oktober i Storlondon med grönsaker, örter, blommor, inomhussådd, frostvägledning, klimatnormaler, prognosgränser och en checklista vecka för vecka.
Så fungerar ROT-avdrag för två ägare: regler för fördelning, faktura, betalning, skatteutrymme och omfördelning mellan makar eller sambor.
Du får normalt 480 dagar med föräldrapenning per barn. Läs hur dagarna fördelas, vilka ersättningsnivåer som gäller och hur du planerar uttaget.
Lär dig hur föräldrapenning på helger fungerar, när fredag eller måndag krävs, vad som gäller vid skiftarbete och hur du planerar rätt.
BankID fungerar inte på Android? Följ en säker felsökning med uppdatering, systemkrav, Google Play-tjänster och rätt supportväg.
Läs varför Stockholm och Göteborg har trängselskatt, vilka mål systemet har och hur nyttor, kostnader och alternativ skiljer sig åt.
Behöver du Mobilt BankID? Följ stegen från app och bankbeställning till aktivering, id-kontroll och felsökning på ett säkert sätt.
Se trängselskatten i Göteborg 2026: tider, belopp, max per dag, avgiftsfria dagar och viktiga undantag för bilister.
Se vad som ger ROT-avdrag för villa 2026: arbetskostnad, tak, femårsregeln, fasad, tak, altan, dränering och vanliga kostnader som inte räknas.
