La consegna del design è stata un problema risolto per gli sviluppatori umani dal 2016 circa. Zeplin, InVision Inspect, Avocode, il Dev Mode nativo di Figma — tutti fanno la stessa cosa: offrono allo sviluppatore un'interfaccia web dove può cliccare su un nodo e leggerne le proprietà.

Questo flusso di lavoro si rompe completamente quando lo "sviluppatore" è un agente AI.

Questo articolo spiega perché, cosa hanno effettivamente bisogno gli agenti e come strutturare un flusso di consegna che produca codice corretto anziché codice approssimativo. La soluzione è figmascope — uno strumento basato su browser che esporta un bundle di contesto strutturato direttamente dal tuo file Figma. Per i flussi step-by-step, vedi Figma to Claude Code o Figma to Cursor.

Il presupposto della consegna design

Ogni strumento di handoff costruito prima del 2023 fa la stessa assunzione implicita: c'è un umano dall'altra parte, che clicca in giro, legge valori, prende decisioni. Il compito dello strumento è esporre le informazioni in modo abbastanza chiaro da permettere a uno sviluppatore esperto di lavorare senza dover continuamente passare dal contesto del designer a quello dello sviluppatore.

Questa assunzione è incorporata nell'intera UX di questi strumenti:

Nessuna di queste cose è sbagliata. È corretta per il flusso di lavoro dello sviluppatore umano. È semplicemente l'interfaccia sbagliata per un agente.

Cosa hanno effettivamente bisogno gli agenti da un design

Un agente AI che riceve un compito di design ha bisogno di:

  1. Una specifica che legge prima di fare qualsiasi cosa — vincoli, ambito, convenzioni di denominazione dei token, note di versione. Non implicita passando il mouse su un pannello; scritta esplicitamente.
  2. Un dizionario di token tipizzato — non valori hex grezzi e numeri in pixel, ma token denominati e tipizzati con i loro valori. L'agente deve sapere che #d96a3a è color.accent per poter generare nomi di classi Tailwind corretti o proprietà CSS personalizzate.
  3. Un albero del layout a schermo intero — la gerarchia di ogni nodo, le sue relazioni di layout, le sue dimensioni, i suoi riferimenti ai token. Non un nodo alla volta su richiesta; l'intero albero in memoria.
  4. Stringhe consolidate — tutto il contenuto testuale, normalizzato, con chiavi di risorse. Non disperso tra nodi individuali.
  5. Verità visiva di riferimento — un render di riferimento che l'agente può confrontare con il suo output. Uno screenshot del design a 2×.
  6. Nomi dei componenti — identificatori canonici che il codice generato dovrebbe usare, non nomi inventati.

Gli strumenti di handoff tradizionali non forniscono nessuno di questi in una forma utilizzabile da un agente. L'app figmascope li produce tutti in un unico zip — incolla il tuo URL Figma, ottieni il bundle. Nessun upload, nessun backend. Il formato dei token è trattato in profondità in Esportazione Token Design per Agenti AI.

Perché gli screenshot falliscono

La soluzione rapida che le persone provano: esportare un PNG da Figma e passarlo all'agente con un prompt come "implementa questa schermata." L'agente produce codice. A volte sembra vicino. Ma:

Ognuno di questi errori è individualmente piccolo. Insieme si sommano a un componente che richiede una correzione manuale significativa — il che vanifica gran parte del risparmio di tempo dall'uso di un agente.

Vedi perché gli screenshot falliscono per la generazione di codice AI per un'analisi dettagliata con esempi.

Uno screenshot dice all'agente come appare il design. Il contesto strutturato gli dice cosa è il design.

Gli strumenti di handoff tradizionali, valutati

Zeplin

L'interfaccia principale di Zeplin è una web app dove gli sviluppatori ispezionano i design nodo per nodo. Ha una funzione "Styleguide" che aggrega colori e tipografia dal file — la cosa più simile a un'esportazione di token. Non esporta alberi di layout leggibili dalla macchina. La funzione "Connected Components" collega i componenti Storybook ai frame Figma, utile per la documentazione ma non aiuta un agente a generare nuovo codice.

Figma Dev Mode

La risposta nativa di Figma all'handoff. Il pannello codice genera CSS dai nodi selezionati e mostra i nomi delle Variabili quando sono configurate. Ben progettato per gli sviluppatori umani. Non supporta l'esportazione a livello di file, non genera alberi di layout, e i suoi frammenti di codice sono solo CSS (non token agnostici rispetto al framework). Richiede un posto Dev Mode.

Avocode

Avocode è stato acquisito da Abstract e poi discontinuato nel 2022. Menzionato perché appare ancora nei risultati di ricerca per "strumenti di design handoff" e genera del traffico di confronto. Non è più disponibile.

