Auto layout i Figma – komplett guide for effektiv design
Auto layout er Figma-funksjonen som skiller effektiv design fra tidkrevende manuell re-arrangering. Her er en komplett guide til hvordan du bruker det riktig.
Auto layout er en av funksjonene i Figma som separerer designere som jobber effektivt fra de som sliter. Det er den funksjonen jeg bruker mest aktivt i alle prosjekter – og den som redder meg fra manuell re-arrangering når innholdet endres. Her er alt du trenger å vite for å bruke den ordentlig.
Hva er auto layout?
Auto layout er Figmas system for å definere hvordan elementer plasserer seg relativt til hverandre inni en frame. Når du legger til auto layout, bestemmer du retning (horisontal eller vertikal), spacing mellom elementer, og padding rundt innholdet. Når innholdet endres – tekst vokser, elementer legges til eller fjernes – tilpasser rammene seg automatisk.
Fill container vs hug contents
Dette er det konseptet flest tripper over i starten. «Hug contents» betyr at framen er akkurat så stor som innholdet. «Fill container» betyr at framen strekker seg til å fylle den overordnede containeren. «Fixed» setter en fast størrelse. For de fleste komponenter vil du kombinere disse tre: en knapp hugger innholdet, mens innholdet inni knappen kan ha fill på brede layouts.
Nesting – det som virkelig løfter arbeidsflyten
Kraften i auto layout kommer når du nester det. En horisontal rad med ikoner og tekst, pakket i en vertikal liste, pakket i et kort, pakket i en grid – når alt dette er auto layout, kan du legge til og fjerne elementer og se designet tilpasse seg på alle nivåer samtidig. Det er sånn du bygger realistiske, responsive komponenter.
Advanced: absolute positioning inni auto layout
En funksjon mange ikke kjenner: du kan sette enkelelementer inni en auto layout-frame til «absolute position». De faller da ut av flyten men forblir inni framen. Dette er nyttig for overlay-elementer, badger på ikoner og andre ting som skal være posisjonert relativt til containeren uten å påvirke layout-flyten.
Auto layout og kodekvalitet
Korrekt bruk av auto layout gjør kodeoverlevering dramatisk bedre. Når en utvikler åpner Dev Mode og ser at framer har riktig retning, spacing og sizing, reflekterer det direkte hvordan koden bør struktureres med flexbox og grid. Design som er bygget uten auto layout tvinger utviklere til å gjette seg til intent – og det fører til misforståelser.