Figma MCP, dal design al codice: 6 passi e i limiti che restano

Alla fine di questa guida avrai un setup di Figma MCP in cui un agente di sviluppo come Claude Code, Cursor o Codex legge un frame di Figma e scrive codice con i componenti e i token del progetto. Avrai anche un elenco breve dei lavori che restano a una persona.

Il server MCP di Figma è il server Model Context Protocol con cui Figma passa agli agenti di sviluppo il contesto strutturato di un file: livelli, auto layout, variabili, componenti, screenshot e, quando lo configuri, il codice a cui corrisponde ogni componente. La documentazione di Figma è netta sul perimetro: «The MCP server is not a one-click design to perfect code tool», cioè il server non trasforma un design in codice perfetto con un clic. Manda il contesto e una prima bozza di codice. Il codice finale lo scrive l'agente, e vale quanto il file, le mappature e le regole che gli dai.

Lo scarto si misura. Nel report AI 2025 di Figma, un sondaggio su 2.500 persone che costruiscono prodotti in sette paesi, il 78% dice che l'AI rende il lavoro molto più efficiente, ma solo il 32% dice di potersi fidare di quello che produce. I sei passi che seguono chiudono quello scarto nel passaggio dal design al codice. Se MCP è una novità, conviene partire da cos'è MCP e perché un SaaS ha bisogno di un server.

Cosa serve prima di cominciare

• Un posto Figma che possa chiamare il server. I posti View e Collab arrivano a 20 chiamate al mese su qualsiasi piano. I posti Dev e Full arrivano a 200 al giorno su Professional e Organization, e a 600 al giorno su Enterprise.
• Un client MCP supportato da Figma. Si collegano solo i client presenti nel catalogo MCP di Figma, tra cui VS Code, Cursor e Claude Code.
• Una codebase con una libreria di componenti e i token. Il passaggio porta un design su codice che esiste già. Se non c'è niente su cui portarlo, l'agente se lo inventa.
• Per Code Connect, un piano Organization o Enterprise e un posto Full o Dev, come indica il centro assistenza di Figma.

Passo 1: scegliere il server e controllare il posto

Figma offre due server. Quello remoto, su https://mcp.figma.com/mcp, è quello che Figma consiglia e l'unico con tutti gli strumenti, compresa la scrittura sul canvas. Lavora con i link: incolli l'URL di un frame o di un livello e l'agente scarica quel nodo. Il server desktop gira dentro l'app desktop di Figma e legge anche la selezione corrente, comodo quando designer e developer lavorano fianco a fianco.

Poi si fanno i conti. La pagina sui limiti di Figma fissa questi tetti, con limiti al minuto oltre a quelli giornalieri:

• Posto View o Collab, qualsiasi piano: fino a 20 chiamate al mese.
• Posto Dev o Full su Professional: fino a 200 al giorno, 10 al minuto.
• Posto Dev o Full su Organization: fino a 200 al giorno, 15 al minuto.
• Posto Dev o Full su Enterprise: fino a 600 al giorno, 20 al minuto.

Una schermata raramente costa una chiamata sola. Un passaggio normale legge la struttura, il contesto di due o tre sezioni, uno screenshot e gli asset. Quindi 20 chiamate al mese bastano per una prova, mentre 200 al giorno coprono un developer che lavora schermata dopo schermata. Per scrivere nei file di Figma serve un posto Full; con un posto Dev si legge e basta.

Passo 2: strutturare il file perché il contesto valga qualcosa

L'agente legge quello che il file contiene: la gerarchia dei componenti, l'auto layout, le variabili e i nomi dei livelli. Un frame chiamato "Frame 1184", con riempimenti in esadecimale e posizioni assolute, diventa codice con valori esadecimali e posizioni assolute. Un frame chiamato "Prezzi / annuale", fatto con i componenti della libreria e con colori e spaziature legati alle variabili, diventa codice che può riusare gli uni e le altre.

• Lega colori, spaziature, raggi e tipografia alle variabili. Ogni valore grezzo rimasto nel file è un valore grezzo che l'agente può copiare nel codice.
• Costruisci con i componenti della libreria e le loro varianti, senza staccare le istanze. Un'istanza staccata arriva all'agente come un gruppo di forme.
• Usa l'auto layout, così spazi e padding arrivano come numeri con una direzione, che diventano flex o grid.
• Dai ai livelli il nome di quello che sono. I nomi finiscono nel contesto e spesso nel codice.

Qui i nomi dei token contano più che altrove. Se la variabile in Figma si chiama color/action/primary e nel file dei token color.action.primary, l'agente le collega da solo. Uno schema che regge il viaggio l'abbiamo descritto in convenzioni di naming dei design token.

Passo 3: collegare i componenti con Code Connect

Code Connect collega un componente di Figma al componente corrispondente nel repository. Quando un componente collegato compare nel frame, il server MCP lo racchiude in un CodeConnectSnippet con i valori correnti delle proprietà, l'istruzione di import, un esempio d'uso e le istruzioni che hai scritto per quel componente, come spiega la documentazione di Figma su Code Connect. A quel punto l'agente scrive <Button variant="primary"> dalla libreria, invece di ricostruire un pulsante da un rettangolo e un livello di testo.

Ci sono due modi per configurarlo. La CLI di Code Connect vive nel repository e manda esempi più ricchi, con la mappatura delle prop e i percorsi dei file. Code Connect UI si configura dentro Figma, genera l'import e un esempio di base, e ti fa aggiungere istruzioni per il server MCP: regole di accessibilità, le prop che un componente non deve mai ricevere, il contenitore in cui va sempre. Se la stessa libreria è collegata sia a React sia a SwiftUI, sul server remoto indichi all'agente quale etichetta usare con il parametro clientFrameworks.

