Figma Auto Layout vs CSS Flexbox și Grid: Închiderea decalajului de la proiectare la cod
Cum se mapează aspectul automat Figma cu caseta flexibilă și grilă CSS (direcție, gol, umplutură, îmbrățișare, umplere, înfășurare) și unde diferă, astfel încât modelele să supraviețuiască transferului.
Core Takeaway
Dispunerea automată a lui Figma se comportă la fel ca CSS flexbox: hărți de direcție pentru direcția flexibilă, decalaj la gol, umplutură la umplutură, „Îmbrățișare conținut” la dimensionare în funcție de conținut, „Umplere container” pentru a crește flexibil sau la lățime completă și înfășurare la înfășurare flexibilă. Fluxul de grilă al aspectului automat corespunde grilei CSS. Diferențele apar cu dimensiunile minime și maxime, împachetarea textului, alinierea liniei de bază și punctele de întrerupere receptive, așa că verificați-le în mod explicit la transfer.
Cartografierea
Ghidul lui Figma descrie cadre de aranjare automată care aranjează copiii după direcție, spațiere, umplutură și aliniere, cu fluxuri orizontale, verticale și grilă și o înfășurare opțională. Fiecare are un echivalent CSS apropiat:
Îmbrățișează, umple și fixează
În Figma, un cadru setat pentru a îmbrățișa conținutul se redimensionează în funcție de copiii săi, iar un copil setat pentru a umple containerul se întinde pentru a umple spațiul disponibil; Figma observă că, dacă un copil este setat să umple, părintele nu se mai poate îmbrățișa în acea direcție. În CSS echivalentele sunt dimensionarea bazată pe conținut (auto sau fit-content) și flex: 1 sau lățime: 100%. Ghidul flexbox al lui MDN explică modul în care flex-grow, flex-shrink și flex-basis distribuie spațiul, care este partea CSS a aceleiași idei.
Unde apare golul
Majoritatea erorilor de transfer provin din câteva zone:
- Dimensiuni minime și maxime: setați-le în ambele locuri sau textul și containerele se comportă diferit la extreme.
- Text: înălțimea liniei, încadrarea și trunchierea diferă între redarea textului Figma și browser.
- Alinierea liniei de bază: CSS se poate alinia după linia de bază a textului; verificați cum a fost intenționat acest lucru.
- Copii absolute: „Ignorați aspectul automat” al lui Figma (anterior poziție absolută) se mapează la poziție: absolut într-un părinte poziționat.
- Reactivitate: cadrele de aspect automat nu au puncte de întrerupere; definiți modul în care aspectul se schimbă la fiecare lățime.
Grile
Utilizați fluxul de grilă al aspectului automat pentru machete bidimensionale adevărate și mapați-l la grila CSS, pe care MDN o descrie ca un sistem de aranjare a conținutului în rânduri și coloane. Rândurile flexibile împachetate nu sunt la fel ca o grilă: elementele dintr-un rând împachetat nu se aliniază în coloane.
Mișcarea este decalajul mai mare
Așezați hărți rezonabil de bine de la Figma la CSS. Mișcarea nu: tranzițiile prototip trebuie reconstruite în cod, iar statele se pierd adesea. Acestea sunt instrumentele gap cu timpi de execuție, cum ar fi ExodeUI (lo facem noi) și Rive, adresa pentru componentele interactive.
Cheie Principles de reținut
- Direcție automată de aspect, decalaj, umplutură și înfășurare harta în flexbox
- Hug ≈ dimensiunea conținutului; Umplere ≈ flex: 1 sau 100% lățime
- Fluxul grilei se realizează pe grila CSS
- Verificați dimensiunile min/max, textul, liniile de bază și punctele de întrerupere la transfer
- Mișcarea și stările reprezintă decalajul mai mare de la proiectare la cod
Întrebări frecvente
Surse
- Guide to auto layout — Centrul de ajutor Figma
- Basic concepts of flexbox — MDN Web Docs
- Basic concepts of grid layout — MDN Web Docs