Sviluppo web
Figma to React senza ricostruire la UI
Figma to code non è un pulsante di export. È una traduzione da frame a token, da token a componenti, da componenti a props. Il flusso che sopravvive alla seconda schermata.
In sintesi
- Mappa i token prima dei componenti, non dopo.
- Confronta gli stati del componente, non solo il frame di default.
- Un handoff è finito quando lo sviluppatore non deve riaprire Figma per capire il focus.
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.
| Frame Figma | Domanda | Decisione |
|---|---|---|
| Bottone | Focus visibile? | Usa il componente o aggiungi il token focus |
| Input | Errore annunciato? | Collega aria-invalid e messaggio |
| Card | Altezza variabile? | Grid, non altezza fissa |
| Dialog | Escape e focus? | Primitiva accessibile, non div |
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
- 10 minuti: token e nomi.
- 10 minuti: mappatura componenti e stati.
- 10 minuti: copy, errori e condizioni mobile.
- Alla fine, il developer deve poter nominare ogni componente e ogni token senza aprire Figma.
La guida completa è Figma to React: handoff without rebuilding the UI.
Domande frequenti
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.