Figma Dev Mode: cosa copiare e cosa ignorare

In Figma Dev Mode si copiano tre cose: misure, token e asset. Il codice generato dal pannello è un punto di partenza, non il codice da incollare. La scorciatoia per aprire la modalità è Shift D.

Cosa mostra il pannello

• Le proprietà del layer: padding, gap, larghezza, altezza e posizione.
• Le variabili applicate, con nome e valore, non solo il colore finale.
• Gli asset: le icone vengono rilevate da sole e si scaricano in SVG.
• Il confronto con la versione precedente del frame, prima di rifare il lavoro.

Il pannello alterna due viste: Code, con lo snippet nel linguaggio scelto, e List, con i valori copiabili uno per uno. La lingua si cambia dal menu in alto a destra, e con essa cambiano unità e sintassi.

Cosa copiare davvero

• La misura: 16px di gap è un dato, non un'opinione.
• Il nome della variabile o dello stile, che nel codice diventa un token.
• L'SVG dell'icona, da confrontare con la griglia di icone già in uso.
• Il nome del componente e le varianti, per capire quale componente del catalogo corrisponde.

Il CSS generato contiene valori assoluti: padding: 16px, color: #111827. Nel progetto quegli stessi valori sono token e classi. Copia il numero per misurare la distanza, poi applica la variabile che il design system già espone.

Code Connect: il codice vero nel pannello

npm i -D @figma/code-connect
npx figma connect create "https://www.figma.com/design/abc123/Design-System?node-id=1-39"
npx figma connect preview src/components/Button.figma.ts
npx figma connect publish --dry-run

create legge il nodo e scrive un template con i getter delle proprietà; preview mostra lo snippet come apparirà e lo valida; publish --dry-run elenca cosa spedirebbe a Figma senza pubblicare. Dopo il publish, Dev Mode mostra il componente del tuo repository al posto del codice autogenerato.

Annotazioni, stato e focus

Chi progetta può marcare un frame come pronto per lo sviluppo e annotarlo con note e misure. La vista Ready for dev filtra quei frame, la vista focus ne mostra uno solo. Le notifiche arrivano solo con un full seat o un dev seat.

Plugin che cambiano l'output

I plugin di codegen cambiano linguaggio e stile dello snippet, per esempio verso Tailwind o verso un componente React. Un plugin di terze parti gira sui tuoi file: controlla chi lo pubblica e con quale licenza prima di installarlo, come faresti con una dipendenza npm.

Limite dichiarato

Dev Mode richiede un piano Professional o superiore e un dev seat. Code Connect, sul piano Professional, ammette una sola libreria attiva e un solo framework per volta: cambiare framework disattiva le connessioni precedenti, che restano visibili ma non più usate.

Dove continuare

Per confrontare un'esportazione con il catalogo parti da le 12.808 icone, dalle 1.556 anteprime di blocchi e dalla libreria shadcn. Il percorso completo è in Figma to React senza ricostruire, i file da cui partire in migliori kit Figma. Il confronto fra temi è in temi shadcn gratis o premium.