Plugin Figma
HTML to Figma: layer modificabili, non uno screenshot
HTML to Frames trasforma qualsiasi pagina web in veri frame, testi, vettori e immagini Figma, con un Auto Layout che viene verificato prima di essere mantenuto.
- Cinque sorgenti: link, più link, file locali, scheda di Chrome, strumenti AI
- Auto Layout verificato elemento per elemento, così il design non si rompe mai
- Piano Free con 10 importazioni al mese
In arrivo su Figma Community
Convertire HTML in Figma sembra semplice finché non apri il risultato: un'immagine piatta che non puoi modificare, oppure un mucchio di riquadri in posizionamento assoluto che si sfaldano appena ridimensioni un frame. HTML to Frames, un plugin Figma di EUREKA!, segue un'altra strada. Esegue il rendering della pagina in un browser reale, misura ogni elemento e la ricostruisce sul tuo canvas come layer Figma nativi: frame, testo modificabile con stili misti, SVG convertiti in vettori e immagini con il loro adattamento e la loro ripetizione originali.
Il plugin prima costruisce la pagina al pixel con posizioni assolute. Poi percorre i frame dall'interno verso l'esterno e ricava pile, righe a capo, gap, padding e allineamento dalla geometria del browser. Ogni piano di Auto Layout viene applicato e la posizione di ogni elemento figlio viene verificata con una tolleranza di 2 px. Se un piano non regge, ne prova uno più semplice; se nulla funziona, quel frame mantiene le posizioni assolute con constraint sensati. Ottieni un file che si comporta come qualcosa costruito da un designer, non come un ricalco.
Puoi portare l'HTML da qualsiasi luogo si trovi: un URL pubblico, fino a 10 link in un unico lotto, un file HTML locale, la cartella di un sito o un .zip, codice incollato, una scheda nel tuo Chrome oppure uno strumento AI collegato via MCP. La panoramica delle funzionalità elenca tutto ciò che viene convertito, dai gradienti e dalle ombre agli pseudo-elementi ::before e allo shadow DOM.
Se il processo è nuovo per te, la guida passo passo Come convertire HTML in Figma ti accompagna nella prima importazione. Se lavori soprattutto con siti online, vedi URL to Figma; per le pagine protette da login o in localhost, la strada giusta è l'estensione Chrome. I prezzi partono da $0 con 10 importazioni al mese, e la pagina dei prezzi spiega cosa aggiunge Pro.
Come convertire HTML in Figma in quattro passaggi
- 01
Apri il plugin e scegli una sorgente
Scegli Link, Multiple, Local file, Browser o AI a seconda di dove si trova il tuo HTML.
- 02
Scegli schermate e opzioni
Seleziona Desktop, Laptop, Tablet o Mobile e attiva opzioni come Auto Layout, Images o Hide cookie banners & popups.
- 03
Risolvi i font mancanti
Prima di costruire qualsiasi cosa, una schermata Missing fonts suggerisce le sostituzioni e ricorda le tue scelte per ogni sito.
- 04
Controlla il risultato
La schermata dei risultati mostra frame, layer, quota di Auto Layout e avvisi, incluso il motivo per cui un frame è rimasto assoluto.
Cosa rende la conversione modificabile
Layer nativi, non pixel
Frame, testi, vettori e immagini che puoi selezionare, rinominare e ristilizzare come qualsiasi cosa disegnata a mano.
Auto Layout verificato
Pile, gap, padding e allineamento vengono ricavati dalla geometria misurata e verificati entro 2 px prima di essere mantenuti.
Stili di testo reali
Stili misti, link, letter-spacing, line-height e text-transform arrivano come testo modificabile.
Gradienti, ombre, blur
Gradienti lineari, radiali e conici, ombre interne ed esterne, blend mode, blur e backdrop-blur vengono preservati.
Schermate responsive
Acquisisci Desktop, Laptop 1280, Tablet 768 e Mobile 390, oppure un responsive set completo in un clic con Pro.
Cinque modi per importare
Importa da un link, fino a 10 link, file locali, una scheda di Chrome o uno strumento AI via MCP.
Layer modificabili o screenshot
Molti strumenti che promettono la conversione da HTML a Figma incollano un'immagine della pagina. Va bene per una mood board, ma finisce lì: non puoi cambiare un titolo, sostituire un colore o spostare una card. HTML to Frames, invece, ricostruisce la struttura.
| Importazione come screenshot | HTML to Frames | |
|---|---|---|
| Testo | Pixel | Testo modificabile con stili misti |
| Icone e loghi | Pixel | SVG convertiti in vettori modificabili |
| Layout | Immagine piatta | Frame annidati con Auto Layout verificato |
| Colori | Campionati a occhio | Valori esatti, variabili colore opzionali (Pro) |
| Ridimensionamento | Deforma l'immagine | Auto Layout e constraint rispondono |
C'è un'eccezione, e la diciamo chiaramente. I contenuti che non possono esistere come layer, come un iframe con una mappa incorporata, un video senza poster o una scena WebGL, arrivano come immagine screenshot di quel riquadro specifico. Il resto della pagina intorno resta modificabile, quindi una hero con video di sfondo ti dà comunque titoli, pulsanti e navigazione modificabili.
Se vuoi comunque un riferimento al pixel, Pro include l'opzione Reference screenshot: un layer nascosto e bloccato posto sotto l'importazione, per confrontare in qualsiasi momento la ricostruzione con l'originale. Per approfondire la differenza, leggi HTML to canvas o layer modificabili.
Cinque sorgenti, un solo risultato
Ogni sorgente porta allo stesso tipo di risultato, quindi puoi scegliere quella più adatta alla tua situazione.
Link e Multiple
Incolla un URL pubblico, oppure fino a 10 link elaborati uno dopo l'altro. Ogni pagina arriva come riga a sé sul canvas. L'importazione Multiple è disponibile con ogni piano, Free compreso.
Local file
Trascina un singolo file HTML, l'intera cartella di un sito (poi scegli quali pagine), un .zip, oppure incolla direttamente HTML e CSS. I caricamenti possono arrivare a 30 MB e vengono eliminati appena termina l'importazione.
Browser
L'estensione Chrome gratuita acquisisce ciò che vede il tuo browser: dashboard con login, localhost, reti private e lo stato attuale di una pagina, come un menu aperto o un modulo compilato. Vedi Estensione Chrome per Figma.
Strumenti AI
Collega Claude Code, Claude Desktop, Cursor o un altro client MCP dalla scheda AI del plugin, e le pagine generate arrivano nel tuo plugin aperto. I dettagli sono in AI to Figma.
Qualunque sorgente tu scelga, un'importazione conta come una pagina con tutte le sue schermate, quindi un'acquisizione Desktop, Tablet e Mobile della stessa pagina è un'unica importazione. Ogni frame memorizza il proprio URL sorgente: puoi reimportarlo con un clic quando la pagina online cambia.
Cosa gestisce il convertitore
Il CSS moderno è il punto in cui la maggior parte degli strumenti HTML to Figma perde fedeltà. HTML to Frames legge il risultato calcolato dal browser, quindi gestisce un'ampia gamma di proprietà:
- Layout da flexbox e grid, tradotti in Auto Layout dove reggono (vedi Da CSS flexbox e grid all'Auto Layout)
- Bordi, compreso un singolo lato di colore diverso, e corner radius
- Immagini con
object-fit,background-size, ripetizione esrcsetad alta risoluzione clip-path,mask-image,::beforee::after, contatori CSS e marcatori di elenco disegnati come in Chrome- Rotazione e scala CSS, opacità,
filter: grayscale/opacity - Campi dei moduli, apice e pedice, shadow DOM e ordine z-index
Alcune cose non sono ancora supportate: trasformazioni skew e 3D, clip-path con path(), maschere a più livelli e colori Display-P3. Le elenchiamo apertamente, così sai cosa aspettarti prima di importare. L'elenco completo è nella pagina delle funzionalità, e le domande sulla configurazione trovano risposta nella documentazione.
Quando qualcosa non può essere rappresentato esattamente, la schermata dei risultati te lo dice. Elenca i font mancanti, gli avvisi, la quota di frame che hanno ricevuto l'Auto Layout e, per ogni frame rimasto assoluto, il motivo. Non devi mai indovinare quali parti della conversione ricontrollare.
Domande frequenti
No. HTML to Frames ricostruisce la pagina come layer Figma nativi: frame, testo modificabile, vettori dagli SVG e immagini. Solo i riquadri che non possono diventare layer, come iframe con mappe, video senza poster o canvas WebGL, arrivano come screenshot di quel riquadro, mentre tutto ciò che li circonda resta modificabile.
Cinque: un link pubblico, fino a 10 link in un'unica importazione Multiple, file locali (un singolo file HTML, la cartella di un sito, un .zip o codice incollato), una scheda di Chrome tramite l'estensione gratuita e strumenti AI come Claude Code, Claude Desktop o Cursor collegati via MCP.
Sì. Dopo aver costruito la pagina al pixel, il plugin ricava pile, gap, padding e allineamento, li applica e verifica ogni elemento figlio entro 2 px. Se un piano fallisce, ne prova uno più semplice; altrimenti il frame mantiene le posizioni assolute con i constraint, così il design non si rompe.
Sì. Il piano Free include 10 importazioni al mese con una schermata per importazione, e l'importazione Multiple fino a 10 link è inclusa. Pro aggiunge fino a quattro schermate per importazione, stili e variabili, componenti, Light + Dark e altro, al prezzo di lancio di $7 al mese.
Le pagine vengono renderizzate in un browser isolato e in sandbox. Il risultato viene consegnato una sola volta e poi eliminato dalla memoria; non viene mai scritto su disco e il record del job viene dimenticato dopo 15 minuti. I file caricati vengono eliminati appena termina l'importazione.
Prima della costruzione, il plugin mostra una schermata Missing fonts con le sostituzioni suggerite. Le tue scelte vengono ricordate per ogni sito, o per tutti i siti se preferisci, così le importazioni successive dello stesso sito non te lo chiedono più. La mappatura dei font è disponibile con ogni piano, Free compreso.
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