Figma automatische lay-out versus CSS Flexbox en Grid: de kloof tussen ontwerp en code dichten
Hoe de automatische lay-out van de Figma wordt toegewezen aan de CSS-flexbox en het raster (richting, opening, opvulling, omhelzing, vulling, omslag) en waar ze verschillen, zodat ontwerpen de overdracht overleven.
Kern afhaalmaaltijd
De automatische lay-out van Figma gedraagt zich ongeveer hetzelfde als de CSS-flexbox: richting wordt toegewezen aan flexrichting, opening naar opening, opvulling naar opvulling, "Hug-inhoud" naar formaat op basis van inhoud, "Vul container" naar flex-groei of volledige breedte, en wrap naar flex-wrap. De rasterstroom van de automatische lay-out komt overeen met het CSS-raster. Er verschijnen verschillen met de minimale en maximale grootte, tekstterugloop, uitlijning van de basislijn en responsieve breekpunten, dus controleer deze expliciet bij de overdracht.
De mapping
De gids van Figma beschrijft frames voor automatische lay-out die kinderen rangschikken op richting, afstand, opvulling en uitlijning, met horizontale, verticale en rasterstromen en een optionele omloop. Elk heeft een nauw CSS-equivalent:
Knuffelen, vullen en fixen
In Figma wordt de grootte van een frame dat is ingesteld om de inhoud te omhelzen, aangepast op basis van de onderliggende elementen, en een kind dat is ingesteld om een container te vullen, strekt zich uit om de beschikbare ruimte te vullen; Figma merkt op dat als een kind klaar is om te vullen, de ouder niet langer in die richting kan knuffelen. In CSS zijn de equivalenten op inhoud gebaseerde afmetingen (auto of fit-content) en flex: 1 of breedte: 100%. De flexbox-gids van MDN legt uit hoe flex-grow, flex-shrink en flex-basis de ruimte verdelen, wat de CSS-kant van hetzelfde idee is.
Waar de kloof ontstaat
De meeste overdrachtsbugs komen uit een aantal gebieden:
- Minimale en maximale grootte: stel ze op beide plaatsen in, anders gedragen tekst en containers zich in extreme gevallen anders.
- Tekst: regelhoogte, terugloop en afkapping verschillen tussen Figma-tekstweergave en de browser.
- Basislijnuitlijning: CSS kan worden uitgelijnd op tekstbasislijn; kijk eens hoe dit bedoeld was.
- Absolute kinderen: Figma's "Negeer automatische lay-out" (voorheen absolute positie) wordt toegewezen aan positie: absoluut in een gepositioneerde ouder.
- Responsiviteit: frames voor automatische lay-out hebben geen breekpunten; definieer hoe lay-outs bij elke breedte veranderen.
Rasters
Gebruik de rasterstroom van de automatische lay-out voor echte tweedimensionale lay-outs en wijs deze toe aan het CSS-raster, dat MDN beschrijft als een systeem voor het opmaken van inhoud in rijen en kolommen. Omwikkelde flexibele rijen zijn niet hetzelfde als een raster: items in een omwikkelde rij staan niet in kolommen.
Beweging is de grotere kloof
De lay-out wordt redelijk goed weergegeven van Figma tot CSS. Beweging niet: prototype-overgangen moeten in code worden herbouwd, en toestanden gaan vaak verloren. Dat is de kloof tussen tools met runtimes, zoals ExodeUI (wij maken het) en Rive, adres voor interactieve componenten.
Toets Principles in om te onthouden
- Automatische lay-outrichting, opening, opvulling en omslagkaart naar flexbox
- Knuffel ≈ inhoudsgrootte; Vulling ≈ flex: 1 of 100% breedte
- Rasterstroom wordt toegewezen aan het CSS-raster
- Controleer de min/max-formaten, tekst, basislijnen en breekpunten bij overdracht
- Beweging en toestanden vormen de grotere kloof tussen ontwerp en code
Veelgestelde vragen
Bronnen
- Guide to auto layout — Figma Helpcentrum
- Basic concepts of flexbox — MDN Webdocumenten
- Basic concepts of grid layout — MDN Webdocumenten