Da codice a Figma con Claude Code: acquisisci, rivedi, implementa

Da codice a Figma: quali schermate si possono acquisire?

Claude Code to Figma acquisisce l'interfaccia in esecuzione nel browser, che si trovi in produzione, in staging o su localhost, il server di sviluppo sul proprio computer. In una sola sessione si possono acquisire più schermate e portarle nell'area di lavoro di Figma per confrontarle. Ogni schermata diventa un frame modificabile da spostare, duplicare, rifinire e annotare. L'annuncio di Figma descrive gli ambienti supportati e l'acquisizione di flussi con più schermate.

È come disporre l'app funzionante su un tavolo di lavoro. Nel browser si vive l'esperienza un passaggio alla volta; in Figma si possono esaminare tutti i passaggi insieme.

MCP, acronimo di Model Context Protocol, è il collegamento che consente a Claude Code di usare gli strumenti di Figma. Lo strumento di acquisizione si chiama generate_figma_design. Può inviare i livelli a un nuovo file Figma Design, a un file Design esistente oppure agli appunti. I nuovi file generati dall'acquisizione finiscono nelle bozze del team o dell'organizzazione; il contenuto copiato negli appunti si può incollare nell'area di lavoro. La documentazione degli strumenti di Figma spiega queste destinazioni.

Collegare Claude Code a Figma: basta una configurazione

Per questo flusso serve il server remoto. Si collega a https://mcp.figma.com/mcp e funziona anche senza l'app desktop di Figma. La documentazione propone due modalità: il plugin, consigliato da Figma, e la configurazione manuale. Ne basta una. Configurazione del server remoto.

Metodo consigliato: installare il plugin Figma per Claude Code

Se Claude Code è già installato, esegui questo comando nel terminale:

claude plugin install figma@claude-plugins-official

Poi segui la procedura di autorizzazione documentata da Figma:

1. Riavvia Claude Code se era in esecuzione.
2. Digita /plugin, apri Installed, seleziona figma e avvia l'autorizzazione.
3. Prosegui nel browser e seleziona Allow access per il tuo account Figma.
4. Torna a /plugin e verifica che Figma risulti connesso nella sezione Installed.

Il plugin include la configurazione MCP e le skill, cioè istruzioni riutilizzabili per i flussi di lavoro più comuni in Figma. Se l'organizzazione blocca l'installazione, Figma indica di rivolgersi agli amministratori di Claude. Guida di Figma alla configurazione di Claude Code.

Configurazione manuale: rendere il collegamento disponibile in tutti i progetti

Per una configurazione manuale riutilizzabile tra progetti, Figma documenta esattamente questo comando:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Avvia una nuova sessione di Claude Code, digita /mcp, seleziona figma, quindi Authenticate e infine Allow Access. Verifica il collegamento con /mcp.

L'opzione --scope user rende il collegamento disponibile in tutti i tuoi progetti. Figma documenta anche claude mcp add --transport http figma https://mcp.figma.com/mcp, che per impostazione predefinita si applica al progetto corrente. Configurazione manuale e ambito di applicazione.

Quale piano o licenza Figma serve?

Il collegamento al server, la creazione dei frame e la lettura dei design per il ritorno al codice hanno requisiti distinti. Queste sono le regole pubblicate da Figma, verificate il 12 ottobre 2026:

Fonti: disponibilità di MCP, permessi per l'acquisizione e limiti di lettura.

Gli utenti Starter e quelli con licenze View o Collab hanno a disposizione fino a 20 chiamate agli strumenti di lettura al mese. Ogni chiamata è una singola richiesta: la quota non equivale quindi a 20 cicli completi di andata e ritorno. Lo strumento di acquisizione generate_figma_design è escluso dai normali limiti di frequenza MCP. Quota di lettura ed esenzione per l'acquisizione.

Per valutare il prodotto nel suo insieme e decidere se acquistarlo, consulta la nostra recensione di Figma.

Esempio pratico: dal codice a Figma e ritorno con tre schermate di onboarding

Immagina di avere già un'app funzionante con tre schermate di onboarding: Benvenuto, Invita il team e Primo progetto. Questo esempio mostra come acquisire il flusso, rivederne il design e implementare le modifiche.

Acquisire il flusso in un unico file

