Figma Auto Layout vs CSS Flexbox og Grid: Lukning af design-til-kode-gabet
Hvordan Figma autolayout kortlægges til CSS flexbox og gitter (retning, mellemrum, polstring, kram, fyld, wrap), og hvor de adskiller sig, så design overlever overdragelse.
Core Takeaway
Figma's automatiske layout opfører sig meget som CSS flexbox: retningskort til flex-retning, mellemrum til mellemrum, polstring til polstring, "Kram indhold" til størrelse efter indhold, "Fyld container" for at flex-grow eller fuld bredde, og wrap til flex-wrap. Auto layouts gitterflow svarer til CSS gitter. Forskelle vises med min og maks. størrelser, tekstombrydning, basislinjejustering og responsive brudpunkter, så tjek dem eksplicit ved overdragelse.
Kortlægningen
Figma's guide beskriver autolayoutrammer, der arrangerer børn efter retning, afstand, polstring og justering, med vandrette, lodrette og gitterstrømme og en valgfri indpakning. Hver har en tæt CSS-ækvivalent:
Kram, fyld og fiks
I Figma ændres størrelsen på en ramme, der er indstillet til at omfavne indholdet, baseret på dens børn, og et underordnet sæt til at fylde beholder strækker sig for at fylde ledig plads; Figma bemærker, at hvis et barn er indstillet til at fylde, kan forælderen ikke længere kramme i den retning. I CSS er ækvivalenterne indholdsbaseret størrelse (auto- eller fit-indhold) og flex: 1 eller bredde: 100%. MDN's flexbox-guide forklarer, hvordan flex-grow, flex-shrink og flex-basis fordeler plads, hvilket er CSS-siden af samme idé.
Hvor kløften opstår
De fleste overdragelsesfejl kommer fra nogle få områder:
- Min. og maks. størrelser: Indstil dem begge steder, eller tekst og beholdere opfører sig forskelligt i ekstreme tilfælde.
- Tekst: linjehøjde, ombrydning og trunkering er forskellige mellem Figma-tekstgengivelse og browseren.
- Basislinjejustering: CSS kan justeres ved tekstbaselinje; tjek hvordan dette var tænkt.
- Absolutte børn: Figma's "Ignorer autolayout" (tidligere absolut position) kortlægger position: absolut i en positioneret forælder.
- Reaktionsevne: rammer for automatisk layout har ikke brudpunkter; definere, hvordan layouts ændres ved hver bredde.
Gitter
Brug autolayoutets gitterflow til ægte todimensionelle layouts, og map det til CSS-gitteret, som MDN beskriver som et system til udlægning af indhold i rækker og kolonner. Omviklede flexrækker er ikke det samme som et gitter: elementer i en ombrudt række er ikke på linje i kolonner.
Bevægelse er det største hul
Layout korter rimeligt godt fra Figma til CSS. Bevægelse gør det ikke: Prototypeovergange skal genopbygges i kode, og stater går ofte tabt. Det er gap-værktøjerne med runtimes, såsom ExodeUI (vi laver det) og Rive, adresser for interaktive komponenter.
Tast Principles for at huske
- Auto layout retning, mellemrum, polstring og wrap map til flexbox
- Knus ≈ indholdsstørrelse; Fyld ≈ flex: 1 eller 100 % bredde
- Grid flow maps til CSS grid
- Tjek min/maks størrelser, tekst, basislinjer og brudpunkter ved overdragelse
- Bevægelse og tilstande er det større design-til-kode-gab
Ofte stillede spørgsmål
Kilder
- Guide to auto layout — Figma Hjælpecenter
- Basic concepts of flexbox — MDN Web Docs
- Basic concepts of grid layout — MDN Web Docs