Locofy, Builder.io, Anima

Questi strumenti tentano di generare codice framework effettivo (React, Next.js, HTML) direttamente dai design Figma. Sono più vicini allo spazio del problema — capiscono che l'output deve essere codice, non solo un pannello di proprietà. Ma generano codice da distribuire, non contesto da fornire a un agente. La distinzione è importante: non puoi chiedere "Implementa la schermata Impostazioni, riutilizzando il componente UserAvatar che ho già costruito" quando lo strumento sta generando il codice stesso. Puoi chiederlo a Claude Code o Cursor quando hai fornito loro il contesto strutturato.

Vedi figmascope vs Locofy e figmascope vs Builder.io per confronti dettagliati.

Come appare un handoff pronto per agenti

L'handoff pronto per agenti ha tre proprietà che lo distinguono dall'handoff tradizionale:

1. È un artefatto file, non una UI

L'artefatto di handoff è un file versionato (o insieme di file) che vive nel repository insieme al codice. Non un link condiviso che richiede un login. Non un pannello in una web app. Una directory design/ con file JSON, PNG e Markdown.

Questo ha diverse conseguenze:

2. Utilizza dati tipizzati, non testo renderizzato

I design token in tokens.json sono tipizzati — $type: "color", $type: "dimension" — non solo stringhe in una tabella Markdown. L'IR del layout in screens/*.json ha tipi di nodi espliciti (stack, overlay, absolute, leaf) e riferimenti ai token usando la notazione $ref. Le stringhe in strings.json hanno chiavi con notazione a punto, non solo etichette leggibili dall'uomo.

I dati tipizzati permettono all'agente di ragionare programmaticamente: "tutti i nodi con background.$ref == color.surface usano lo stesso colore di sfondo," non "tutti i nodi che sembrano essere sullo stesso sfondo."

3. Include un documento di specifica che l'agente legge prima

CONTEXT.md è il contratto tra il designer e l'agente. Descrive:

L'handoff tradizionale non ha equivalenti. Dev Mode ha un campo "note sviluppatore" per frame, ma viene scritto ad hoc da un designer senza struttura. CONTEXT.md viene generato in modo coerente dal contenuto effettivo del file.

Il flusso di handoff passo dopo passo

  1. Il designer contrassegna i frame come pronti — in Figma, il designer segnala i frame pronti per l'implementazione (convenzione di denominazione, etichetta "pronto", qualunque cosa usi il tuo team).
  2. Lo sviluppatore esegue figmascope — incolla l'URL del file e il PAT su figmascope.dev, clicca esporta, scarica lo zip.
  3. Decomprimi in design/ — unzip figmascope-<fileKey>.zip -d design/
  4. Commit di design/ nel repo — il bundle è l'artefatto di handoff. La PR include sia il bundle di design che l'implementazione.
  5. L'agente implementa — punta Claude Code o Cursor su design/CONTEXT.md e il JSON della schermata rilevante. L'agente genera codice che usa i valori dei token, i nomi dei componenti e le stringhe dal bundle.
  6. Revisione e iterazione — lo sviluppatore rivede rispetto a screens/*.png, nota eventuali lacune, affina i prompt.

Quando il design cambia, ricomincia dal passo 2. Il timestamp _meta.json ti dice quando il bundle è stato generato l'ultima volta rispetto a quando il file Figma è stato modificato l'ultima volta — un semplice controllo di freschezza.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

Cosa non cambia

L'handoff pronto per agenti non sostituisce la revisione del design. L'agente implementa dal contesto strutturato; un umano verifica ancora l'output. Stati di interazione, animazioni, comportamento responsive, accessibilità — questi richiedono giudizi che l'agente può approssimare ma non garantire dai soli dati di design statico.

Il contesto strutturato non sostituisce nemmeno la conversazione tra designer e sviluppatore. Se un token è denominato in modo ambiguo, o un componente si comporta diversamente tra breakpoint rispetto a quanto suggerisce il frame statico, è necessaria una conversazione. CONTEXT.md cattura ciò che è nel file; non deduce cosa intendeva il designer per i casi che il file non affronta.

Cosa cambia: l'implementazione di layout di schermate statiche da un design stabile passa da un processo manuale di ore a un flusso di lavoro di prompt e revisione. L'agente gestisce la traduzione meccanica; lo sviluppatore gestisce le decisioni di giudizio.

Checklist: il tuo handoff design è pronto per agenti?

Se la maggior parte di questi elementi manca, l'agente produrrà codice che richiede più correzioni che partire da zero con un buon contesto. Il bundle generato da figmascope li soddisfa tutti in un unico export. Visita il blog di figmascope per casi di studio e approfondimenti su ogni elemento della checklist, oppure vedi Alternativa a Figma Inspector per un confronto diretto con Dev Mode e plugin.