# Trasforma i design di Figma in codice in Cursor

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

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.

## Passaggi

1. **Attiva 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. **Collega 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. **Costruisci 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.

## Prompt da provare

- Costruisci il frame di Figma selezionato come componente React in src/components/PricingCard.tsx con i nostri token Tailwind.
- Recupera le variabili usate in questo frame e associale alle nostre variabili CSS in tokens.css.
- Ricostruisci questa sezione del form con i nostri componenti Input e Button esistenti invece di crearne di nuovi.
- Confronta il componente che hai scritto con lo screenshot di Figma e correggi le differenze di spaziatura.
- Crea un branch, fai il commit del nuovo componente e apri una pull request con un link allo screenshot di Figma.

## 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.

## Note di sicurezza

- L'accesso a Figma è in sola lettura.
- Usa un token GitHub limitato a un solo repository e rivedi la pull request.

## Server MCP

- [Figma MCP Server](https://help.figma.com/hc/en-us/articles/32132100833559): design-read
- [GitHub MCP Server](https://github.com/github/github-mcp-server): repository-read, issue-write, pull-request-write

## Domande frequenti

**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

- **[Figma](https://suiteintent.com/t/figma?m=IT)**: Design di interfacce collaborativo nel browser. · Ideale per: Designer e sviluppatori sullo stesso file · Piano gratuito · Gratis per studenti
- **[GitHub](https://suiteintent.com/t/github?m=IT)**: Hosting di codice, issue e pull request. · Ideale per: Team che revisionano il codice con pull request · Piano gratuito · 10000