Figma Auto Layout to CSS: come si traduce in Flexbox (e quando usare Grid)

Se hai mai aperto un file Figma e visto "Auto Layout" attivato su un frame, hai già avuto sotto gli occhi qualcosa di molto simile a CSS Flexbox: i designer di Figma hanno preso in prestito quel modello mentale di proposito. Direction, gap, padding e alignment si trasferiscono quasi uno a uno. Dove la corrispondenza Figma-CSS diventa ambigua è nel comportamento di dimensionamento: "hug", "fill" e "fixed" descrivono un'intenzione, non un'unica dichiarazione CSS, e l'output corretto dipende dal contesto di layout circostante. Capire dove la corrispondenza è diretta e dove non lo è è ciò che ti permette di passare da un file di design a CSS mantenibile e responsive senza indovinare a occhio ogni valore.

Cosa controlla davvero Auto Layout

Auto Layout è il modo in cui Figma fa comportare un frame come un vero contenitore di layout, invece che come un semplice gruppo di forme posizionate in modo assoluto. Attivandolo su un frame, ottieni una serie di proprietà da configurare:

• Direction — se i figli si dispongono in verticale o in orizzontale.
• Spacing / gap — la distanza fissa tra ogni elemento figlio.
• Padding — lo spazio tra il bordo del frame e i suoi figli, impostabile per ogni lato.
• Alignment — come i figli si allineano lungo l'asse principale e quello secondario.
• Comportamento di ridimensionamento — se il frame e i suoi figli si adattano al contenuto, riempiono lo spazio disponibile, o mantengono una dimensione fissa.

Nulla di tutto questo è arbitrario. Ogni proprietà esiste perché corrisponde a qualcosa che un vero motore di layout ha bisogno di sapere — ed è esattamente per questo che nella maggior parte dei casi si traduce così bene in CSS Flexbox.

Da Figma Auto Layout a Flexbox: tabella di corrispondenza

Questa tabella è il nucleo pratico della traduzione da Figma a CSS. La maggior parte delle righe è uno scambio diretto; alcune dipendono dal contesto, cosa che la colonna Note segnala esplicitamente.

L'avvertenza importante: "Fill container" in Figma non si traduce sempre in un'unica dichiarazione CSS universale. Che debba diventare flex: 1, width: 100% o align-self: stretch dipende dal fatto che l'elemento si trovi in un contenitore flex, in un contenitore di tipo block o in una grid — la stessa proprietà di Figma può richiedere CSS diverso a seconda del genitore.

Il modello mentale: contenitore Auto Layout → contenitore flex

Una volta tolta di mezzo l'interfaccia di Figma, i concetti si allineano direttamente:

Ogni frame Auto Layout è un contenitore flex in potenza. Il lavoro vero consiste nel decidere, per ogni frame, cosa significhi realmente il suo comportamento di dimensionamento nel CSS corrispondente — argomento della sezione successiva.

Hug contents, fill container e dimensione fissa

Il comportamento di dimensionamento è dove la traduzione manuale da Figma a CSS fallisce più spesso, perché Figma esprime un'intenzione mentre CSS richiede una dichiarazione precisa.

Hug contents

Un elemento "hug contents" si dimensiona intorno al proprio contenuto — non ha una dimensione fissa e cresce o si riduce al variare del contenuto. Sul web, l'equivalente più vicino è spesso semplicemente non impostare affatto un width o height esplicito, dato che gli elementi block e i flex item si dimensionano già in base al contenuto per default. Dove serve essere espliciti, width: fit-content o height: fit-content si avvicina molto, ma non è universalmente equivalente: dentro un contenitore flex, un item senza flex-grow si comporta già come "hug" senza CSS aggiuntivo, quindi aggiungere fit-content sopra può essere ridondante o, in alcuni browser, sottilmente diverso dal comportamento predefinito.

/* Figma: Hug contents, Auto Layout orizzontale */
.button {
  display: flex;
  width: fit-content; /* spesso superfluo — i flex item si adattano già al contenuto per default */
}

Fill container

Un elemento "fill container" si espande per occupare lo spazio disponibile. Il CSS corretto dipende interamente dal genitore:

• Dentro un contenitore flex, sull'asse principale: flex: 1 (oppure flex-grow: 1).
• Dentro un contenitore flex, sull'asse secondario: align-self: stretch.
• Dentro un genitore di tipo block: width: 100%.

/* Figma: Fill container, figlio di un frame Auto Layout orizzontale */
.sidebar-content {
  flex: 1;
}

Non esiste un'unica regola "fill container → CSS" valida ovunque. Se il contesto di layout del genitore viene interpretato male, flex: 1 su un elemento che non è un flex item non fa nulla.

Fixed (dimensione fissa)

Le dimensioni fisse in Figma generalmente si traducono in un width e/o height esplicito in CSS. Ma un valore in pixel copiato letteralmente da Figma spesso non è l'obiettivo giusto: verifica se il design intende un vincolo rigido (width: 240px) oppure un limite su un elemento altrimenti flessibile (min-width / max-width, min-height / max-height). Trattare ogni valore fisso come un width rigido è una causa comune di layout che non si adattano a contenuti reali o a viewport diversi.

