Automatické rozloženie Figma vs CSS Flexbox a mriežka: Odstránenie medzery medzi dizajnom a kódom
Ako sa automatické rozloženie Figma mapuje na flexbox a mriežku CSS (smer, medzera, vypchávka, objatie, výplň, obal) a kde sa líšia, aby návrhy prežili odovzdanie.
Core Takeaway
Automatické rozloženie Figma sa správa podobne ako flexbox CSS: smer mapuje na smer ohybu, medzeru k medzere, výplň k výplni, "Objímte obsah" na veľkosť podľa obsahu, "Naplniť nádobu" na ohybný rast alebo celú šírku a obal na ohybný obal. Tok mriežky automatického rozloženia zodpovedá mriežke CSS. Rozdiely sa objavujú pri minimálnych a maximálnych veľkostiach, zalamovaní textu, zarovnaní základnej čiary a citlivých prerušovacích bodoch, preto ich pri odovzdávaní explicitne skontrolujte.
Mapovanie
Príručka Figma popisuje rámy automatického rozloženia, ktoré usporiadajú deti podľa smeru, rozstupov, výplne a zarovnania, s horizontálnym, vertikálnym a mriežkovým tokom a voliteľným obalom. Každý z nich má blízky ekvivalent CSS:
Objať, naplniť a opraviť
V Figma sa veľkosť rámca nastaveného na objatie obsahu mení podľa jeho potomkov a podriadená sada na vyplnenie kontajnera sa roztiahne, aby vyplnil dostupný priestor; Figma poznamenáva, že ak je dieťa nastavené na vyplnenie, rodič sa už nemôže objímať týmto smerom. V CSS sú ekvivalenty veľkosti podľa obsahu (automatické alebo prispôsobené obsahu) a ohyb: 1 alebo šírka: 100 %. Sprievodca flexboxom MDN vysvetľuje, ako flex-grow, flex-shrink a flex-base rozdeľujú priestor, čo je strana CSS tej istej myšlienky.
Kde sa objaví medzera
Väčšina chýb pri odovzdávaní pochádza z niekoľkých oblastí:
- Minimálne a maximálne veľkosti: nastavte ich na oboch miestach, inak sa text a kontajnery správajú pri extrémoch odlišne.
- Text: výška riadku, zalamovanie a skrátenie sa medzi vykresľovaním textu Figma a prehliadačom líšia.
- Zarovnanie základnej čiary: CSS môže zarovnať podľa základnej čiary textu; skontrolujte, ako to bolo myslené.
- Absolútne deti: Figma "Ignorovať automatické rozloženie" (predtým absolútna poloha) mapuje pozíciu: absolútnu v umiestnenom rodičovi.
- Odozva: rámce s automatickým rozložením nemajú body prerušenia; definujte, ako sa rozloženia menia pri každej šírke.
Mriežky
Použite tok mriežky automatického rozloženia pre skutočné dvojrozmerné rozloženia a namapujte ho na mriežku CSS, ktorú MDN opisuje ako systém na usporiadanie obsahu do riadkov a stĺpcov. Zabalené flexibilné riadky nie sú to isté ako mriežka: položky v zabalenom riadku nie sú zoradené do stĺpcov.
Pohyb je väčšia medzera
Rozloženie mapuje pomerne dobre od Figma po CSS. Pohyb nie: prototypové prechody sa musia prebudovať v kóde a stavy sa často strácajú. To sú medzerové nástroje s runtimemi, ako sú ExodeUI (my to vyrábame) a Rive, adresa pre interaktívne komponenty.
Kľúč Principle na zapamätanie
- Automatický smer rozloženia, medzera, výplň a zalomenie mapy do flexboxu
- Hug ≈ veľkosť obsahu; Výplň ≈ ohyb: 1 alebo 100% šírka
- Mapy toku siete do siete CSS
- Pri odovzdávaní skontrolujte minimálne/maximálne veľkosti, text, základné línie a body prerušenia
- Pohyb a stavy predstavujú väčšiu medzeru medzi dizajnom a kódom
Často kladené otázky
Zdroje
- Guide to auto layout — Centrum pomoci Figma
- Basic concepts of flexbox — Webové dokumenty MDN
- Basic concepts of grid layout — Webové dokumenty MDN