Figma Auto Layout vs CSS Flexbox a mřížka: Překlenutí mezery mezi designem a kódem
Jak se automatické rozložení Figma mapuje na flexbox a mřížku CSS (směr, mezera, vycpávka, objetí, výplň, obal) a kde se liší, aby návrhy přežily předání.
Core Takeaway
Automatické rozvržení Figma se chová podobně jako flexbox CSS: směr mapuje směr flex, mezera k mezeře, vycpávka k vycpávce, "Objetí obsahu" k velikosti podle obsahu, "Naplnit nádobu" k flex-růstu nebo celé šířce a obal k flex-balení. Tok mřížky automatického rozložení odpovídá mřížce CSS. Rozdíly se objevují u minimálních a maximálních velikostí, zalamování textu, zarovnání účaří a citlivých zarážek, takže je při předání explicitně zkontrolujte.
Mapování
Příručka Figma popisuje automatické rozvržení rámečků, které uspořádají děti podle směru, rozestupu, odsazení a zarovnání, s horizontálním, vertikálním a mřížkovým tokem a volitelným obalem. Každý má blízký ekvivalent CSS:
Obejmout, naplnit a opravit
V Figma se velikost rámce, který objímá obsah, mění na základě jeho potomků a dětská sada k vyplnění kontejneru se roztahuje, aby vyplnil dostupný prostor; Figma poznamenává, že pokud je dítě nastaveno na vyplnění, rodič se již nemůže tímto směrem obejmout. V CSS jsou ekvivalenty velikosti podle obsahu (automatické nebo přizpůsobené obsahu) a flex: 1 nebo šířka: 100 %. Průvodce flexboxem MDN vysvětluje, jak flex-grow, flex-shrink a flex-base distribuují prostor, což je strana CSS stejné myšlenky.
Kde se objeví mezera
Většina chyb předávání pochází z několika oblastí:
- Minimální a maximální velikosti: nastavte je na obou místech, jinak se text a kontejnery chovají v extrémech odlišně.
- Text: výška řádku, zalamování a zkrácení se liší mezi vykreslováním textu Figma a prohlížečem.
- Zarovnání účaří: CSS lze zarovnat podle účaří textu; zkontrolovat, jak to bylo zamýšleno.
- Absolutní podřízené položky: Figma "Ignorovat automatické rozvržení" (dříve absolutní pozice) mapuje na pozici: absolutní v polohovaném rodiči.
- Odezva: rámce s automatickým rozložením nemají zarážky; definovat, jak se rozvržení mění při každé šířce.
Mřížky
Použijte tok mřížky automatického rozložení pro skutečné dvourozměrné rozložení a namapujte jej na mřížku CSS, kterou MDN popisuje jako systém pro rozložení obsahu do řádků a sloupců. Zalomené ohebné řádky nejsou stejné jako mřížka: položky v zalomeném řádku nejsou zarovnány do sloupců.
Pohyb je větší mezera
Rozložení mapuje poměrně dobře od Figma do CSS. Pohyb ne: prototypové přechody musí být přestavěny v kódu a stavy se často ztrácejí. To je mezera nástrojů s runtime, jako je ExodeUI (my to vyrábíme) a Rive, adresa pro interaktivní komponenty.
Klíč Principle k zapamatování
- Automatický směr rozložení, mezera, výplň a zalomení mapy do flexboxu
- Hug ≈ velikost obsahu; Výplň ≈ flex: 1 nebo 100% šířka
- Mapy toku sítě do sítě CSS
- Při předání zkontrolujte minimální/maximální velikosti, text, účaří a zarážky
- Pohyb a stavy jsou větší mezerou mezi návrhem a kódem
Často kladené otázky
Zdroje
- Guide to auto layout — Centrum nápovědy Figma
- Basic concepts of flexbox — Webové dokumenty MDN
- Basic concepts of grid layout — Webové dokumenty MDN