# Figma Dev Mode: what to copy and what to ignore

Dev Mode is for measurements, tokens and assets, not for pasting generated CSS. What to read in the panel and how Code Connect brings real code.

> Page: https://ui.eneawork.it/blog/come-usare-figma-dev-mode
> Markdown: https://ui.eneawork.it/blog/come-usare-figma-dev-mode.md

*2026-11-01*

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.

Il pacchetto @figma/code-connect 2.1.0 ha 1.688.939 download nella settimana chiusa il 1 novembre 2026, letti da api.npmjs.org/downloads/point/last-week/@figma/code-connect. Il catalogo EneUI conta 12.808 icone e 1.556 blocchi, misurati da /api/stats lo stesso giorno: sono i record con cui confrontare ciò che esporti dal file.

## Cosa mostra il pannello

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

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.

## FAQ

### Dev Mode è incluso nel piano gratuito?

No. Serve un piano Professional, Education, Organization, Government o Enterprise, più un dev seat o un full seat. Sul piano gratuito il file si apre in modalità Design.

### Il CSS copiato da Dev Mode si può incollare?

Si può incollare, ma contiene valori assoluti e nomi di proprietà che non conoscono il tuo design system. Conviene usarlo per leggere le misure e poi applicare token e classi del progetto.

### Che differenza c'è fra Code Connect CLI e UI?

Collegano gli stessi componenti. La CLI vive nel repository e si versiona con il codice; la UI si usa dentro Figma con GitHub collegato. Le connessioni create dalla CLI si modificano solo dalla CLI.

### Perché il pannello mostra un colore diverso dal token?

Perché il colore è il valore risolto della variabile, dopo il cambio di modalità o tema. Apri la sezione delle variabili per vedere nome e modalità applicata.

### Le icone esportate vanno confrontate con il catalogo?

Sì, prima di aggiungerne una nuova. Il catalogo EneUI raccoglie 12.808 icone: se la stessa forma esiste già, importarla evita un SVG duplicato e un secondo stile di tratto.