Figma Dev Mode è la prima cosa a cui ricorrere quando un designer consegna il lavoro. È integrato, è ufficiale, parla il linguaggio nativo di Figma. Allora perché dovresti cercare qualcos'altro?
La risposta non è che Dev Mode sia cattivo. È che risolve un problema diverso. Capire qual è quel problema — e cosa non è — è l'intero articolo. Se vuoi passare direttamente alla risposta, prova figmascope qui.
Cos'è Figma Dev Mode
Dev Mode è il layer di handoff a pagamento di Figma, disponibile nei piani Professional e Organization. Quando lo attivi (il pulsante </> nella barra degli strumenti in alto), ottieni un pannello che mostra snippet CSS o iOS/Android per i layer selezionati, annotazioni dei componenti, valori delle variabili e un marcatore di stato "pronto per dev" che i designer possono impostare.
È progettato per il momento in cui un designer dice "è finito, vai a costruirlo." Lo sviluppatore apre Figma, clicca in giro, copia snippet, guarda la spaziatura. Non c'è nessuna fase di esportazione. Nessun file. Stai semplicemente leggendo il design sul posto.
Figma fornisce anche un server MCP ufficiale per Dev Mode (separato — trattato nel confronto MCP), ma Dev Mode come interfaccia è principalmente un'esperienza di lettura per umani. Punta, clicca, ispeziona, copia.
Gli snippet di codice generati da Dev Mode sono genuinamente utili come riferimenti rapidi. Puoi vedere lo stack di font, i token di spaziatura esatti se le variabili sono configurate, i border radius. Per uno sviluppatore senior che ha solo bisogno di una verifica rapida di un valore specifico, è veloce.
Cos'è figmascope
figmascope è uno strumento lato browser — nessun backend, nessuna installazione, gira in una scheda — che esporta un bundle di contesto strutturato da qualsiasi file Figma. Incolla un URL Figma e un Personal Access Token (tenuto in memoria, mai inviato a un server), e produce un .zip contenente:
CONTEXT.md— una specifica del design leggibile sia da umani che da macchinetokens.json— design token tipizzati (sourced da variabili Figma quando presenti, inferiti per frequenza altrimenti)screens/*.json— rappresentazione intermedia per schermata: nodi stack, overlay, absolute e leaf con relazioni spaziali intattescreens/*.png— screenshot di riferimento 2×components/inventory.json— indice dei componenti con ID delle istanzestrings.json— tutto il contenuto testuale, con chiavi per i18n (stringRef.key)_meta.json— metadati dell'esportazione, info sul file, sorgente dei token
Il bundle è costituito da file semplici. Nessun runtime. Nessun SDK. Mettilo in un repo, committalo, confrontalo con diff, passalo a qualsiasi agente AI che legge file.
La differenza chiave da Dev Mode: questa non è un'esperienza di lettura all'interno di Figma. È un'esportazione che lascia completamente Figma.
Dove vince Dev Mode
Ispezione live. Se vuoi cliccare su un layer specifico e ottenere immediatamente il suo valore calcolato esatto, Dev Mode è istantaneo. Nessuna fase di esportazione, nessun zip, nessun cambio di contesto. La risposta è nel pannello.
Integrazione ufficiale. Figma lo costruisce, lo mantiene e fornisce miglioramenti insieme al resto del prodotto. Supporto alle variabili, flussi di annotazione, stato pronto-per-dev — queste sono funzionalità native con supporto di primo livello. Quando Figma aggiunge una nuova capacità del design system, Dev Mode la riceve.
Distribuzione del team. Ogni designer e sviluppatore su un piano Figma org ce l'ha già. Nessuno strumento aggiuntivo da installare, spiegare o mantenere.
Strumenti durante il design. I designer possono contrassegnare i frame come pronti, lasciare annotazioni a livello di codice e collaborare con gli sviluppatori all'interno della stessa canvas. Questo scambio reciproco è genuinamente buono per i cicli di QA dove hai bisogno di commenti e aggiornamenti di stato.
Dove vince figmascope
Output basato su file, agnostico all'agente. L'output di Dev Mode vive dentro Figma. L'output di figmascope vive in un zip che controlli tu. Mettilo accanto al tuo codice, punta Claude Code o Cursor su di esso, e l'agente ha la specifica completa — tutte le schermate, tutti i token, tutte le stringhe — senza dover connettersi a Figma.
Version control. Un bundle di figmascope è confrontabile con diff. Committalo. Mettilo in una PR. Vedi esattamente quali token sono cambiati tra il design della settimana scorsa e quello di oggi. Dev Mode non ha il concetto di cronologia delle versioni per la specifica stessa — Figma ha la cronologia delle versioni del file, ma quella è per la sorgente, non per uno snapshot esportabile dell'intento del design.
Nessun requisito di piano a pagamento. figmascope è con licenza MIT e gratuito. Usa la REST API pubblica di Figma, che richiede solo un PAT (gratuito su qualsiasi account Figma). Dev Mode richiede un piano Professional o Organization. Per sviluppatori singoli o piccoli team che lavorano con un designer sul piano gratuito, figmascope è l'unica opzione.
Output deterministico. Ogni esportazione dello stesso file Figma alla stessa versione produce lo stesso bundle. Stesso JSON, stessi token, stesse stringhe. Questo è importante per la riproducibilità — puoi eseguirlo in CI, pinnare un bundle a una release, fare test di regressione su di esso.
Portabile e offline. Una volta che hai il bundle, funziona senza connessione a Figma o a qualsiasi server. Il contesto dell'agente è autocontenuto. Utile quando sei in aereo, dietro un firewall, o vuoi semplicemente non dipendere dall'uptime di Figma durante uno sprint di build.
L'IR preserva la semantica spaziale. La rappresentazione intermedia screens/*.json cattura il tipo di layout (stack, overlay, absolute), l'identità dei componenti (componentId sui nodi INSTANCE) e i riferimenti alle stringhe — non solo il CSS calcolato. Un agente può ragionare sulla struttura del layout, non solo copiare snippet.
Affiancati: stesso file Figma
Prendi una schermata di login con un form, un pulsante primario e alcuni token di testo. Ecco cosa ti dà ogni strumento:
Output Dev Mode: proprietà CSS per il layer su cui hai cliccato (font-size: 16px; color: #1f1d1a; border-radius: 8px). Un layer alla volta. Copi quello di cui hai bisogno. Se vuoi tutti gli stati del pulsante, clicchi su ognuno. Se vuoi il nome del token, c'è se il designer ha collegato le variabili — altrimenti manca.
Output bundle figmascope: CONTEXT.md con la specifica completa della schermata di login. tokens.json con color.text.primary, spacing.4, radius.md — con chiavi, tipizzati, sourced da variabili o inferiti. screens/login.json con l'albero IR: un contenitore stack che tiene un INSTANCE del form che fa riferimento a componentId: "abc123", nodi foglia figli con stringRef.key: "auth.login.cta". strings.json che mappa quella chiave a "Accedi". screens/login.png a 2×.
Passi il bundle a Cursor. Legge CONTEXT.md, recupera i nomi dei token da tokens.json, costruisce il componente dall'IR. Non ha bisogno di aprire Figma per niente.
Confronto
| Dimensione | Figma Dev Mode | figmascope |
|---|---|---|
| Prezzo | A pagamento (piano Professional / Org) | Gratuito, open source MIT |
| Formato output | Pannello in Figma, snippet CSS/iOS/Android | .zip: CONTEXT.md, tokens.json, screens/*.json, *.png |
| Modello di integrazione | Nell'interfaccia Figma, ispezione per layer | Esportazione browser, poi file semplici ovunque |
| Compatibile con agenti | Tramite server MCP (funzione separata) | Qualsiasi agente che legge file (Claude Code, Cursor, Aider, Copilot…) |
| Adatto al version control | No (l'output vive in Figma) | Sì — bundle è confrontabile con diff, committabile |
| Output deterministico | No (per-click, legato alla sessione) | Sì — stessa versione file → stesso bundle |
| Offline / portabile | No — richiede connessione Figma | Sì — bundle funziona senza nessuna connessione |
| Annotazione durante il design | Sì — pronto-per-dev, commenti | No |
| IR spaziale / layout | No — CSS piatto per layer selezionato | Sì — stack/overlay/absolute/leaf con identità componente |
| Sorgente token | Da variabili Figma quando impostate | Variabili Figma → inferiti per frequenza → nessuno |
| Chiavi stringa i18n | No | Sì — stringRef.key nell'IR + strings.json |
| Richiede installazione plugin | No (integrato in Figma) | No (scheda browser, REST API) |
Quando usare ciascuno
Usa Dev Mode quando: hai bisogno di verificare un valore specifico, sei nel mezzo di una design review e vuoi cercare un token, il tuo team è già su un piano Figma a pagamento e vive dentro Figma, o vuoi il flusso di annotazione del designer e i marcatori di stato pronto-per-dev.
Usa figmascope quando: stai passando contesto a un agente AI per uno sprint di build, vuoi versionare la specifica del design insieme al codice, sei su un piano Figma gratuito, hai bisogno dell'IR completo del layout (non solo CSS per layer), o vuoi output deterministico e riproducibile che puoi pinnare a una release o confrontare con diff in una PR.
Non si escludono a vicenda. Usa Dev Mode per ispezionare durante la build, esporta bundle figmascope per ancorare la specifica del design nel tuo repo. I due non competono — coprono parti diverse del flusso di lavoro.