# Figma to React without rebuilding the UI

Figma to code is not an export button. It is a translation from frames to tokens, tokens to components, props, the flow that survives screen two.

> Page: https://ui.eneawork.it/blog/figma-to-react-senza-ricostruire
> Markdown: https://ui.eneawork.it/blog/figma-to-react-senza-ricostruire.md

*2026-10-31*

Figma to React non è un export. È una traduzione: i frame diventano token, i token diventano componenti, i componenti diventano props. Se salti un passaggio, il risultato è una schermata che sembra giusta e un codice che nessuno vuole mantenere.

## Mappa i token prima dei componenti

Elenca colori, stili testo, spaziature, raggi e ombre del file. Se due designer hanno usato due grigi per la stessa superficie, unificali ora. Un’implementazione React ha bisogno di un token per decisione, non di un valore esadecimale per layer.

## Confronta gli stati, non i pixel

Per ogni frame cerca il componente React più vicino. Confronta default, hover, focus, disabled, loading, errore. Se il design richiede uno stato che il componente non ha, decidi se estendere il componente o cambiare il design prima di scrivere codice.

## Traduci il layout, non le misure

Una larghezza di 347px non è un requisito; un gap di 24px, una griglia a 12 colonne e una max-width sì. Converti le misure fisse in regole di layout e tieni i numeri grezzi solo dove servono davvero, come un avatar o un’icona.

## Il flusso dei 30 minuti

La guida completa è Figma to React: handoff without rebuilding the UI.

## FAQ

### Figma può esportare React?

Può generare codice, ma non conosce il tuo design system, i tuoi token e i tuoi stati. L’export è una bozza, non un handoff.

### Cosa serve per un handoff completo?

Token, componenti mappati, stati, copy reale, condizioni mobile e una persona che possa rispondere alle domande.

### Meglio token o variabili Figma?

Le variabili aiutano a mantenerli, ma il contratto è il nome e il valore condiviso tra design e codice. Esporta i token, non solo i frame.

### Quanto tempo serve?

Per una schermata semplice, 30 minuti di mappatura. Per un flusso, mezza giornata: il costo è nelle eccezioni, non nei componenti base.

### Come gestisco le immagini?

Esportale con dimensioni e formati definiti, dichiara width/height e usa `sizes`. Un’immagine senza dimensioni è un layout shift in attesa.