# Figma Dev Mode: cosa copiare e cosa ignorare

Dev Mode serve per misure, token e asset, non per incollare CSS generato. Cosa leggere nel pannello e come portare il codice vero con Code Connect.

> Pagina: 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.