Conviene partire dai dieci o quindici componenti che compaiono in quasi ogni schermata: pulsanti, campi, card, dialog, navigazione. Su un piano Professional, dove Code Connect non c'è, una parte del lavoro la fa il file di regole del passo 4, indicando la cartella in cui stanno i componenti.

Passo 4: scrivere il file di regole prima del primo prompt

Il server non conosce le convenzioni del progetto finché non gliele dai. Un file di regole (CLAUDE.md per Claude Code, le rules di Cursor, le istruzioni personalizzate di Copilot) le raccoglie una volta sola, così nessun prompt deve ripeterle. La guida di Figma sulle regole propone un flusso obbligato, che teniamo quasi com'è:

## Regole per Figma MCP1. Esegui prima get_design_context sul nodo esatto.2. Se la risposta è troncata, esegui get_metadata e scarica solo i nodi che servono.3. Esegui get_screenshot come riferimento visivo.4. Scarica gli asset solo dopo i passi 1-3.5. Leggi l'output React + Tailwind come descrizione del design. Riscrivilo nel nostro stack.6. Usa i componenti di src/components/ui. Mai valori esadecimali, px o corpi del testo scritti a mano.7. Confronta il risultato con lo screenshot prima di chiudere.

La riga 5 è quella che pesa di più. L'output predefinito è React con le classi Tailwind, e un agente lasciato a sé lo incolla così com'è. La regola trasforma quell'output in una descrizione da tradurre nei componenti e nei token del progetto. Su come si scrivono regole che tengono, c'è come scrivere un file CLAUDE.md che guida davvero Claude Code.

Passo 5: una sezione alla volta

get_design_context su una pagina intera restituisce una risposta enorme, e una risposta enorme schiaccia tutto il resto del contesto dell'agente. get_metadata serve proprio a questo: restituisce uno schema XML essenziale con ID, nomi, tipi, posizioni e dimensioni dei livelli, nient'altro. L'agente legge lo schema, poi chiama get_design_context sull'hero, poi sulla tabella prezzi, poi sul footer, un nodo per volta.

Anche il prompt orienta l'output. "Genera questa selezione in Vue", "in HTML e CSS", "in SwiftUI" o "con i componenti di src/ui" cambiano ognuno quello che torna indietro, come si legge nel riferimento degli strumenti di Figma. Quando servono i token e non il codice, chiedi get_variable_defs per nome: restituisce le variabili e gli stili usati nella selezione.

Passo 6: confrontare il risultato con il design e con il sistema

• Visivo. Metti la schermata in esecuzione accanto all'immagine di get_screenshot, alla stessa larghezza.
• Sistema. Cerca nel diff valori esadecimali, misure in pixel e componenti nuovi che ne duplicano di esistenti. Ognuno è una deriva, e il component drift si accumula senza far rumore.
• Stati. Elenca gli stati che il frame non mostra (caricamento, vuoto, errore, testo lungo, disabilitato) e costruiscili uno per uno.
• Accessibilità. Fai un controllo automatico e una prova da tastiera. Un frame non dice nulla sull'ordine del focus o sulle etichette.

Cosa il server MCP di Figma non fa ancora

Figma elenca tre cose che il server non fa: generare il codice finale, capire da solo il design system, correggere o adattare il codice quando qualcosa non va. In pratica restano quattro vuoti che il team deve coprire.

• Il comportamento che nessuno ha disegnato. Un frame è uno stato a una larghezza. Il caricamento dei dati, la validazione, i permessi e ogni breakpoint tra quelli disegnati li portano il developer e le specifiche.
• Il giudizio sui conflitti. Quando il frame dice 18 px e la scala delle spaziature dice 16 o 20, qualcuno decide se sbaglia il design o il sistema. La regola che Figma suggerisce dà la precedenza al token del design system e corregge la misura il meno possibile.
• Scrivere sul canvas su larga scala. Lo strumento use_figma fa creare agli agenti frame, componenti, variabili e auto layout direttamente nel file, eseguendo JavaScript tramite la Plugin API. È in beta dal 24 marzo 2026, gratuito durante la beta, e diventerà una funzione a pagamento in base all'uso. I limiti attuali: 20 KB di risposta per chiamata, niente immagini, niente font personalizzati, e componenti da pubblicare a mano prima che Code Connect completi il collegamento.
• Qualsiasi client. Si collegano solo i client del catalogo MCP di Figma. Gli altri si mettono in lista d'attesa.

Errori frequenti e come correggerli

• Il server restituisce sempre React. Indica il framework nel prompt e nel file di regole.
• Hai chiesto le variabili e hai ricevuto codice. Chiama get_variable_defs in modo esplicito.
• Si blocca o tronca la risposta. La selezione è troppo pesante. Parti da get_metadata e scarica i nodi figli.
• Limite raggiunto a metà sprint. Esegui whoami: restituisce l'email autenticata, i piani dell'account e il tipo di posto in ciascuno.
• Errori di permesso. L'account legge solo i file che può già aprire, e il file deve appartenere a un piano di cui l'utente fa parte.

Quello che rende buono questo passaggio è quello che rendeva buono il vecchio: una libreria di componenti che le persone usano, token con nomi chiari, file costruiti con gli uni e gli altri. Il server MCP fa rendere quel lavoro due volte, una per il developer che legge il file e una per l'agente.