Figma Auto Layout vs CSS Flexbox och Grid: Stänger design-till-kod-gapet
Hur Figma automatisk layout mappar till CSS flexbox och rutnät (riktning, gap, stoppning, kram, fyll, linda) och var de skiljer sig, så design överlever handoff.
Core Takeaway
Figma:s automatiska layout beter sig ungefär som CSS flexbox: riktningskartor till flex-riktning, gap till gap, stoppning till stoppning, "Kram innehåll" till storleksanpassning efter innehåll, "Fyll behållare" för att flex-växa eller full bredd, och wrap till flex-wrap. Automatisk layouts rutnätsflöde motsvarar CSS rutnät. Skillnader visas med min- och maxstorlekar, textbrytning, baslinjejustering och responsiva brytpunkter, så kontrollera dessa explicit vid överlämnandet.
Kartläggningen
Figma:s guide beskriver automatiska layoutramar som arrangerar barn efter riktning, avstånd, stoppning och inriktning, med horisontella, vertikala och rutnätsflöden och en valfri omslutning. Var och en har en nära CSS motsvarighet:
Krama, fylla och fixa
I Figma ändras storleken på en ram som är inställd för att krama innehållet baserat på dess underordnade, och en underordnad inställning för att fylla behållare sträcker sig för att fylla tillgängligt utrymme; Figma noterar att om ett barn är inställt på att fylla, kan föräldern inte längre kramas i den riktningen. I CSS är motsvarigheterna innehållsbaserad storlek (auto eller passform) och flex: 1 eller bredd: 100%. MDN:s flexbox-guide förklarar hur flex-grow, flex-shrink och flex-basis fördelar utrymme, vilket är CSS-sidan av samma idé.
Där gapet uppstår
De flesta handoff-buggar kommer från några områden:
- Min- och maxstorlekar: ställ in dem på båda ställena, annars beter sig text och behållare olika i extrema lägen.
- Text: radhöjd, radbrytning och trunkering skiljer sig mellan Figma textåtergivning och webbläsaren.
- Baslinjejustering: CSS kan justeras med textbaslinje; kolla hur detta var tänkt.
- Absoluta barn: Figma:s "Ignorera automatisk layout" (tidigare absolut position) mappar till position: absolut i en positionerad förälder.
- Lyhördhet: ramar för automatisk layout har inga brytpunkter; definiera hur layouter ändras på varje bredd.
Rutnät
Använd automatisk layouts rutnätsflöde för äkta tvådimensionella layouter och mappa det till CSS rutnät, som MDN beskriver som ett system för att lägga ut innehåll i rader och kolumner. Wrapped flex-rader är inte detsamma som ett rutnät: objekt i en wraped rad raderas inte i kolumner.
Rörelse är det större gapet
Layout kartor någorlunda bra från Figma till CSS. Rörelse gör det inte: prototypövergångar måste byggas om i kod, och tillstånd går ofta vilse. Det är gapverktygen med körtider, såsom ExodeUI (vi gör det) och Rive, adress för interaktiva komponenter.
Nyckel Principles att komma ihåg
- Auto layoutriktning, gap, stoppning och linda kartan till flexbox
- Kram ≈ innehållsstorlek; Fyll ≈ flex: 1 eller 100 % bredd
- Rutnätsflödeskartor till CSS-rutnät
- Kontrollera min/max-storlekar, text, baslinjer och brytpunkter vid handoff
- Rörelse och tillstånd är det större gapet mellan design och kod
Vanliga frågor
Källor
- Guide to auto layout — Figma Hjälpcenter
- Basic concepts of flexbox — MDN Web Docs
- Basic concepts of grid layout — MDN Web Docs