AI to Figma: inviare la UI di Claude e Cursor a Figma via MCP

Gli assistenti di coding con AI oggi possono produrre in pochi minuti una landing page, una schermata di impostazioni o una dashboard convincente. Il problema è dove finisce quella UI: in un editor di codice o in un'anteprima locale, lontano dal file Figma in cui il tuo team rivede, annota e rifinisce il design.

Questa guida mostra come colmare la distanza con una connessione AI to Figma. HTML to Frames espone una connessione MCP che permette a Claude Code, Claude Desktop, Cursor o a qualsiasi client MCP di inviare pagine direttamente nel tuo plugin Figma aperto, dove vengono convertite in veri layer modificabili con Auto Layout.

Che cosa significa qui "AI to Figma"

Ci sono due cose molto diverse che si chiamano AI to Figma:

1. Un'AI che genera un design dentro Figma a partire da un prompt.
2. Un'AI che scrive HTML e CSS, e un ponte che converte quel codice in layer Figma.

HTML to Frames fa la seconda. Il tuo strumento AI continua a fare ciò che sa fare bene, cioè scrivere codice front-end, e il plugin esegue la conversione che già fa per qualsiasi pagina web: frame, testi, vettori, immagini, variabili e Auto Layout. Il risultato ha la stessa qualità dell'importazione di un sito online, perché passa per la stessa pipeline di acquisizione. Per una panoramica del prodotto, vedi AI to Figma.

Come funziona la connessione MCP

Il Model Context Protocol (MCP) è un modo standard con cui gli strumenti AI chiamano strumenti esterni. Quando colleghi HTML to Frames come server MCP, il tuo strumento AI ottiene tre strumenti:

La pagina arriva nel tuo plugin aperto in Figma e viene importata con il tuo piano, quindi valgono le solite regole del piano: schermate per importazione, stili e variabili, componenti e così via.

Cosa riceve indietro lo strumento AI

L'AI non riceve indietro il tuo file Figma. Riceve una risposta alla chiamata dello strumento che conferma la consegna della pagina, e può chiamare import_status per vedere come procede l'importazione. Il lavoro di design vero e proprio avviene in Figma, nel plugin, dove vedi la schermata dei risultati con frame, layer, quota di Auto Layout ed eventuali avvisi. È una scelta voluta: il plugin non legge il contenuto del tuo file Figma, quindi nulla del tuo file torna all'AI.

Configurazione: collega il tuo strumento AI dalla scheda AI del plugin

La configurazione si fa una volta per ogni client AI. Tutto parte dal plugin.

1. Apri HTML to Frames in Figma e vai alla scheda AI.
2. Ottieni il tuo token. La scheda AI ti fornisce un token di connessione. Trattalo come una password.
3. Scegli il tuo client. La scheda AI mostra una configurazione pronta da copiare per i client supportati.
4. Incolla la configurazione nel tuo client esattamente come mostrata (dettagli per ogni client qui sotto).
5. Riavvia o ricarica il client perché rilevi il nuovo server MCP.
6. Tieni il plugin aperto in Figma mentre lavori. Le pagine vengono consegnate al plugin aperto.

Claude Code

Claude Code legge i server MCP dalla sua configurazione. Copia la configurazione che la scheda AI ti fornisce per Claude Code ed eseguila o incollala come indicato. Poi avvia una nuova sessione e chiedi a Claude di elencare i suoi strumenti: dovresti vedere import_html, import_url e import_status.

Claude Desktop

Claude Desktop conserva i server MCP nel suo file di configurazione, che puoi aprire dalle impostazioni per sviluppatori dell'app. Incolla lo snippet della scheda AI in quel file, salva e riavvia completamente Claude Desktop. Gli strumenti compaiono nel menu strumenti di una nuova chat.

Cursor

Cursor elenca i server MCP nelle sue impostazioni. Aggiungi un nuovo server usando lo snippet della scheda AI, salva e verifica che il server risulti connesso con tre strumenti.

Qualsiasi altro client MCP

Se il tuo strumento parla MCP, valgono lo stesso token e la stessa configurazione. Usa la configurazione generica della scheda AI e adattala al modo in cui il tuo client registra i server.

Non ancora supportati: i connettori web di claude.ai

I connettori web di claude.ai (OAuth) non sono ancora supportati. Se lavori con la versione browser di Claude, genera lì l'HTML, salvalo e importalo tramite le sorgenti Local file o Paste code del plugin. Oppure sposta il lavoro su Claude Code o Claude Desktop, che già oggi si collegano via MCP.

Privacy: cosa succede al tuo token e alle tue pagine

I flussi di lavoro con AI sollevano domande legittime su dove viaggiano codice e design. Ecco cosa fa la connessione:

• Il tuo token di connessione è memorizzato solo come hash. Il servizio può verificarlo, ma non conserva il token stesso.
• Le pagine attendono in memoria al massimo 30 minuti. Se il tuo plugin non preleva una pagina entro quel tempo, la pagina sparisce.
• Il rendering avviene in un browser isolato e in sandbox. Il risultato viene consegnato una sola volta, poi eliminato dalla memoria, e non viene mai scritto su disco.
• Niente cookie, analytics o pixel di tracciamento nel plugin, nell'estensione o nel sito web.
• Non riceviamo mai da Figma il tuo nome o la tua email; l'identificativo dell'account è derivato dal tuo ID utente Figma.

