Figma automatikus elrendezés vs CSS Flexbox és rács: a tervezés és a kód közötti hézag bezárása
Hogyan illeszkedik a Figma automatikus elrendezés a CSS flexboxhoz és rácshoz (irány, hézag, párnázás, ölelés, kitöltés, becsomagolás), és hol különböznek egymástól, így a tervek túlélik az átadást.
Core Takeaway
A Figma automatikus elrendezése hasonlóan viselkedik, mint a CSS flexbox: irányleképezés flexibilis irányban, hézagtól résig, párnázás a párnázathoz, „Ölelés tartalom” a tartalom szerinti méretezéshez, „Töltsd ki a tartályt” a rugalmas növekedéshez vagy a teljes szélességhez, és a tekercselés a flex-wrap. Az automatikus elrendezés rácsfolyama megfelel a CSS rácsnak. A különbségek a minimális és maximális méretek, a szöveg tördelése, az alapvonal igazítása és a reszponzív töréspontok esetén jelennek meg, ezért ezeket kifejezetten ellenőrizze az átadáskor.
A térképezés
A Figma útmutatója leírja az automatikus elrendezésű kereteket, amelyek irány, térköz, párnázás és igazítás szerint rendezik el a gyerekeket, vízszintes, függőleges és rácsos áramlásokkal, valamint egy opcionális burkolással. Mindegyiknek közeli CSS megfelelője van:
Ölelj, töltsd meg és rögzítsd
A Figma-ben a tartalom átölelésére beállított keret mérete a gyermekei alapján változik, a tartályt megtöltő gyermek pedig megnyúlik, hogy kitöltse a rendelkezésre álló helyet; A Figma megjegyzi, hogy ha egy gyereket töltésre állítanak be, a szülő többé nem ölelhet ebbe az irányba. A CSS megfelelői a tartalom alapú méretezés (automatikus vagy illeszkedő tartalom) és flex: 1 vagy szélesség: 100%. A MDN flexbox útmutatója elmagyarázza, hogyan osztja el a teret a rugalmas növekedés, a rugalmas zsugorodás és a flexibilitás, ami ugyanannak az ötletnek a CSS oldala.
Ahol megjelenik a szakadék
A legtöbb átadási hiba néhány területről származik:
- Minimális és maximális méretek: állítsa be mindkét helyen, vagy a szöveg és a tárolók szélsőséges esetekben eltérően viselkednek.
- Szöveg: a sor magassága, tördelése és csonkítása eltér a Figma szövegmegjelenítés és a böngésző között.
- Alapvonal-igazítás: A CSS a szöveg alapvonala alapján igazítható; ellenőrizze, hogy ez hogyan készült.
- Abszolút gyerekek: A Figma "Automatikus elrendezés figyelmen kívül hagyása" (korábban abszolút pozíció) a pozicionált szülőben lévő abszolút pozícióra képezi le.
- Reagálási képesség: az automatikus elrendezésű kereteknek nincs töréspontja; határozza meg, hogyan változnak az elrendezések az egyes szélességeknél.
Rácsok
Használja az automatikus elrendezés rácsfolyamát a valódi kétdimenziós elrendezésekhez, és képezze le a CSS rácsra, amelyet a MDN a tartalom sorokban és oszlopokban történő elrendezésére szolgáló rendszerként ír le. A burkolt hajlékony sorok nem ugyanazok, mint a rács: a burkolt sor elemei nem sorakoznak oszlopokba.
A mozgás a nagyobb szakadék
Az elrendezés meglehetősen jól illeszkedik a Figma-től a CSS-ig. A mozgás nem: a prototípus-átmeneteket újra kell építeni kódban, és az állapotok gyakran elvesznek. Ez a futásidejű réseszközök, mint például a ExodeUI (mi készítjük) és a Rive, az interaktív komponensek címe.
Kulcs Principle, amit meg kell jegyezni
- Automatikus elrendezési irány, hézag, kitöltés és burkolt térkép flexboxba
- Ölelés ≈ tartalom méretezése; Kitöltés ≈ flex: 1 vagy 100% szélesség
- A rács áramlását leképezi a CSS rácsra
- Az átadáskor ellenőrizze a minimális/maximális méreteket, a szöveget, az alapvonalakat és a töréspontokat
- A mozgás és az állapotok jelentik a legnagyobb eltérést a tervezés és a kód között
Gyakran Ismételt Kérdések
Források
- Guide to auto layout — Figma Súgó
- Basic concepts of flexbox — MDN webdokumentumok
- Basic concepts of grid layout — MDN webdokumentumok