CSS to Figma Auto Layout: guida a flexbox e grid in Figma

Se scrivi codice front-end, l'Auto Layout di Figma ti sembra familiare: una direzione, un gap, il padding, l'allineamento, elementi figli in Hug o in Fill. Viene da pensare che CSS to Figma Auto Layout sia una traduzione uno a uno. Non lo è. Flexbox e Grid sono più ricchi, il browser risolve margini, percentuali e dimensioni intrinseche che l'Auto Layout non modella, e lo stesso risultato visivo può nascere da CSS molto diversi.

Questa guida spiega come HTML to Frames mappa i layout CSS sull'Auto Layout, perché ogni risultato viene verificato rispetto al browser, dove sono i limiti e come scrivere CSS che si importa in modo pulito.

L'approccio: prima la geometria, poi l'inferenza

Un convertitore ingenuo legge display: flex e copia le proprietà. Si rompe in fretta: un contenitore flex con gap: 0 e margini sui figli, un elemento block che sembra soltanto una pila verticale, o una griglia che viene renderizzata come due righe ordinate.

HTML to Frames lavora a partire da ciò che il browser ha effettivamente renderizzato:

1. Costruzione al pixel. La pagina viene prima costruita in Figma con posizioni assolute prese dalla geometria misurata dal browser.
2. Percorso dall'interno verso l'esterno. Partendo dai frame più profondi, il plugin ricava pile verticali, pile orizzontali, righe a capo, gap, padding e allineamento da posizioni e dimensioni.
3. Aggiunta del significato responsive. I contenuti centrati diventano Center, i contenitori con max-width restano centrati, le card uguali e flex-grow diventano Fill, e in una barra "logo … menu … icone" l'elemento di spaziatura diventa Fill.
4. Verifica. L'Auto Layout viene applicato, poi la posizione di ogni elemento figlio viene confrontata con l'originale, con una tolleranza di 2 px.
5. Ripiego sicuro. Se non regge, si prova un piano più semplice. Se fallisce anche quello, il frame mantiene le posizioni assolute con constraint sensati (Stretch, Scale, Center, Min, Max).

Poiché l'inferenza parte dalla geometria renderizzata, una pila di elementi block diventa un Auto Layout verticale proprio come una colonna flex. Il meccanismo CSS conta meno del risultato. Per una panoramica più ampia, vedi Auto Layout spiegato.

La tabella di mappatura

Ecco come si traducono di solito i pattern CSS più comuni. Consideralo il risultato atteso, non una promessa: l'ultima parola spetta alla verifica.

Flexbox nel dettaglio

Direzione e ordine

flex-direction determina se un contenitore diventa una pila orizzontale o verticale. Poiché l'inferenza usa le posizioni renderizzate, le direzioni invertite e order producono semplicemente layer nell'ordine visivo. Ciò che vedi nel browser è ciò che ottieni nel pannello dei layer.

Gap e padding

gap è l'input più pulito: un'unica distanza coerente tra i figli, che si traduce direttamente nella spaziatura tra elementi dell'Auto Layout. I margini tra elementi fratelli funzionano quando sono coerenti. Quando non lo sono, per esempio 16, 24, 16, il plugin non può rappresentarli come un unico gap, e la verifica sceglierà un altro piano oppure manterrà le posizioni assolute.

Il padding viene misurato da dove si trovano effettivamente i figli all'interno del contenitore, quindi padding, spessori dei border e margini interni contribuiscono tutti al risultato.

Justify e align

justify-content corrisponde all'allineamento sull'asse principale e align-items a quello sull'asse trasversale. Il caso interessante è space-between. In un header come "logo … menu … icone", il plugin trasforma l'elemento di spaziatura in Fill, così al ridimensionamento il logo resta a sinistra, le icone restano a destra e la parte centrale si allunga. È il significato responsive che ti aspetteresti, invece di un valore di spaziatura fisso che funziona solo a una larghezza.

flex-grow e Fill

I figli con flex-grow o flex: 1 diventano Fill container. Le righe di card uguali diventano elementi Fill uguali, quindi ridimensionando il frame genitore le card si ridimensionano insieme, proprio come nel browser.

Andata a capo

flex-wrap: wrap corrisponde alla modalità wrap dell'Auto Layout e produce righe a capo. È la soluzione naturale per elenchi di tag, pareti di loghi e griglie di card costruite con flexbox.

CSS Grid nel dettaglio

L'Auto Layout di Figma è un modello a pile, non una griglia bidimensionale. I layout grid vengono quindi mappati sulla struttura più vicina che supera la verifica:

• Le griglie uniformi (colonne uguali, gap uguali) diventano di solito righe a capo.
• Le griglie asimmetriche (una sidebar e una colonna principale, una divisione 2:1) diventano di solito pile annidate: una pila orizzontale di pile verticali, o il contrario.
• Le celle con span e sovrapposizioni che non si scompongono in pile mantengono posizioni assolute con constraint.

In ogni caso, il risultato visivo corrisponde al browser entro la tolleranza. Cambia quanta parte del frame puoi ridimensionare in modo fluido in Figma.

Posizionamento assoluto, centratura e margini auto

position: absolute