Apri il progetto in Claude Code e indica l'URL dell'app e la destinazione. Per esempio:

Se preferisci un nuovo file, chiedi a Claude di crearne uno. Se l'app non è in esecuzione, chiedigli di avviare il server locale. Nel flusso di acquisizione, il client prepara lo script necessario e apre il browser. All'apertura della finestra avviene una prima acquisizione. Istruzioni di Figma per l'acquisizione.

Verifica che la schermata Benvenuto sia presente, poi prosegui nell'app. Nelle schermate Invita il team e Primo progetto, usa Entire screen nella barra degli strumenti di acquisizione. Per acquisire una porzione più piccola puoi usare Select element. Concludi con Open file. Barra degli strumenti e passaggi finali.

Il mio consiglio: mantieni le stesse dimensioni del viewport durante questo primo passaggio e annota lo stato acquisito. La schermata con un errore di validazione e la stessa schermata con dati validi meritano nomi diversi.

Rivedere il percorso in Figma

Conserva una fila con le acquisizioni originali e duplicala per le modifiche proposte. Assegna nomi chiari ai frame, poi prendi una decisione concreta per ciascuna schermata:

Queste modifiche sono ipotesi progettuali. Disegnare un'opzione per saltare un passaggio, in particolare, non implementa la logica dei permessi o della navigazione che la rende possibile. Annota la decisione accanto al frame approvato e inseriscila nel brief di implementazione.

Controlla i livelli acquisiti prima di considerarli risorse del design system. Figma precisa che le acquisizioni producono livelli semplici, senza associazione automatica ai componenti o agli stili della libreria. Può però collegare variabili compatibili, cioè valori riutilizzabili come colori e spaziature, presenti nel file o in una libreria aggiunta. Per aggiungere librerie pubblicate serve un piano a pagamento. Comportamento dell'acquisizione e delle variabili.

Riportare i frame approvati in Claude Code

Per ciascun frame approvato, fai clic con il tasto destro e seleziona Copy link to selection. Incolla i link in Claude Code insieme alla richiesta di implementazione. È la procedura documentata da Figma per il server remoto. Come usare i link ai frame.

Per questo esempio, un brief utile potrebbe essere:

Lo strumento get_design_context di Figma fornisce all'agente le informazioni sul design. Nel prompt puoi specificare il framework e la directory dei componenti esistenti. Con il server remoto devi fornire i link ai frame o ai livelli: selezionare un elemento nell'area di lavoro non basta a trasmetterne il contesto. Strumenti per passare dal design al codice.

Infine, esegui l'app aggiornata e ripercorri lo stesso flusso. Confronta layout e testi, poi controlla il salto degli inviti, la validazione e la navigazione da tastiera. Acquisisci le schermate aggiornate se serve un'altra revisione del design. Questa verifica resta responsabilità del team: Figma fornisce il contesto, mentre l'agente di programmazione realizza l'implementazione. I ruoli di MCP e dell'agente.

Cinque situazioni in cui questo flusso può essere utile

Parti dai casi in cui più persone devono decidere come intervenire su un'interfaccia già esistente. Questi possibili utilizzi sono ordinati in base a quanto direttamente potrebbero ridurre il lavoro da rifare.

Per i team che vogliono formalizzare istruzioni di design riutilizzabili, il nostro pacchetto di skill personalizzate per un design system in Figma Make approfondisce quel distinto flusso di lavoro in Figma Make.

Valutare la convenienza: misurare il lavoro di ricostruzione

Le voci da esaminare sono la preparazione del design e il lavoro di implementazione da rifare. Se oggi il team ricrea le schermate già sviluppate prima di rivederle, confronta quell'impegno con il tempo necessario per acquisirle e sistemarle:

Valore netto per revisione = (ore di preparazione e rilavorazione con il metodo precedente − ore di acquisizione, sistemazione e rilavorazione con il nuovo metodo) × costo orario interno − costi aggiuntivi degli strumenti.

Usa i tempi rilevati dal tuo team. Includi anche le eventuali verifiche aggiuntive dell'implementazione richieste da questo flusso. Se il team usa già Claude Code e dispone delle licenze Figma necessarie, gli abbonamenti esistenti rientrano in entrambi i termini del confronto: solo le spese aggiuntive cambiano il risultato. Figma distingue l'accesso previsto dalla licenza dai permessi sui file; il costo dell'abbonamento Professional dipende dal numero di licenze e dalla periodicità di fatturazione. Come funziona la fatturazione di Figma.