Auto Layout vs Constraints

Auto Layout e Constraints risolvono problemi correlati ma diversi, e confonderli è una fonte comune di errori di traduzione.

• Auto Layout controlla come i figli di un frame sono organizzati tra loro — direzione, gap, padding, allineamento e comportamento di dimensionamento. È l'equivalente più vicino a display: flex.
• Constraints controllano come si comporta un elemento quando il suo genitore viene ridimensionato — ancorato a sinistra/destra/alto/basso/centro, o scalato. Le constraints sono più rilevanti per elementi che non si trovano affatto dentro un frame Auto Layout, o per come si comporta lo stesso frame Auto Layout dentro un genitore di dimensione fissa.

In pratica, il CSS finale di un elemento richiede spesso informazioni da entrambi: Auto Layout fornisce le proprietà flex di un contenitore e dei suoi figli, mentre le constraints indicano se quel contenitore va trattato come fisso o deve ridimensionarsi insieme al proprio genitore. Nessuno dei due, da solo, dà il quadro responsive completo.

Come Auto Layout supporta il CSS responsive

Auto Layout fornisce indicazioni reali per il comportamento responsive, ma non diventa automaticamente CSS responsive da solo. Vale la pena essere precisi su cosa offre davvero:

• Il comportamento di dimensionamento di Auto Layout (hug / fill / fixed) indica quali elementi devono crescere, restringersi o restare fermi — questa è la base di un layout responsive, tradotta direttamente in flex, width: 100%, o una dimensione fissa.
• Le constraints di Figma aggiungono informazioni su come gli elementi dovrebbero comportarsi quando il loro contenitore viene ridimensionato, il che conta per tutto ciò che non è governato da Auto Layout.
• Nessuno dei due genera breakpoint. Se il layout di un design cambia davvero forma a certe larghezze — colonne che si impilano, navigazione che collassa — serve comunque una media query CSS, perché i frame di Figma rappresentano tipicamente alcune dimensioni di viewport fisse, non l'intero intervallo tra di esse.
• Tra le dimensioni effettivamente specificate dal designer, un dimensionamento fluido (percentuali, flex, minmax(), clamp()) riproduce spesso il comportamento voluto in modo più fedele rispetto ad aggiungere altri breakpoint per colmare i vuoti.

L'obiettivo è riprodurre il comportamento voluto del layout attraverso i viewport, non copiare le dimensioni in pixel dal frame Figma che si aveva sotto mano in quel momento.

Quando CSS Grid è la scelta migliore

Auto Layout è un modello a singolo asse: è molto efficace per righe e colonne, anche in combinazioni annidate. Ma alcuni design sono davvero bidimensionali, e forzarli in Flexbox annidati produce codice più difficile da mantenere del design stesso. La scelta giusta dipende dal layout: Flexbox si adatta a disposizioni monodimensionali (navigazione, gruppi di pulsanti, una riga di card, contenuto allineato in verticale o orizzontale), mentre Grid si adatta a quelle bidimensionali. Passa a CSS Grid quando incontri:

• Un layout in cui gli elementi devono allinearsi sia su righe che su colonne contemporaneamente — pensa a griglie di card, dashboard o gallerie di immagini.
• Comportamenti espliciti tipo "questo elemento occupa due colonne" o "due righe", che Grid gestisce nativamente con grid-column / grid-row e che Flexbox non può esprimere direttamente.
• Design in cui il numero di colonne deve rispondere alla larghezza disponibile (repeat(auto-fit, minmax(...))) invece che a un elenco fisso di breakpoint.
• Aree sovrapposte o su più livelli all'interno della stessa griglia, semplici da ottenere con il sistema di posizionamento di Grid, ma scomode con Flexbox.

Una buona regola pratica: se l'Auto Layout di un frame Figma si annida sempre e solo in una direzione alla volta, Flexbox è una traduzione fedele. Se ti ritrovi a costruire una griglia di frame Auto Layout solo per simulare l'allineamento riga-colonna, di solito è un segnale che l'interfaccia di Figma sta compensando l'assenza di una vera modalità di layout Grid bidimensionale — ed è il caso di generare direttamente CSS Grid.

Errori comuni nel passaggio da Auto Layout a CSS

Anche con una mappatura chiara, gli sviluppatori che riproducono Auto Layout a mano finiscono spesso per inciampare negli stessi dettagli:

