Vai al contenuto

Trasforma i design di Figma in codice in Cursor

Ricostruire un design a occhio fa scostare spaziature, colori e stati rispetto all'originale.

3 passaggiIntermedia
CursorClaude CodeFigmaGitHub

Come si collega

La tua IA raggiunge le tue app tramite piccoli connettori chiamati server MCP.
La tua IA
CursorClaude Code
Connettori
FigmaGitHub
Le tue app
FigmaGitHub

Questo setup è per sviluppatori frontend e design engineer che trasformano frame di Figma in componenti. Il server MCP di Figma dà a Cursor o Claude Code la struttura del frame, le sue variabili e gli screenshot, mentre GitHub permette all'agente di lavorare nel tuo repository e aprire una pull request. Ottieni componenti che usano i tuoi token di design invece di valori scritti a mano e copiati a occhio.

Configuralo

3 passaggi. Aprine uno per i dettagli.
  1. 1Attiva il server MCP di Figma

    Nell'app desktop di Figma apri un file Design, passa in Dev Mode e attiva il server MCP desktop dal pannello di ispezione o dal menu di Figma in Preferenze. Gira in locale su http://127.0.0.1:3845/mcp; aggiungi questo URL nelle impostazioni MCP di Cursor oppure con claude mcp add. Figma offre anche un server remoto su mcp.figma.com se preferisci non usare l'app desktop.

    Consiglio: Il server MCP richiede una postazione Dev o Full su un piano Figma a pagamento; controlla la documentazione di Figma per le regole attuali.

  2. 2Collega GitHub

    Aggiungi il server MCP di GitHub con un token fine-grained che possa creare branch e pull request nel tuo repository frontend. Chiedi all'agente di elencare la cartella dei componenti così sa cosa esiste già. In questo modo non ricostruisce un pulsante che hai già.

    Consiglio: Nello stesso prompt indica all'agente il tuo file dei token, come tailwind.config o un file di variabili CSS.

  3. 3Costruisci partendo da un frame

    Seleziona un frame in Figma, o copia il suo link, e chiedi all'agente di costruirlo come componente usando i tuoi token e i componenti esistenti. L'agente recupera il contesto di codice del frame, le sue variabili e uno screenshot, poi scrive il componente. Confronta il risultato con il frame nel browser, alla stessa larghezza.

    Consiglio: I frame piccoli danno risultati migliori: costruisci una card o una sezione di un form, non un'intera pagina in un colpo solo.

Poi chiedi e basta

Cosa dire una volta collegato. Clicca per copiare.
Chiedi a Cursor…Cursor

Da sapere

Cosa ti serve, cosa non fa e come restare al sicuro.
Cosa ti serve
  • Un piano Figma a pagamento con una postazione Dev o Full
  • L'app desktop di Figma per il server locale, oppure il server remoto
  • Cursor o Claude Code
  • Un token GitHub con accesso a branch e pull request del tuo repository
Limiti
  • L'agente lavora su un frame alla volta e può perdere interazioni, animazioni e comportamento responsive che il frame non mostra.
  • File di Figma strutturati male, senza auto layout né variabili, producono valori scritti a mano.
  • L'accessibilità va comunque verificata a mano, come le etichette e gli stati di focus.
Resta al sicuro
  • L'accesso a Figma è in sola lettura.
  • Usa un token GitHub limitato a un solo repository e rivedi la pull request.
Figma MCP Server (design-read) GitHub MCP Server (repository-read, issue-write, pull-request-write)

Domande frequenti

Risposte chiare prima di iniziare
Quale piano di Figma mi serve?
Il server MCP di Figma richiede una postazione Dev o Full su un piano a pagamento. Controlla il centro assistenza di Figma per i dettagli aggiornati su postazioni e piani.
Funziona con Claude Code come con Cursor?
Sì. Entrambi gli host supportano i server MCP di Figma, sia desktop sia remoto. I passaggi sono identici, tranne il punto in cui aggiungi l'URL del server.
Userà i miei componenti esistenti?
Sì, se gli dici dove si trovano e glielo chiedi. Code Connect di Figma può associare i componenti di Figma ai componenti nel codice, rendendo il risultato più coerente.
I miei design escono dal mio computer?
I dati del frame e gli screenshot entrano nella conversazione e arrivano al fornitore del modello. Controlla la policy della tua azienda prima di usare design dei clienti.

Strumenti di questa configurazione

I prodotti coinvolti