Il mio criterio: mantieni il flusso se permette al team di arrivare a una modifica approvata con meno lavoro complessivo tra design e sviluppo. Un'importazione più rapida che lascia molto da sistemare è un risultato poco convincente.

Due idee di prodotto con un obiettivo preciso

L'opportunità utile è costruire un'offerta intorno al processo di revisione che sfrutti il collegamento nativo. Quelle che seguono sono ipotesi di prodotto. Le stime di DataForSEO per le ricerche in inglese negli Stati Uniti, verificate il 12 ottobre 2026, misurano ricerche mensili, non clienti paganti.

L'idea più promettente: un kit per la revisione dell'onboarding

Un team di prodotto o una piccola agenzia potrebbe pagare per un metodo ripetibile che trasformi l'onboarding funzionante in una revisione organizzata e in un brief di implementazione. I segnali di domanda affini sono 590 ricerche mensili per “claude code to figma” e 260 per “website to figma”. I due pubblici potrebbero sovrapporsi.

La versione minima potrebbe comprendere una checklist di acquisizione specifica per il progetto, un modello per la revisione in Figma, una convenzione per i nomi dei frame e prompt riutilizzabili che associno ai link approvati le decisioni sul comportamento. Parti da un servizio guidato, così puoi osservare dove i team hanno bisogno di aiuto.

È l'opportunità più promettente perché ciò che consegni include decisioni sul flusso del cliente. Il limite: Figma offre già l'acquisizione, quindi una semplice interfaccia di importazione aggiunge poco valore. La disponibilità a pagare per il kit di revisione resta da verificare.

Uno strumento per controllare il brief di implementazione

Un team che passa regolarmente modifiche da Figma a Claude Code potrebbe trovare utile un piccolo strumento capace di segnalare link ai frame mancanti, destinazioni poco chiare e indicazioni assenti sui componenti prima dell'implementazione. “Figma to code” registra circa 720 ricerche mensili: è un segnale ampio dell'esigenza di fondo, non una prova della domanda per questo strumento.

La versione minima potrebbe esaminare un brief strutturato con link approvati, percorsi dei componenti e criteri di accettazione, per poi produrre un elenco di domande irrisolte. Il limite è semantico: lo strumento può segnalare che manca la descrizione della regola per saltare un passaggio, ma non può decidere se i tuoi utenti debbano poterlo saltare. La decisione spetta comunque a un responsabile di prodotto.

Cosa non risolve il passaggio dal codice al design e ritorno

Consideralo un ciclo esplicito di acquisizione, modifica e implementazione. Figma descrive MCP come una fonte di contesto strutturato sul design e una base di partenza per il codice; all'agente servono comunque le convenzioni del progetto e istruzioni chiare. Il collegamento non garantisce codice finito e non corregge automaticamente i problemi di implementazione. Come Figma definisce questo limite.

Anche la qualità dell'acquisizione può variare. Figma indica come possibili criticità le animazioni JavaScript complesse, il rendering su canvas e le liste virtualizzate, che visualizzano solo una parte di una lunga lista alla volta. Se l'intera pagina non viene acquisita correttamente, prova con un singolo elemento. Anche i nomi delle variabili CSS resi irriconoscibili possono impedire l'associazione delle variabili; acquisire dal server di sviluppo può preservarne i nomi leggibili. Limiti noti dell'acquisizione.

Eviterei questo ciclo per una semplice correzione di testo che non richiede decisioni di design. Lo userei quando confrontare l'intero flusso può cambiare ciò che il team realizzerà. Se è la stessa area di lavoro condivisa di Figma a non essere adatta, il nostro confronto tra le alternative a Figma affronta questa scelta più ampia.

Da fare lunedì: scegli un flusso di onboarding di tre schermate, acquisiscilo, concorda un miglioramento e riportalo nell'app. Completa questo ciclo prima di estendere il processo al resto del prodotto.

Se vuoi adattare questo flusso di revisione al prodotto del tuo team, possiamo aiutarti ad automatizzarlo.