Plugin Figma HTML
Il plugin Figma HTML che crea livelli davvero modificabili
Lo avvii dentro Figma, incolli un link o trascini il tuo HTML e ottieni frame, testi e vettori con un Auto Layout già verificato sulla pagina reale.
- Funziona in qualsiasi file Figma Design, senza account
- Cinque fonti: link, 10 link, file, Chrome, strumenti AI
- Piano Free con 10 importazioni al mese
Presto su Figma Community
Un plugin Figma HTML ha un solo compito: prendere qualcosa che esiste come HTML e CSS e trasformarlo in qualcosa con cui progettare in Figma. La differenza tra un plugin e l'altro sta in che cosa si intende per “qualcosa con cui progettare”. Alcuni incollano uno screenshot. Altri piazzano centinaia di riquadri in posizione assoluta che crollano appena ridimensioni un frame. HTML to Frames, un plugin Figma di EUREKA!, nasce attorno a un criterio più severo: ogni frame, livello di testo e vettore deve comportarsi come se lo avesse costruito a mano un designer.
Per questo il plugin lavora in due passaggi. Prima ricostruisce la pagina al pixel. Poi percorre i frame dall'interno verso l'esterno, ricava stack, righe che vanno a capo, gap, padding e allineamenti dalla geometria misurata dal browser, applica l'Auto Layout e controlla la posizione di ogni elemento figlio entro 2 px. Se un frame si sposterebbe, il plugin prova una soluzione più semplice oppure mantiene le posizioni esatte con constraint sensati. Nei nostri test su siti reali l'Auto Layout è stato mantenuto su circa l'86–97% dei frame, e il design non si rompe mai.
Il plugin gira dove lavori già. Aprilo da Plugins → HTML to Frames in qualsiasi file Figma Design, scegli una fonte e premi Import. Non c'è nessun account a parte da creare: il piano Free si attiva da solo e Pro si acquista direttamente in Figma, con il checkout di Figma.
Se stai confrontando le opzioni, parti dalla panoramica su HTML in Figma, guarda nel dettaglio che cosa viene convertito nella pagina delle funzionalità oppure leggi il confronto onesto tra gli strumenti HTML to Figma.
Come usare il plugin Figma HTML
- 01
Aprilo in Figma
In un file Figma Design vai su Plugins → HTML to Frames, oppure premi ⌘/ e digita il nome.
- 02
Scegli da dove arriva l'HTML
Link, Multiple (fino a 10 link), Local file, Browser per l'estensione Chrome oppure AI per gli strumenti MCP.
- 03
Scegli schermate e opzioni
Il Desktop si apre alla larghezza misurata del sito. Con Pro aggiungi Tablet e Mobile tramite Responsive set.
- 04
Importa e modifica
I frame arrivano con il nome della pagina e della schermata, con Auto Layout, testi modificabili e vettori pronti da cambiare.
Che cosa aspettarsi da un buon plugin Figma HTML
Livelli nativi, non un'immagine
Frame, testo modificabile con stili misti, SVG come vettori e immagini con il loro adattamento e la loro ripetizione originali.
Un Auto Layout che regge
Stack, righe e griglie diventano Auto Layout verificato entro 2 px; i frame che si sposterebbero mantengono le posizioni esatte.
Schermate responsive
Desktop alla larghezza misurata del sito, più Laptop, Tablet, Mobile o una larghezza personalizzata con Pro.
Non solo URL pubblici
File HTML, cartelle di siti interi, archivi .zip e codice incollato, aperti in un browser isolato.
Un design system come risultato
Variabili colore, stili di testo e ombre, componenti e varianti hover con Pro, riutilizzando ciò che il tuo file ha già.
Privacy fin dal progetto
Il plugin non legge mai il contenuto del tuo file. I risultati vengono consegnati una sola volta e mai scritti su disco.
Plugin, estensione Chrome o MCP: quale strada scegliere
HTML to Frames è un unico prodotto con tre punti d'accesso, e tutti portano allo stesso risultato modificabile dentro il plugin.
Solo il plugin Figma
Ideale per tutto ciò che ha un indirizzo pubblico. Incolla un link, o fino a 10 link con Multiple, e il servizio di acquisizione apre ogni pagina in un browser isolato così come la vede un normale visitatore, nascondendo su richiesta banner dei cookie e popup. File HTML locali, cartelle di siti e archivi .zip fino a 30 MB seguono lo stesso percorso e vengono eliminati appena l'importazione finisce.
Plugin + estensione Chrome
Ideale per le pagine che il servizio non può raggiungere: dashboard dietro login, localhost, ambienti di staging in una rete privata o una pagina in uno stato preciso, come un menu aperto o un modulo compilato. L'estensione Chrome gratuita acquisisce quello che mostra il tuo browser e lo invia direttamente al plugin aperto con Send to Figma.
Plugin + strumenti AI
Ideale quando l'HTML ancora non esiste. Collega Claude Code, Claude Desktop, Cursor o qualsiasi client MCP dalla scheda AI del plugin e chiedigli di progettare una pagina: il risultato arriva nel tuo plugin e viene importato con il tuo piano. Per la configurazione vedi dall'AI a Figma.
Come valutare qualsiasi plugin Figma HTML
Prima di adottare uno strumento in tutto il team, importa le stesse tre pagine con ogni candidato: una pagina marketing, una schermata di prodotto densa e una pagina con tema scuro. Poi controlla cinque cose.
- Riesci a modificare il testo? Fai clic su un titolo e scrivi. Se fa parte di un'immagine, l'importazione è un riferimento, non un design.
- L'Auto Layout regge un ridimensionamento? Allarga il frame. Le righe dovrebbero estendersi, il contenuto centrato restare al centro e nulla dovrebbe sovrapporsi.
- Le larghezze sono giuste? Un sito progettato a 1200 px non dovrebbe arrivare schiacciato in 1440 px. HTML to Frames misura la vera larghezza di progetto e la chiama Site width.
- Gli stili sono riutilizzabili? Cerca variabili colore e stili di testo invece di centinaia di valori esadecimali sparsi, e verifica se un design system esistente viene riutilizzato.
- Dove finiscono i tuoi dati? Leggi l'informativa sulla privacy. Il nostro servizio di acquisizione consegna ogni risultato una sola volta, non conserva nulla su disco ed elimina i file caricati subito dopo l'importazione; i dettagli sono nella pagina sulla sicurezza.
Se uno strumento supera tutte e cinque le prove, ti farà risparmiare tempo sui progetti veri, non solo in una demo.
Piani, limiti e che cosa conta come importazione
Il piano Free include 10 importazioni al mese, una schermata per importazione, l'importazione multipla fino a 10 link, l'Auto Layout e la sostituzione dei font. Pro costa $7 al mese al lancio (prezzo standard $9) e aggiunge importazioni illimitate con un limite di fair use di 1.000 al mese, fino a quattro schermate per importazione, larghezze personalizzate, stili e variabili, Snap, componenti e stati hover, Light + Dark, livelli dettagliati, screenshot di riferimento e attesa extra. Team copre 5 postazioni a $22 al mese al lancio con una chiave di licenza condivisa.
Un'importazione è una pagina con tutte le sue schermate, quindi Desktop, Tablet e Mobile della stessa pagina contano una volta sola. Anche un'acquisizione dall'estensione Chrome conta come un'importazione. I contatori si azzerano ogni mese (UTC). Tutti i dettagli sono nella pagina dei prezzi.
Domande frequenti
Sì. HTML to Frames ha un piano Free con 10 importazioni al mese e una schermata per importazione. L'importazione multipla fino a 10 link, l'Auto Layout e la sostituzione dei font sono inclusi. Non servono account né carta: il piano si attiva la prima volta che apri il plugin.
Apri HTML to Frames da Plugins in un file Figma Design, scegli Link e incolla un URL, oppure scegli Local file e trascina un file HTML, una cartella o uno .zip. Seleziona le schermate, lascia attivo l'Auto Layout e premi Import. La pagina arriva sul canvas come frame modificabili.
Il plugin è pensato per i file Figma Design, dove sono disponibili frame, Auto Layout, variabili e componenti. Apri un file Design per usarlo.
Da solo no, perché il servizio di acquisizione apre solo indirizzi pubblici. Installa l'estensione Chrome gratuita di HTML to Frames: acquisisce quello che mostra il tuo browser e lo invia al plugin, comprese pagine dietro login, localhost e reti private.
No. Scrive i livelli importati e legge soltanto i metadati dei propri frame, come l'URL di origine e la larghezza, per permetterti di reimportarli in seguito. I nomi dei font vengono controllati in locale per trovare quelli mancanti.
Le differenze principali sono un Auto Layout verificato che non rompe mai il design, una larghezza del sito misurata, componenti creati automaticamente dalle strutture ripetute, modalità Light e Dark delle variabili in un'unica importazione, l'importazione multipla in tutti i piani e l'eliminazione immediata dei file caricati. La pagina delle alternative mette gli strumenti a confronto.
Pagine correlate
Basta ridisegnare il web a mano.
Incolla un link e in pochi secondi hai livelli Figma veri, modificabili e responsive. Per iniziare non paghi nulla: 10 importazioni al mese.
Nessuna carta di credito. Pro si acquista direttamente in Figma.
Presto su Figma Community