Auto Layout in Figma: come si traduce in CSS Flexbox (e quando serve ancora 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 Flexbox: i designer di Figma hanno preso in prestito quel modello mentale di proposito. Capire questa corrispondenza non è solo una curiosità: è ciò che ti permette di passare da un file di design a CSS funzionante senza indovinare a occhio ogni valore di spaziatura.

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 si traduce così bene in CSS.

La corrispondenza diretta con Flexbox

Proprietà Auto Layout di Figma	Equivalente CSS Flexbox
Direzione (verticale/orizzontale)	flex-direction: column / row
Spaziatura tra gli elementi	gap
Padding	padding
Allineamento sull'asse principale	justify-content
Allineamento sull'asse secondario	align-items
Adatta al contenuto (hug)	width: fit-content / height: fit-content
Riempi il contenitore (fill)	flex: 1 oppure width: 100% / height: 100%
Dimensione fissa	width / height espliciti

Guardando questa tabella si capisce subito perché Auto Layout risulta intuitivo a chi già conosce Flexbox, e perché Flexbox risulta intuitivo ai designer partiti da Figma. Entrambi descrivono lo stesso box model, solo con nomi diversi.

Dove la traduzione manuale va storta

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. Sbagliare qui è una causa comune di layout che si rompono con contenuti reali.
• Il gap viene trascurato. 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.

Quando Flexbox non è la scelta giusta — passa a Grid

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. 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.

Come MarkupGen automatizza tutto questo

Questa mappatura è ben nota, ma applicarla correttamente su ogni frame, ogni valore di gap e ogni contenitore annidato di un vero file di design è un lavoro tedioso — ed è esattamente il tipo di lavoro di traduzione ripetitivo che MarkupGen è stato costruito per eliminare. 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 automaticamente direzione, gap, padding e allineamento di Auto Layout su una struttura Flexbox equivalente invece di lasciarli a una stima manuale; poi rifinisci contenuti, font e layout visivamente in un editor integrato; infine esporti il pacchetto finale. I breakpoint responsive vengono generati automaticamente 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. Ogni esportazione riceve anche un punteggio di qualità AI automatico, così puoi vedere a colpo d'occhio se il codice generato è pronto per andare in produzione. L'output privilegia HTML pulito e semantico, senza <div> annidati superflui — un aspetto importante tanto per la manutenibilità quanto per la SEO.

Provalo sul tuo design

Capire la corrispondenza tra Auto Layout e Flexbox ti rende più veloce nel revisionare codice generato e più bravo a individuare dove un design ha davvero bisogno di Grid. Se preferisci saltare del tutto la traduzione manuale, prova MarkupGen gratis sul tuo file Figma, oppure leggi la guida completa alla conversione da Figma a HTML per il workflow end-to-end.