Un badge posizionato in assoluto, un elemento decorativo o un overlay non appartengono a una pila, perché si sovrappongono agli elementi fratelli. Questi elementi mantengono le posizioni assolute e il plugin assegna loro dei constraint, così si comportano comunque in modo sensato quando il genitore viene ridimensionato: un badge fissato in alto a destra resta in alto a destra, un overlay a copertura totale si allunga.

max-width e margin: auto

Il classico contenitore del contenuto, max-width: 1200px; margin: 0 auto, diventa un contenitore centrato in un frame a tutta larghezza. Qui entra in gioco anche la Site width: il plugin misura la larghezza di design reale della pagina al momento dell'importazione. I design a tutta larghezza arrivano a 1920 con il contenitore centrato, i siti davvero boxed alla larghezza del loro contenitore e i siti fluidi a 1440. Il valore misurato mantiene intatta la logica del tuo contenitore.

Margini auto dentro flex

margin-left: auto su un figlio flex lo spinge in fondo, un pattern comune nelle barre di navigazione. Come per space-between, viene ricavato dalla geometria, di solito come elemento di spaziatura in Fill che mantiene l'elemento spinto al bordo opposto.

Perché la verifica è importante

Senza verifica, i convertitori hanno due cattive opzioni: applicare l'Auto Layout ovunque e accettare che alcuni frame si spostino, si sovrappongano o collassino, oppure evitare l'Auto Layout e consegnarti layer assoluti congelati.

HTML to Frames applica l'Auto Layout, poi controlla la posizione di ogni elemento figlio entro 2 px. Se un frame fallisce, si prova un piano più semplice; se fallisce anche quello, il frame resta assoluto. Il design non si rompe mai. Puoi fidarti che ciò che vedi in Figma corrisponde al browser, e l'Auto Layout che ottieni è un Auto Layout che regge davvero.

La schermata dei risultati mostra la quota complessiva di Auto Layout e, per i frame rimasti assoluti, ne elenca il motivo (diagnostica). Così la domanda "perché questo non è in Auto Layout?" diventa qualcosa su cui puoi intervenire nel tuo CSS.

Nei nostri test su siti reali, l'Auto Layout è stato ricavato su circa l'86–97 percento dei frame, per esempio il 93 percento su un sito di prodotto e l'88 percento su Linear e Stripe. I tuoi numeri dipendono da come è scritto il CSS.

Limiti da conoscere

• La semantica della griglia bidimensionale non esiste nell'Auto Layout; le griglie diventano righe a capo o pile annidate, e gli span complessi possono restare assoluti.
• Le spaziature incoerenti tra elementi fratelli non si possono esprimere come un unico gap.
• Le sovrapposizioni (margini negativi, figli assoluti) mantengono quegli elementi in posizionamento assoluto.
• Trasformazioni skew e 3D, clip-path con path(), maschere a più livelli e colori Display-P3 non vengono ancora convertiti.
• I contenuti incorporati come iframe, canvas WebGL e video senza poster arrivano come immagine screenshot del loro riquadro.
• Una larghezza alla volta. Ogni schermata viene impaginata alla propria larghezza. Usa il responsive set (Desktop, Tablet, Mobile) per acquisire ogni breakpoint come frame separato.

Consigli: scrivere CSS che si importa in modo pulito

Queste abitudini fanno sì che i tuoi layout si traducano più spesso in Auto Layout, e sono comunque buone pratiche CSS.

1. Usa gap invece dei margini tra fratelli. Un unico valore coerente diventa direttamente la spaziatura tra elementi.
2. Mantieni la spaziatura coerente in un contenitore. Spaziature miste obbligano a ripiegare.
3. Preferisci flexbox per i layout monodimensionali. Barre di navigazione, toolbar, gruppi di pulsanti e righe di card si traducono direttamente.
4. Usa grid con tracce uguali per le griglie di card. Le colonne uniformi diventano righe a capo pulite.
5. Racchiudi i layout asimmetrici in contenitori espliciti. Una sidebar e un'area contenuti nella loro riga flex producono pile annidate chiare.
6. Usa flex: 1 per gli elementi che devono allungarsi. Segnala Fill.
7. Centra i contenuti con max-width e margin: 0 auto. Diventa un contenitore centrato che resta centrato.
8. Riserva position: absolute ai veri overlay. Non usarlo per il layout ordinario.
9. Evita i margini negativi per il layout. Creano sovrapposizioni che non si possono impilare.
10. Dai un nome ai colori con le custom property. Con Styles & variables (Pro), --brand-primary diventa una variabile brand/primary.
11. Usa testo reale. Il testo nelle immagini non può diventare layer di testo modificabili.

Vedere la tua mappatura

Il modo più rapido per capire come si traduce il tuo CSS è importarlo. Incolla il codice o carica una cartella tramite il flusso HTML to Figma, acquisisci una build locale con l'estensione Chrome, oppure fallo inviare da uno strumento AI via MCP. Poi apri la schermata dei risultati, controlla la quota di Auto Layout e leggi la diagnostica dei frame rimasti assoluti.

Attiva Reference screenshot (Pro) per aggiungere un layer nascosto e bloccato della pagina originale, così puoi passare dall'importazione al rendering del browser e viceversa. Attiva Detailed layers (Pro) quando vuoi una struttura dei layer più dettagliata.

Per saperne di più su come le pagine diventano frame, leggi la conversione HTML to frame, e consulta le funzionalità per tutto ciò che l'importatore supporta. La documentazione descrive nel dettaglio ogni opzione di importazione.