Il dettaglio completo è nella pagina sulla sicurezza.

Limiti da conoscere

• Dimensione dell'HTML: import_html accetta fino a 2 MB. Usa con parsimonia immagini base64 enormi inline; quando puoi, rimanda a immagini ospitate online.
• Solo URL pubblici per import_url. Se l'anteprima dell'AI gira su localhost, fai inviare all'AI direttamente l'HTML con import_html, oppure acquisisci la pagina in esecuzione con l'estensione Chrome, che gestisce localhost e pagine con login.
• Vale l'utilizzo del piano. Ogni pagina conta come un'importazione nel tuo piano. Free offre 10 importazioni al mese e 1 schermata per importazione; Pro e Team sono illimitati con uso corretto e fino a 4 schermate per importazione. Vedi i prezzi.
• Stesse regole di conversione di qualsiasi pagina. Iframe, canvas WebGL e video senza poster diventano un'immagine screenshot del loro riquadro. Trasformazioni skew e 3D non vengono ancora convertite.

Prompt da provare

Una volta collegato, parli con l'AI come faresti normalmente e le chiedi di inviare il risultato a Figma. Alcuni prompt che funzionano bene:

1. "Crea una pagina prezzi con tre livelli usando HTML e CSS semplici con flexbox, poi inviala a Figma con import_html."
2. "Prendi la schermata di impostazioni che hai appena costruito, metti il CSS inline e importala in Figma. Poi controlla import_status."
3. "Il nostro sito di staging è a questo URL pubblico. Importa in Figma le pagine prezzi e registrazione con import_url."
4. "Crea due varianti di questa sezione hero, una con il titolo allineato a sinistra e una centrata. Invia ciascuna a Figma come importazione separata."
5. "Riscrivi questa griglia di card usando custom property CSS per i colori, poi importala in modo che le variabili vengano trasferite."

Prompt per un output Figma pulito

L'AI produce importazioni migliori quando orienti il suo CSS:

• Chiedi flexbox e grid con gap invece dei margini tra elementi fratelli. Si traducono bene in Auto Layout; vedi Da CSS flexbox e grid all'Auto Layout.
• Chiedi custom property CSS per i colori. Con Styles & variables attivo (Pro), --brand-primary diventa una variabile brand/primary.
• Chiedi testo reale, non testo incorporato nelle immagini, così ogni titolo resta modificabile.
• Chiedi una pagina per importazione; i documenti lunghi con più schermate sono più difficili da rivedere.

Il ciclo tra design e codice

Il vero valore non sta in una singola importazione, ma in un ciclo in cui design e codice smettono di allontanarsi.

1. Prompt: l'AI costruisce una prima versione in codice.
2. Importazione: l'AI la invia a Figma con import_html o import_url.
3. Revisione in Figma: i designer regolano spaziature, tipografia, colori e layout con frame in Auto Layout, aggiungono commenti ed esplorano alternative.
4. Descrivi le modifiche: di' all'AI cosa è cambiato, o incolla i valori rilevanti, e lascia che aggiorni il codice.
5. Re-import per confermare che ora il codice corrisponde, e confronta con il frame precedente.

Chi ne trae vantaggio

• I designer smettono di ridisegnare a mano i prototipi dell'AI e partono da frame modificabili.
• Gli sviluppatori front-end ottengono la revisione del design sul risultato reale senza esportare screenshot.
• I product manager possono trasformare un prompt in una pagina Figma da rivedere in una riunione con gli stakeholder.
• Chi lavora da solo conserva in un unico file la documentazione visiva di ogni iterazione.

AI to Figma rispetto ad altre strade

Tutte e tre le strade del plugin usano lo stesso motore. MCP elimina semplicemente il copia e incolla e lascia guidare l'AI. L'Auto Layout è verificato: la posizione di ogni elemento figlio viene controllata entro 2 px e, se un layout non regge, si prova un piano più semplice oppure il frame mantiene le posizioni assolute. Il design non si rompe mai. Approfondisci in Auto Layout spiegato.

Risoluzione dei problemi

• L'AI dice che lo strumento non è disponibile. Riavvia il client dopo aver aggiunto il server e verifica che lo snippet sia stato incollato senza modifiche.
• L'importazione non compare mai. Assicurati che il plugin sia aperto in Figma. Le pagine attendono fino a 30 minuti, quindi apri il plugin e le preleverà entro quel tempo.
• Il token è stato rifiutato. Genera un nuovo token dalla scheda AI e aggiorna la configurazione del client.
• Il layout non sembra corretto. Controlla la diagnostica nella schermata dei risultati, che spiega perché un frame è rimasto assoluto, e chiedi all'AI di usare flexbox o grid per quella sezione.

Per iniziare

Apri il plugin, vai alla scheda AI e collega un client. Chiedi al tuo strumento AI di costruire un piccolo componente e di inviarlo a Figma: vedrai come si comporta prima di affidarti a esso per una schermata completa. La documentazione descrive la scheda AI e la pagina delle funzionalità elenca tutto ciò che l'importazione supporta.