Come convertire un design Figma in HTML e CSS pulito (guida passo dopo passo)

Consegnare un file Figma a uno sviluppatore di solito significa che qualcuno deve sedersi e ricostruire manualmente ogni frame in HTML e CSS: misurare gli spazi, indovinare i breakpoint e sperare che la pagina finale corrisponda ancora al design dopo una dozzina di piccole decisioni. Questa guida illustra un percorso più veloce: passare direttamente da un design Figma completato a un markup pulito e semantico.

Perché il passaggio manuale da Figma a HTML è lento

Gran parte del tempo dedicato a questo passaggio non è lavoro creativo, ma lavoro di traduzione:

• Leggere le impostazioni di Auto Layout e reimplementarle a mano come regole Flexbox.
• Rimisurare padding, gap e dimensioni dei font già definiti nel file Figma.
• Decidere dove posizionare i breakpoint responsive, dato che i frame di Figma hanno solitamente un'unica larghezza fissa.
• Ripulire il markup perché non sia dieci livelli di tag <div> annidati senza alcun significato semantico.

Niente di tutto questo è difficile, ma è ripetitivo, ed è proprio nel lavoro manuale ripetitivo che si insinuano errori e incoerenze.

Passaggio 1: esportare il frame da Figma

Invece di esportare immagini statiche o copiare gli stili un livello alla volta, seleziona il frame che vuoi convertire e usa il plugin Figma di MarkupGen per inviarlo al tuo workspace. Il plugin cattura insieme struttura, stili e immagini del frame, quindi non c'è bisogno di ricreare nulla da zero.

Passaggio 2: lascia che la struttura si trasformi da sola in codice

È qui che scompare la maggior parte del lavoro manuale. Alcuni esempi di ciò che viene tradotto automaticamente:

• Auto Layout → Flexbox. Le proprietà di Auto Layout di Figma (direzione, gap, padding, allineamento) vengono mappate direttamente su una struttura CSS Flexbox equivalente, invece di essere stimate a occhio.
• Vincoli → breakpoint responsive. I vincoli di ridimensionamento del layout generano regole fluide e responsive, invece di una pagina a larghezza fissa unica.
• Livelli → HTML semantico. L'output privilegia elementi significativi rispetto a una zuppa di <div> profondamente annidati e senza etichetta: un blocco di pagina diventa una <section>, una barra di navigazione diventa <nav>, un titolo diventa <h1>–<h3> nell'ordine corretto, un paragrafo diventa <p>, un pulsante diventa <button> o <a> a seconda del suo comportamento, un'immagine diventa <img> con alt. Un contenitore di layout generico e privo di significato proprio resta un <div> — non tutti i livelli di Figma hanno un tag semantico già pronto, quindi la scelta di quello giusto dipende da cosa rappresenta davvero il contenuto, non da una tabella di corrispondenza fissa.

Passaggio 3: scegli il formato di output

Non tutti i progetti hanno bisogno dello stesso tipo di codice. A seconda dello stack su cui stai lavorando, puoi esportare come:

• HTML/CSS puro — per siti statici o progetti senza fase di build.
• Tailwind CSS — classi utility generate a partire dai token reali di spaziatura, colore e tipografia del design; consulta Da Figma a Tailwind CSS: guida pratica alla conversione per maggiori dettagli.
• React — componenti che puoi inserire direttamente in un'app esistente; consulta Da Figma a React: un workflow pratico per sviluppatori per i dettagli.

Passaggio 4: rifinisci prima di esportare

La conversione automatizzata copre la maggior parte del lavoro, ma il passaggio da design a codice raramente è meccanico al 100%: il testo potrebbe aver bisogno di piccole modifiche, o una sezione potrebbe richiedere un aggiustamento manuale del layout. L'editor ti permette di rifinire visivamente contenuti, font e layout prima di generare il pacchetto finale, e ogni esportazione riceve automaticamente un punteggio, così puoi capire a colpo d'occhio se l'output è pronto per la produzione.

Gestire il responsive: non basta copiare i valori in pixel della versione desktop

Un frame di Figma di solito rappresenta una larghezza specifica — un frame desktop di 1440px, magari affiancato da un frame mobile separato. Questo non significa fissare quella larghezza nel CSS e rimpicciolire l'intera pagina con transform: scale(). Figma non genera da solo il CSS responsive: fornisce solo dei segnali, e tradurli in un comportamento responsive reale resta comunque compito dello sviluppatore o del sistema di conversione:

• Il sizing hug / fill / fixed di Auto Layout indica se un elemento deve restringersi al contenuto o riempire il proprio contenitore — la base per scegliere tra width: auto, width: 100% / flex: 1 oppure un max-width fisso.
• I vincoli (constraints) (ancoraggio a sinistra/destra, scala con il contenitore...) aggiungono comportamento per gli elementi che Auto Layout non gestisce.
• Le media query restano necessarie a ogni larghezza in cui il layout cambia effettivamente forma — colonne che si impilano in una sola colonna, la navigazione che si comprime — perché un frame di Figma cattura solo alcune dimensioni di viewport fisse, non l'intero intervallo tra di esse.

L'obiettivo è riprodurre il comportamento responsive previsto dal design su tutte le dimensioni dello schermo, non copiare i valori esatti in pixel del frame che si ha aperto in quel momento.

Cosa significa davvero "pulito" in questo contesto

"Codice pulito" non è solo uno slogan di marketing: sono proprietà specifiche e verificabili.

1. Nessun <div> di wrapping superfluo attorno a un singolo elemento.
2. Una gerarchia di intestazioni corretta (h1 → h2 → h3) invece di tutto stilizzato per sembrare un titolo.
3. Tag semantici dove hanno senso, che sono anche esattamente ciò di cui i motori di ricerca e gli screen reader hanno bisogno per capire la pagina.

