Den 24. juli udrullede Figma en markant og længe ventet opdatering til deres populære Auto Layout-funktion. Formålet er krystalklart: at reducere forskellene mellem hvordan elementer placerer sig på Figma-lærredet, og hvordan de i virkeligheden opfører sig, når de kodes i ren CSS.
For digitale bureauer, frontend-udviklere og UI/UX-designere har kløften mellem designværktøjer og den faktiske browser-rendering længe været en kilde til mindre frustrationer og ekstra tidsforbrug ved overlevering (handoff). Med den nye opdatering tager Figma endnu et afgørende skridt mod at gøre designmæssige beslutninger 1:1 overførbare til kode.
I denne artikel gennemgår vi præcis, hvad ændringen indebærer, hvorfor den skaber værdi i udviklingsprocessen, og hvordan du bedst håndterer overgangen i jeres eksisterende designsystemer.
Auto Layout har i mange år været hjertet i moderne UI-design i Figma. Det gør det muligt at skabe dynamiske knapper, kort og komponenter, der tilpasser sig automatisk, når tekst eller indhold ændres. Men selvom Auto Layout overfladisk lignede CSS Flexbox og CSS Grid, har der været små tekniske uoverensstemmelser.
Disse uoverensstemmelser har tvunget udviklere til at skrive “hacks” eller foretage manuelle tilpasninger i koden for at få den færdige løsning i browseren til at ligne det, designeren havde tegnet på lærredet.
Strammere overensstemmelse med CSS Layout: Nye frames (rammer) følger nu automatisk den opdaterede layout-logik, som beregner marginer, padding og børne-elementers opførsel på præcis samme måde som CSS Flexbox.
Automatisk aktivering på nye elementer: Alle nye frames oprettet i Figma efter d. 24. juli kører automatisk på den nye layout-motor.
Legacy-understøttelse til eksisterende frames: Eksisterende filer og frames bliver ikke ødelagt. De forbliver på “legacy”-versionen, indtil du manuelt vælger at opdatere dem.
Overgangsperiode frem til januar 2027: Figma opretholder support for legacy Auto Layout frem til januar 2027, hvilket giver teams god tid til at konvertere og opdatere deres designsystemer i et roligt tempo.
Når vi bygger professionelle webplatforme og digitale produkter hos Dominant.dk, ved vi, at den korteste vej fra idé til færdigt kodet produkt er eliminering af gnidningsmodstand mellem design og frontend-udvikling.
Tidligere opstod der ofte uoverensstemmelser i visningen, når komplekse Auto Layout-strukturer med nestede rammer, absolut placering eller specifikke ‘gap’-værdier blev overført til koden. Frontend-udvikleren var nødt til at fortolke designet og omstrukturere koden i CSS. Med den nye opdatering afspejler Figma-lærredet browserens logik direkte, hvilket minimerer behovet for korrektionsrunder.
Figmas Dev Mode giver udviklere mulighed for at inspicere værdier direkte. Når Auto Layout opfører sig nøjagtigt som CSS, bliver de genererede CSS-snippets i Dev Mode langt mere brugbare og præcise uden behov for manuel “oversættelse”.
Ved at lukke kløften mellem designværktøj og kildekode mindskes risikoen for fejl i kvalitetssikringen (QA). Mindre tid brugt på rettelser betyder hurtigere eksekvering og lavere samlede projektomkostninger.
Da Figma ikke automatisk opdaterer jeres eksisterende frames, risikerer I ikke, at gamle designfiler pludselig rykker sig uhensigtsmæssigt. I bør dog lægge en klar strategi for overgangen:
Start med at oprette et test-frame i dit designsystem eller i et aktuelt projekt. Undersøg, hvordan nye komponenter reagerer på det opdaterede Auto Layout.
Hovedkomponenterne i jeres UI-kit (f.eks. knapper, input-felter, modaler og kort) bør løbende opdateres til den nye Auto Layout-standard. Dette sikrer, at alle nye sider, der bygges fremadrettet, er 100% klar til CSS-eksport.
Tag en hurtig afstemning med udviklingsteamet. Vis dem de nye Auto Layout-rammer i Dev Mode og bekræft, at de opbyggede strukturer matcher jeres gældende CSS-arkitektur (f.eks. BEM, Tailwind CSS eller CSS Modules).
Figma beviser endnu engang, hvorfor de er markedsledende inden for UX/UI-designværktøjer. Ved kontinuerligt at tilpasse designværktøjet til de faktiske tekniske rammer i browseren (som CSS Flexbox og Grid) elimineres unødigt dobbeltarbejde.