• L'allineamento misto viene appiattito. Figma permette a singoli figli di sovrascrivere l'allineamento del gruppo; è facile ignorare questo dettaglio e applicare un unico valore align-items a tutto, perdendo gli override individuali che richiederebbero align-self.
• L'ambiguità tra "hug" e "fill". Un frame impostato per adattarsi al contenuto sembra identico a un frame di larghezza fissa a una singola dimensione di viewport, ma si comporta in modo completamente diverso quando il contenuto o la dimensione dello schermo cambiano.
• Il gap viene trascurato a favore di margin. Alcuni sviluppatori continuano a usare trucchi con i margin invece di gap, retaggio di vecchie pratiche Flexbox — non più necessario ora che gap è ben supportato dai browser, e che reintroduce esattamente i bug di spaziatura che gap era pensato per risolvere.
• I frame Auto Layout annidati diventano contenitori flex annidati senza un piano. Ogni frame annidato è un proprio contesto flex a sé stante, e una traduzione letterale uno-a-uno può produrre più elementi wrapper di quanti il layout ne richieda davvero.
• Il padding finisce sull'elemento sbagliato. È facile applicare il padding di un frame a un figlio invece che al contenitore, alterando la spaziatura basata su gap tra elementi fratelli.
• Dare per scontato che Auto Layout da solo renda un layout responsive. Come visto sopra, Auto Layout e le constraints informano il comportamento responsive, ma non sostituiscono le media query quando la forma del layout deve davvero cambiare.
• Annidare Flexbox per simulare una griglia bidimensionale. Se stai impilando frame Auto Layout per allineare sia righe che colonne, di solito è un segnale che CSS Grid è l'obiettivo più adatto.

Usare Auto Layout in un workflow Figma-to-code

Questa mappatura è ben nota, ma applicarla correttamente su ogni frame, ogni valore di gap e ogni contenitore annidato di un vero file di design — interpretando anche direzione, dimensionamento e gerarchia tra i frame — è un lavoro tedioso. È esattamente il tipo di lavoro di traduzione ripetitivo che MarkupGen è pensato per aiutare a risolvere. Il flusso di lavoro è in quattro passaggi: esporti il frame da Figma tramite il plugin dedicato, che porta struttura, stili e immagini direttamente nel tuo workspace; l'AI di MarkupGen costruisce HTML e CSS a partire da quella struttura reale, mappando direzione, gap, padding e allineamento di Auto Layout su una struttura Flexbox equivalente; poi rifinisci contenuti, font e layout visivamente in un editor integrato; infine esporti il pacchetto finale. I breakpoint responsive vengono generati dai vincoli di ridimensionamento del design, e puoi scegliere il formato di output — HTML/CSS puro, Tailwind CSS o componenti React — a seconda dello stack che usi. Come per qualsiasi conversione automatizzata, controlla il comportamento di dimensionamento sugli elementi hug/fill/fixed e i breakpoint dedotti — sono un buon punto di partenza, non un sostituto della verifica del risultato rispetto al design. Se preferisci partire da un esempio funzionante invece che da un file vuoto, prova il convertitore da Figma a HTML di MarkupGen sul tuo design, oppure leggi la guida completa alla conversione da Figma a HTML per il workflow end-to-end.

FAQ

Come si traduce l'Auto Layout di Figma in CSS? Direction, gap, padding e alignment si traducono direttamente in flex-direction, gap, padding e justify-content/align-items. Anche il comportamento di dimensionamento — hug, fill e fixed — si traduce in CSS, ma la dichiarazione esatta dipende dal contesto di layout, non è uno scambio uno-a-uno fisso.

L'Auto Layout di Figma è la stessa cosa di CSS Flexbox? Sono strettamente correlati, ma non identici. Auto Layout è stato deliberatamente modellato sui concetti di Flexbox, quindi la maggior parte delle proprietà si trasferisce direttamente. La differenza principale è che Figma esprime il dimensionamento come intenzione di design (hug, fill, fixed), mentre CSS richiede di scegliere la dichiarazione specifica che produce quell'intenzione in un dato contesto.

Cosa significa "hug contents" in CSS? Significa che l'elemento si dimensiona intorno al proprio contenuto invece di avere una dimensione fissa o estesa. Sul web è spesso il comportamento predefinito per elementi block e flex item senza una larghezza esplicita, oppure può essere reso esplicito con width: fit-content / height: fit-content dove serve.

Cosa significa "fill container" in CSS? Significa che l'elemento si espande per usare lo spazio disponibile nel suo genitore. A seconda del contesto, è flex: 1 sull'asse principale di un contenitore flex, align-self: stretch sull'asse secondario, o width: 100% dentro un genitore di tipo block — non esiste un'unica dichiarazione sempre valida.

L'Auto Layout di Figma crea automaticamente CSS responsive? No. Il comportamento di dimensionamento di Auto Layout e le constraints di Figma forniscono indicazioni utili su come gli elementi dovrebbero adattarsi, ma i breakpoint per i layout che cambiano forma a larghezze diverse vanno comunque scritti come media query CSS.

Dovrei usare CSS Grid o Flexbox per un design Figma? Dipende dal layout, non da quale sia "migliore". Flexbox si adatta a disposizioni monodimensionali — righe, colonne, navigazione, gruppi di pulsanti. Grid si adatta a layout davvero bidimensionali, come dashboard o griglie di card in cui gli elementi devono allinearsi sia su righe che su colonne contemporaneamente.