Layout automatico Figma vs Flexbox e griglia CSS: colmare il divario tra progettazione e codice
Come il layout automatico Figma si associa al flexbox e alla griglia CSS (direzione, spazio, imbottitura, abbraccio, riempimento, avvolgimento) e dove differiscono, in modo che i progetti sopravvivano al trasferimento.
Punto chiave
Il layout automatico di Figma si comporta in modo molto simile al flexbox di CSS: mappe di direzione in direzione flessibile, da spazio a spazio, da imbottitura a imbottitura, "Abbraccia contenuto" per ridimensionare in base al contenuto, "Riempi contenitore" per aumentare la flessibilità o la larghezza intera e avvolgere per avvolgere flessibile. Il flusso della griglia del layout automatico corrisponde alla griglia CSS. Le differenze appaiono con le dimensioni minime e massime, il testo a capo, l'allineamento della linea di base e i punti di interruzione reattivi, quindi controlla quelli esplicitamente al momento del trasferimento.
La mappatura
La guida di Figma descrive i fotogrammi di layout automatico che organizzano i bambini per direzione, spaziatura, imbottitura e allineamento, con flussi orizzontali, verticali e a griglia e un avvolgimento opzionale. Ognuno ha un equivalente CSS vicino:
Abbraccia, riempi e ripara
In Figma, un frame impostato per abbracciare il contenuto si ridimensiona in base ai suoi figli, e un frame figlio impostato per riempire il contenitore si allunga per riempire lo spazio disponibile; Figma rileva che se un bambino è impostato per riempirsi, il genitore non può più abbracciarlo in quella direzione. In CSS gli equivalenti sono il dimensionamento basato sul contenuto (automatico o adatta-contenuto) e flex: 1 o larghezza: 100%. La guida flexbox di MDN spiega come flex-grow, flex-shrink e flex-basis distribuiscono lo spazio, che è il lato CSS della stessa idea.
Dove appare il divario
La maggior parte dei bug di trasferimento provengono da alcune aree:
- Dimensioni minime e massime: impostale in entrambe le posizioni, altrimenti testo e contenitori si comporteranno diversamente agli estremi.
- Testo: l'altezza della linea, il ritorno a capo e il troncamento differiscono tra il rendering del testo Figma e il browser.
- Allineamento della linea di base: CSS può essere allineato tramite la linea di base del testo; controlla come era previsto.
- Figli assoluti: "Ignora layout automatico" di Figma (precedentemente posizione assoluta) si associa a position: Absolute in un genitore posizionato.
- Reattività: i frame con layout automatico non hanno punti di interruzione; definire come cambiano i layout a ciascuna larghezza.
Griglie
Use auto layout's grid flow for true two-dimensional layouts, and map it to CSS grid, which MDN describes as a system for laying out content in rows and columns. Le righe flessibili racchiuse non sono la stessa cosa di una griglia: gli elementi in una riga racchiusa non sono allineati in colonne.
Il movimento è il divario più grande
Il layout funziona abbastanza bene da Figma a CSS. Il movimento no: le transizioni del prototipo devono essere ricostruite nel codice e gli stati spesso vanno persi. Questo è il gap tra gli strumenti con i runtime, come ExodeUI (we make it) e Rive, indirizzo per i componenti interattivi.
Principi chiave da ricordare
- Direzione automatica del layout, gap, riempimento e avvolgimento della mappa su flexbox
- Abbraccio ≈ dimensionamento del contenuto; Riempi ≈ Flessibile: 1 o 100% di larghezza
- Il flusso della griglia viene mappato sulla griglia CSS
- Controlla le dimensioni minime/massime, il testo, le linee di base e i punti di interruzione al momento del trasferimento
- Il movimento e gli stati rappresentano il divario più ampio tra progettazione e codice
Domande frequenti
Fonti
- Guide to auto layout — Figma Centro assistenza
- Basic concepts of flexbox — MDN Documenti Web
- Basic concepts of grid layout — MDN Documenti Web