Figma Auto Layout a CSS Grid: una guida pratica

TL;DR

• Auto Layout si mappa a flex per i flussi unidimensionali e a grid per i layout bidimensionali.
• Definisci righe/colonne in Figma prima dell'export; livelli disordinati producono grid disordinati.
• Confronta il risultato con la tua scala di spaziature Tailwind e con i tuoi breakpoint.

Perché Grid è il target giusto per alcuni Auto Layout

Auto Layout è lineare per impostazione predefinita, ma quando le card vanno a capo, compaiono larghezze miste o il contenuto richiede allineamento sia di riga che di colonna, CSS Grid è un target migliore.

Scegli grid quando ti serve

• Posizionamento bidimensionale (righe e colonne).
• Allineamento coerente tra altezze di contenuto diverse.
• Controllo esplicito dei gap su entrambi gli assi.

Scegli flex quando ti serve

• Flusso orizzontale o verticale semplice.
• Dimensionamento basato sul contenuto senza righe rigide.
• Regole di layout minime con CSS più ridotto.

Mappatura di Auto Layout su CSS Grid

L'obiettivo è tradurre l'intenzione, non ogni pixel. Usa questa mappatura come punto di partenza:

Flusso di lavoro passo dopo passo

1. Raggruppa i livelli per riga/colonna in Figma.
2. Rinomina frame/componenti in modo che le classi esportate siano significative.
3. Decidi le colonne del grid (ad es. 2, 3, 4) e le regole dei breakpoint.
4. Esporta e mappa i gap ai tuoi token di spaziatura.
5. Affina la responsività usando minmax() o classi di breakpoint.

Suggerimenti per la mappatura con Tailwind

• Inizia con grid + gap-*.
• Usa grid-cols-* per colonne fisse, o grid-cols-[repeat(auto-fit,minmax(240px,1fr))] per layout fluidi.
• Mantieni le spaziature allineate alla tua configurazione (gap-4, gap-6, ecc.).

Strategia responsive

• Mobile first: inizia con una colonna, poi aumenta le colonne a md/lg.
• Colonne adattive al contenuto: usa auto-fit con minmax per evitare gap scomodi.
• Controlli di overflow: valida titoli lunghi o altezze di contenuto variabili.

Insidie comuni

• Eccesso di annidamento dei frame, che crea wrapper grid non necessari.
• Ignorare la dimensione intrinseca; le card ricche di testo richiedono righe più alte.
• Token non corrispondenti; spaziature esportate che non sono nella tua scala Tailwind.

Checklist prima della pubblicazione

• Il grid è allineato alle spaziature del tuo design system.
• I breakpoint corrispondono alle regole di layout del prodotto.
• I componenti rimangono riutilizzabili fuori dal contesto grid.

FAQ

Posso convertire ogni Auto Layout in grid?
Usa grid solo quando ti serve controllo bidimensionale; altrimenti flex è più semplice e leggero.

Mi serve un plugin?
No, ma buoni strumenti di export fanno risparmiare tempo. Vedi il Figma to Code Converter per le opzioni.

Come evito i layout shift?
Imposta larghezze di colonna prevedibili e testa con contenuti reali.

Strumenti consigliati

Confronta gli exporter e il supporto al grid nella pagina di confronto.

Prossimi passi

• Esplora l'hub Figma to Code.
• Rivedi i suggerimenti sull'export responsive nella guida di confronto.