Figma Auto Layout vs CSS Flexbox and Grid: Lukking av design-til-kode-gapet
Hvordan Figma autolayout kartlegges til CSS flexbox og rutenett (retning, gap, polstring, klem, fyll, vikle) og hvor de er forskjellige, slik at design overlever overlevelse.
Kjerne takeaway
Figmas autolayout oppfører seg omtrent som CSS flexbox: retningskart til flex-retning, gap til gap, polstring til polstring, "Klem innhold" til størrelse etter innhold, "Fyll container" for å flex-grow eller full bredde, og wrap til flex-wrap. Automatisk layouts rutenettflyt tilsvarer CSS rutenett. Forskjeller vises med min og maksimale størrelser, tekstbryting, grunnlinjejustering og responsive bruddpunkter, så sjekk disse eksplisitt ved overlevering.
Kartleggingen
Figmas guide beskriver autolayoutrammer som arrangerer barn etter retning, avstand, polstring og justering, med horisontale, vertikale og rutenettflyter og en valgfri omslag. Hver har en nær CSS-ekvivalent:
Klem, fyll og fiks
I Figma endres størrelsen på et rammesett for å klemme innholdet basert på dets barn, og et underordnet sett til å fylle beholderen strekker seg for å fylle tilgjengelig plass; Figma bemerker at hvis et barn er satt til å fylle, kan ikke forelderen lenger klemme i den retningen. I CSS er ekvivalentene innholdsbasert størrelse (auto- eller tilpasningsinnhold) og flex: 1 eller bredde: 100 %. MDN sin flexbox-guide forklarer hvordan flex-grow, flex-shrink og flex-basis fordeler plass, som er CSS-siden av den samme ideen.
Hvor gapet vises
De fleste overleveringsfeil kommer fra noen få områder:
- Minste og maksimale størrelser: Angi dem begge steder, ellers oppfører tekst og beholdere forskjellig i ekstreme tilfeller.
- Tekst: linjehøyde, bryting og avkorting varierer mellom Figma-tekstgjengivelse og nettleseren.
- Grunnlinjejustering: CSS kan justeres etter tekstgrunnlinje; sjekk hvordan dette var ment.
- Absolutte barn: Figmas "Ignorer automatisk layout" (tidligere absolutt posisjon) kartlegger til posisjon: absolutt i en posisjonert forelder.
- Respons: rammer for automatisk layout har ikke bruddpunkter; definere hvordan oppsett endres ved hver bredde.
Rutenett
Bruk automatisk layouts rutenettflyt for ekte todimensjonale oppsett, og tilordne det til CSS rutenett, som MDN beskriver som et system for å legge ut innhold i rader og kolonner. Wrapped flex-rader er ikke det samme som et rutenett: elementer i en wrapped-rad står ikke på linje i kolonner.
Bevegelse er det største gapet
Layout karter rimelig godt fra Figma til CSS. Bevegelse gjør det ikke: Prototypeoverganger må bygges om i kode, og stater går ofte seg vill. Det er gap-verktøyene med kjøretider, som ExodeUI (vi lager det) og Rive, adresser for interaktive komponenter.
Tast Principles å huske
- Auto layout retning, gap, polstring og pakk kart til flexbox
- Klem ≈ innholdsstørrelse; Fyll ≈ flex: 1 eller 100 % bredde
- Rutenettflyt kart til CSS rutenett
- Sjekk min/maks størrelser, tekst, grunnlinjer og bruddpunkter ved overlevering
- Bevegelse og tilstander er det største gapet mellom design og kode
Ofte stilte spørsmål
Kilder
- Guide to auto layout — Figma Hjelpesenter
- Basic concepts of flexbox — MDN Web Docs
- Basic concepts of grid layout — MDN Web Docs