Quest'ultimo punto conta più di quanto sembri: un markup facile da analizzare per un browser e un crawler è anche un markup più facile da leggere per il prossimo sviluppatore. È anche, dal punto di vista strutturale, gran parte di ciò da cui dipende l'accessibilità; consulta Da Figma a HTML accessibile: una guida pratica per scoprire cosa richiede ancora un controllo manuale oltre ai tag semantici — ARIA, form, contrasto, navigazione da tastiera.

Un piccolo esempio: da Auto Layout a markup reale

Prendi una semplice card — un'icona, un titolo e un link "Learn more", disposti con Auto Layout (verticale, gap di 16px, padding di 24px). Ricostruita a mano, è facile ritrovarsi con una pila di <div> senza etichetta. Convertita a partire dalla struttura reale del frame, la stessa card diventa:

<article class="feature-card">
  <img src="/icons/rocket.svg" alt="" class="feature-card__icon" />
  <h3 class="feature-card__title">Fast setup</h3>
  <a href="/docs/getting-started" class="feature-card__link">Learn more</a>
</article>

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

Alcuni dettagli degni di nota: la card è un <article>, non un wrapper generico, perché è un contenuto autonomo e autosufficiente. L'icona riceve alt="" perché è decorativa — il testo del titolo comunica già di cosa parla la card. "Learn more" è un vero <a href>, non un <div> con un click handler, perché porta a un'altra pagina. La direzione vertical e il gap di 16px dell'Auto Layout si mappano direttamente su flex-direction: column e gap: 16px — senza bisogno di stimarli a occhio. Questa è la corrispondenza più comune, ma c'è altro da considerare per farlo bene (padding, allineamento, sizing hug/fill, Auto Layout annidati); consulta Figma Auto Layout to CSS: come si traduce in Flexbox (e quando usare Grid) per una mappatura più completa.

Errori comuni nella conversione da Figma a HTML

Ci sono alcuni errori che ricorrono spesso quando si converte a mano un design Figma in codice:

• Trasformare ogni livello in un <div>. Ignorare cosa rappresenta davvero il contenuto (navigazione, un titolo, un pulsante...) rende il markup più difficile da capire sia per gli screen reader che per i motori di ricerca.
• Abusare di position: absolute. Riproduce la posizione esatta in pixel del canvas di Figma, ma si rompe non appena cambia il contenuto o la dimensione dello schermo.
• Ignorare Auto Layout e stimare gli spazi a occhio. Molto più soggetto a errori e più difficile da mantenere rispetto a tradurre direttamente le proprietà già definite nel file di design.
• Fissare le dimensioni desktop e trattare il responsive come un ripensamento successivo, invece di costruire fin dall'inizio un layout flessibile.
• Una gerarchia di intestazioni disordinata — scegliere le dimensioni dei font in base a come appaiono invece di seguire un ordine corretto h1 → h2 → h3.
• <div> di wrapping superflui attorno a un elemento già di per sé significativo, oppure confondere "visivamente identico" con "semanticamente identico".

Dove si colloca in un workflow reale

Questo processo non vuole sostituire il giudizio dello sviluppatore: elimina il passaggio di traduzione meccanica, in modo che quel giudizio possa concentrarsi su ciò che ne ha davvero bisogno: dettagli di interazione, casi limite e integrazione della pagina in una codebase più ampia. Scopri come si confronta con la codifica manuale dello stesso frame, o come le agenzie lo inseriscono nel flusso di lavoro con i clienti. Se vuoi vedere l'intero processo in quattro passaggi — esporta, costruisci, rifinisci, esporta — direttamente nel prodotto, puoi provarlo gratis sul tuo file Figma.

FAQ

Come si converte Figma in HTML? Seleziona il frame che vuoi convertire, leggi la sua struttura a livelli e le impostazioni di Auto Layout, poi traducile in HTML semantico e CSS corrispondente — Auto Layout diventa Flexbox, i vincoli diventano comportamento responsive. Puoi farlo a mano, oppure usare uno strumento di automazione come MarkupGen per eliminare il lavoro di traduzione ripetitivo.

Si può convertire Figma in HTML e CSS responsive? Sì, ma non in modo completamente automatico. Auto Layout e i vincoli forniscono segnali sul comportamento di ridimensionamento (restringersi, riempire, fisso), ma decidere i breakpoint specifici e verificare il layout su tutte le dimensioni dello schermo richiede ancora l'interpretazione di una persona o del sistema di conversione.

A cosa corrisponde Auto Layout di Figma in CSS? Principalmente a CSS Flexbox: la direzione diventa flex-direction, il gap diventa gap, il padding diventa padding, l'allineamento diventa justify-content/align-items. Consulta Figma Auto Layout to CSS: come si traduce in Flexbox (e quando usare Grid) per una mappatura più dettagliata, incluso quando scegliere CSS Grid al posto di Flexbox.

Conviene usare HTML semantico quando si converte Figma in HTML? Sì. L'HTML semantico (nav, article, button, una gerarchia di intestazioni corretta...) aiuta gli screen reader e i motori di ricerca a capire correttamente la struttura della pagina — non è solo una questione estetica del codice.

La conversione da Figma a HTML può essere automatizzata? Gran parte sì — leggere la struttura a livelli, mappare Auto Layout su Flexbox, generare i breakpoint a partire dai vincoli — ma la revisione finale (contenuti, casi limite, integrazione nella codebase) richiede ancora un passaggio umano.

Vuoi passare subito a convertire il tuo design? Converti il tuo design Figma in HTML/CSS con MarkupGen →