Connessione MCP
AI to Figma: invia a Figma la UI generata da Claude o Cursor
Collega il tuo strumento AI a HTML to Frames via MCP. Le pagine che costruisce arrivano nel tuo plugin aperto come layer modificabili in Auto Layout.
- Funziona con Claude Code, Claude Desktop, Cursor e altri client MCP
- Tre strumenti: import_html, import_url, import_status
- Token memorizzato solo come hash
In arrivo su Figma Community
AI to Figma è un problema di flusso di lavoro più che di generazione. Strumenti come Claude e Cursor possono produrre in pochi minuti una landing page o una dashboard convincente in HTML, ma quel risultato vive in un file di codice o in un'anteprima del browser. Per rivederlo con un team, combinarlo con un design system esistente o continuare a iterare visivamente, deve stare in Figma, come layer e non come screenshot.
HTML to Frames, il plugin Figma di EUREKA!, offre una connessione MCP proprio per questo. Apri la scheda AI del plugin, copia il token e lo snippet di configurazione che mostra, e aggiungilo a Claude Code, Claude Desktop, Cursor o a qualsiasi client MCP. Il tuo strumento AI riceve così tre strumenti: import_html per inviare l'HTML che ha scritto (fino a 2 MB), import_url per importare una pagina tramite indirizzo e import_status per controllare un job.
Quando l'AI ne chiama uno, la pagina arriva nel tuo plugin HTML to Frames aperto e viene importata con il tuo piano e le tue impostazioni. Ottieni lo stesso risultato di qualsiasi altra importazione: testo modificabile, vettori, immagini, Auto Layout verificato e, con Pro, variabili, stili e componenti.
È utile per i designer che prototipano con l'AI e vogliono rifinire a mano il risultato, per gli sviluppatori che generano UI e devono consegnarla al design, e per i team che vogliono che le bozze dell'AI si aggancino ai loro stili esistenti.
La guida Dalla UI generata dall'AI a Figma con MCP illustra una sessione completa. Per vedere cosa preserva la conversione, leggi HTML to Figma, e per come vengono trattati token e dati, vedi la pagina sulla sicurezza.
Collegare uno strumento AI a Figma
- 01
Apri la scheda AI nel plugin
Avvia HTML to Frames in Figma e passa alla scheda AI per ottenere il tuo token di connessione.
- 02
Copia la configurazione nel tuo strumento
Incolla la configurazione pronta in Claude Code, Claude Desktop, Cursor o un altro client MCP.
- 03
Chiedi all'AI di inviare una pagina
L'AI chiama import_html con l'HTML che ha scritto, oppure import_url con un indirizzo.
- 04
Rivedila in Figma
Tieni il plugin aperto: la pagina arriva lì e viene importata come layer modificabili.
Cosa dà al tuo strumento AI la connessione MCP
Funziona con il tuo strumento AI
Claude Code, Claude Desktop, Cursor o qualsiasi client che parli MCP.
import_html
Invia l'HTML generato dall'AI, fino a 2 MB, senza doverlo prima salvare o pubblicare.
import_url
Lascia che l'AI importi una pagina pubblica tramite indirizzo, per esempio un riferimento che ha trovato.
import_status
L'AI può controllare lo stato di un'importazione che ha avviato.
Risultato coerente con il sistema
Con Snap su Pro, le bozze dell'AI si collegano ai colori e agli stili di testo più vicini del tuo file.
Token con hash
Il token di connessione è memorizzato solo come hash e le pagine attendono in memoria al massimo 30 minuti.
Configurazione MCP per Claude Code, Claude Desktop e Cursor
Il Model Context Protocol (MCP) è uno standard aperto che permette agli strumenti AI di chiamare strumenti esterni. HTML to Frames espone la sua importazione come server MCP, quindi qualsiasi client compatibile con MCP può inviare pagine a Figma.
Ottenere i dettagli di connessione
Apri HTML to Frames in Figma e vai alla scheda AI. Mostra un token personale e una configurazione pronta da copiare per il tuo client. Non devi scrivere la configurazione a mano.
Claude Code
Aggiungi il server usando la configurazione della scheda AI, poi chiedi a Claude di inviare a Figma la pagina che sta costruendo. Claude chiamerà import_html con il contenuto del file.
Claude Desktop
Aggiungi il server alla configurazione MCP di Claude Desktop usando lo snippet fornito, poi riavvia l'app se non rileva la modifica. Gli strumenti di HTML to Frames compariranno nella conversazione.
Cursor
Aggiungi il server nelle impostazioni MCP di Cursor con gli stessi dettagli. L'agente potrà quindi importare una pagina generata o un URL mentre lavori nell'editor.
Altri client MCP
Qualsiasi client che supporti i server MCP può connettersi con lo stesso token. Tieni presente che i connettori web di claude.ai, che usano OAuth, non sono ancora supportati.
I passaggi esatti per ogni client sono sempre aggiornati nella documentazione.
Trasformare le bozze dell'AI in un design manutenibile
L'HTML generato dall'AI tende a essere incoerente nei dettagli: un blu leggermente diverso su ogni pulsante, tre dimensioni di font quasi identiche, spaziature che variano di qualche pixel. Importato alla lettera, diventa un file di design disordinato. HTML to Frames ti dà gli strumenti per ripulirlo già in fase di importazione.
- Auto Layout verificato. I layout flexbox e grid del CSS generato diventano frame in Auto Layout dove ogni elemento figlio resta entro 2 px, così la bozza è facile da riorganizzare.
- Stili e variabili (Pro). I colori usati ripetutamente e le eventuali custom property CSS diventano variabili, e vengono creati stili di testo e di ombra.
- Snap to my file's styles (Pro). I valori che non corrispondono esattamente al tuo sistema si agganciano ai colori e agli stili di testo esistenti più vicini, così le bozze dell'AI arrivano già coerenti con il sistema.
- Componenti (Pro). Card, pulsanti ed elementi di elenco ripetuti diventano componenti con istanze.
Un ciclo pratico è questo: chiedi all'AI un layout, invialo a Figma, modificalo visivamente, poi descrivi le modifiche all'AI per l'iterazione successiva. Ogni giro arriva come nuovi frame, così sul canvas conservi la cronologia delle versioni.
Poiché l'importazione usa il tuo piano, valgono gli stessi limiti di qualsiasi importazione. Vedi i prezzi per i dettagli.
Privacy e limiti della connessione AI
Collegare uno strumento AI a un file di design solleva domande legittime su cosa viene condiviso. Ecco come viene gestita la connessione MCP.
Token
Il tuo token di connessione è memorizzato da noi solo come hash. Trattalo come una password e tienilo fuori dai repository condivisi: è ciò che permette a un client di inviare pagine al tuo plugin.
Pagine in transito
Le pagine inviate dall'AI attendono in memoria al massimo 30 minuti, finché il tuo plugin aperto non le preleva. Le importazioni da URL vengono renderizzate nello stesso browser isolato e in sandbox usato per ogni altra importazione, e i risultati non vengono mai scritti su disco.
Il tuo file Figma
Attraverso questa connessione l'AI non può leggere il tuo file Figma. Il plugin stesso non legge il contenuto del tuo file: scrive nuovi layer e legge solo i metadati dei propri frame.
Limiti
import_htmlaccetta HTML fino a 2 MB.- Il plugin deve essere aperto in Figma perché le pagine arrivino.
- Ogni pagina conta come un'importazione nel tuo piano.
- I connettori web di claude.ai (OAuth) non sono ancora supportati.
La pagina sulla sicurezza riporta tutti i dettagli sulla conservazione dei dati.
Domande frequenti
Claude Code, Claude Desktop, Cursor e qualsiasi altro client che supporti i server MCP. Li colleghi dalla scheda AI del plugin, che ti fornisce un token e una configurazione pronta da copiare. I connettori web di claude.ai, che usano OAuth, non sono ancora supportati.
Tre: import_html invia l'HTML scritto dall'AI, fino a 2 MB; import_url importa una pagina pubblica tramite il suo indirizzo; import_status permette all'AI di controllare l'avanzamento di un'importazione. Le pagine arrivano nel tuo plugin aperto e vengono importate con le tue impostazioni.
Sì. Le pagine inviate dal tuo strumento AI vengono consegnate al tuo plugin HTML to Frames aperto in Figma. Attendono in memoria al massimo 30 minuti, quindi se il plugin resta chiuso per poco, riaprendolo entro quel tempo le preleva.
No. La connessione MCP permette all'AI solo di inviare pagine da importare e di controllarne lo stato. Il plugin stesso non legge il contenuto del tuo file: scrive nuovi layer e legge solo i metadati dei frame che ha creato, come URL sorgente e larghezza.
Non ci sono prezzi separati. Una pagina inviata dall'AI viene importata con il tuo piano e conta come un'importazione, come qualsiasi altra sorgente. Il piano Free include 10 importazioni al mese, mentre Pro e Team sono illimitati entro un limite di uso corretto.
Con Pro, attiva Styles & variables e Snap to my file's styles. Le corrispondenze esatte riutilizzano le tue variabili e i tuoi stili esistenti, e i valori vicini ma non identici si agganciano al colore e allo stile di testo più vicini, così le pagine generate arrivano già collegate al tuo sistema.
Articoli correlati
Smetti di ridisegnare il web.
Incolla un link e ottieni in pochi secondi layer Figma reali, modificabili e responsive. Si parte gratis: 10 importazioni ogni mese.
Nessuna carta di credito. Pro si acquista direttamente in Figma.
In arrivo su Figma Community