HTML to Figma: come convertire HTML in Figma (guida 2026)

Prima o poi ogni team di design si scontra con lo stesso muro: ciò su cui devi lavorare esiste come HTML in un browser, ma il posto in cui vuoi lavorarci è Figma. Magari è il sito online di un cliente prima di un redesign, una build di staging appena rilasciata da uno sviluppatore o una landing page generata in pochi secondi da uno strumento AI. Ricostruirla a mano richiede ore. Incollare uno screenshot ti dà qualcosa da guardare, ma non da modificare.

Questa guida spiega come convertire HTML to Figma in veri layer modificabili (frame, testi, vettori e immagini) con il plugin HTML to Frames. Imparerai i cinque modi per importare una pagina, come scegliere le schermate, quali opzioni attivare, cosa si converte bene e cosa no, e come risolvere il problema più comune: i font mancanti.

Perché convertire HTML in Figma?

Un browser e uno strumento di design risolvono problemi diversi. Il browser è la fonte di verità per ciò che viene rilasciato; Figma è dove esplori, annoti, confronti e fai l'handoff. Convertire sposta la realtà attuale nel luogo in cui prendi le decisioni.

I motivi più comuni per cui i team lo fanno:

• Redesign. Parti dal sito esistente invece che da un canvas vuoto, così vedi cosa c'è davvero prima di cambiarlo. La nostra guida al redesign da website a Figma approfondisce il tema.
• Audit. Analizza spaziature, scala tipografica e uso dei colori layer per layer invece di indovinare dai DevTools.
• Divergenza tra design e codice. Riporta in Figma la versione rilasciata per confrontarla con il mockup originale.
• Handoff al contrario. Uno sviluppatore front-end costruisce su localhost e il designer rivede e rifinisce in Figma.
• UI generata dall'AI. Strumenti come Claude o Cursor producono HTML rapidamente; Figma è dove lo rendi pronto per la produzione.
• Formazione. Studenti e designer junior possono studiare siti ben costruiti un layer alla volta.

La parola chiave in tutti questi casi è modificabile. Una bitmap ti mostra solo la pagina. I layer ti permettono di cambiarla.

I 5 modi per portare HTML in Figma

HTML to Frames accetta pagine web da cinque tipi di sorgenti. Scegli quella che corrisponde a dove si trova il tuo HTML.

1. Link (un singolo URL pubblico)

Incolla l'URL di qualsiasi pagina web pubblica nella scheda Link. La pagina viene renderizzata in un browser isolato, misurata e ricostruita come layer Figma. È la strada più veloce quando la pagina è raggiungibile pubblicamente. Vedi URL to Figma per saperne di più su questo flusso.

2. Multiple (fino a 10 link)

La scheda Multiple accetta fino a 10 link in un colpo solo. Vengono elaborati uno dopo l'altro e ogni pagina diventa una riga sul canvas, così homepage, pagina prezzi e articolo del blog si allineano fianco a fianco per il confronto. L'importazione Multiple è disponibile con ogni piano, Free compreso.

3. File locale, cartella, .zip o codice incollato

Se l'HTML non è ancora online, usa la scheda Local file:

• un singolo file HTML,
• l'intera cartella di un sito (trascinala e poi scegli quali pagine importare),
• un archivio .zip, oppure
• Paste code: HTML e CSS grezzi.

I caricamenti possono arrivare a 30 MB. I file vengono aperti dalla memoria in un browser isolato (mai tramite file://) ed eliminati appena termina l'importazione. I caricamenti abbandonati vengono rimossi dopo 2 minuti. La pagina sulla sicurezza riporta tutti i dettagli.

4. Browser (l'estensione Chrome gratuita)

Alcune pagine non sono raggiungibili da un server: dashboard con login, localhost, reti private o una pagina in uno stato specifico (un menu aperto, un modulo compilato, un carrello pieno). Per queste, installa l'estensione Chrome gratuita di HTML to Frames.

Puoi acquisire la pagina intera o selezionare un singolo elemento (passa il mouse per evidenziare, usa i tasti freccia per spostarti al genitore o al figlio, premi Invio per acquisire, Esc per annullare). Il risultato finisce negli appunti, o in un file .h2f, e lo incolli nella scheda Browser del plugin. Ancora più semplice: collega una volta l'estensione al plugin con un codice monouso e usa Send to Figma, così le acquisizioni arrivano direttamente nel plugin aperto.

5. Strumenti AI via MCP

Se costruisci UI con un assistente AI, collega Claude Code, Claude Desktop, Cursor o qualsiasi client MCP dalla scheda AI del plugin. Ti fornisce un token e una configurazione pronta da copiare. L'assistente potrà quindi chiamare import_html (HTML fino a 2 MB), import_url o import_status, e la pagina arriva nel tuo plugin aperto, importata con il tuo piano. I connettori web per claude.ai non sono ancora supportati. Approfondisci in AI to Figma.

Quale metodo usare?

Passo per passo: convertire una pagina con HTML to Frames

Ecco il flusso completo per una tipica pagina pubblica.

1. Apri il plugin in un file di design Figma e scegli la scheda Link.
2. Incolla l'URL della pagina che vuoi convertire.
3. Scegli le schermate: Desktop (Site width), Laptop, Tablet, Mobile o il Responsive set in un clic.
4. Controlla le opzioni, come Auto Layout, Full page, Images e Hide cookie banners & popups.
5. Avvia l'importazione. Se la pagina usa font che non hai installato, prima di costruire qualsiasi cosa compare una schermata Missing fonts.
6. Scegli le sostituzioni per i font mancanti (o accetta i suggerimenti).
7. Controlla la schermata dei risultati. Elenca frame, layer, quota di Auto Layout, font mancanti e avvisi.
8. Inizia a modificare. La tua pagina ora è un insieme di frame Figma annidati con veri testi, vettori e immagini.

Ogni schermata diventa un frame a sé, con un nome come example.com/pricing — Desktop (1920) (niente protocollo, niente www, massimo 60 caratteri), così anche le importazioni grandi restano facili da scorrere nel pannello dei layer.

Scegliere le schermate: la Site width spiegata

La scelta della schermata conta più di quanto sembri. Una pagina renderizzata alla larghezza sbagliata si allarga in modo goffo oppure si comprime in un layout che il designer non aveva mai previsto.

Desktop = Site width

HTML to Frames non si limita a scegliere 1440 sperando che vada bene. Misura la larghezza di design reale della pagina al momento dell'importazione:

• I design a tutta larghezza (sfondi che vanno da bordo a bordo) arrivano a 1920, con il contenitore del contenuto centrato.
• I siti davvero boxed arrivano alla larghezza del loro contenitore, per esempio 1200, 1280 o 1440.
• I siti fluidi senza un contenitore fisso arrivano a 1440.

Misurata, non stimata. In un'importazione multipagina, un sito riceve un'unica larghezza per tutte le sue pagine, così i frame risultano allineati.

Altre schermate

• Laptop: 1280
• Tablet: 768
• Mobile: 390
• Custom width: qualsiasi larghezza ti serva (Pro)

Il Responsive set ti dà Desktop, Tablet e Mobile in un clic. Le schermate della stessa pagina vengono acquisite in parallelo.

Con Free, ogni importazione include una schermata. Pro e Team consentono fino a quattro schermate per importazione. Importante: un'importazione = una pagina con tutte le sue schermate, quindi un responsive set di una pagina conta come un'unica importazione. Vedi i prezzi per i dettagli dei piani.

Opzioni da conoscere

Le impostazioni predefinite vanno bene per la maggior parte delle pagine, ma vale la pena capire queste opzioni:

• Auto Layout: ricava pile, gap, padding e allineamento dalla geometria del browser e verifica il risultato prima di mantenerlo. La spiegazione dell'Auto Layout descrive come funziona.
• Styles & variables (Pro): crea variabili colore, stili di testo e stili di ombra, e riutilizza quelli già presenti nel tuo file.
• Snap to my file's styles (Pro): quando non c'è una corrispondenza esatta, aggancia colori e testi agli stili più vicini del tuo design system.
• Full page: acquisisce l'intera pagina a scorrimento invece della sola prima schermata visibile.
• Images: include o esclude i riempimenti immagine.
• Hide cookie banners & popups: acquisisce la pagina come la vede un normale visitatore, senza overlay.
• Color scheme: Light, Dark o Light + Dark (Pro), che costruisce un'unica collezione di variabili con entrambe le modalità.
• Detailed layers (Pro), Reference screenshot (Pro, un layer nascosto e bloccato per il confronto) ed Extra wait (Pro, per le pagine che si caricano lentamente).
• Accordion text as notes: disattivata di default; trasforma il testo dei <details> chiusi in annotazioni Figma.
• Page language: 15 lingue, utile per i siti multilingue.

Cosa si converte e cosa no

L'obiettivo è un file di design in cui puoi davvero lavorare, quindi conviene sapere esattamente cosa viene trasferito.

Cosa diventa layer modificabili

• Layout come frame annidati, con Auto Layout dove può essere verificato
• Testo con stili misti, link, letter-spacing, line-height e text-transform
• Colori e gradienti: lineari, radiali e conici, inclusi stop in px e gradienti ripetuti
• Immagini con object-fit, background-size, ripetizione e srcset ad alta risoluzione
• SVG come vettori modificabili
• Bordi (incluso un singolo lato di colore diverso), corner radius e ombre (interne, esterne e text-shadow)
• Opacità, blend mode, blur e backdrop-blur
• Rotazione e scala CSS, filter: grayscale/opacity
• ::before e ::after, clip-path, mask-image
• Campi dei moduli, marcatori di elenco disegnati come in Chrome, contatori CSS, apice e pedice
• Shadow DOM e corretto ordine z-index

Cosa arriva come immagine

Alcuni contenuti non possono essere rappresentati come layer. Iframe (come le mappe incorporate), video senza poster, canvas WebGL o 3D ed elementi object/embed vengono acquisiti come screenshot del solo riquadro. Il resto della pagina resta modificabile. Il confronto HTML to canvas spiega perché.

Non ancora supportato

• Trasformazioni skew e 3D
• Clip-path con path()
• Maschere a più livelli
• Colori Display-P3

Consigli per risultati puliti

Alcune abitudini fanno una differenza evidente:

1. Attiva "Hide cookie banners & popups" per i siti di marketing. Altrimenti una finestra di consenso potrebbe coprire la tua sezione hero.
2. Usa l'estensione Chrome per le pagine autenticate. Un server non può accedere al posto tuo; il tuo browser ha già effettuato l'accesso.
3. Acquisisci gli stati di proposito. Apri prima il menu o compila il modulo nel browser, poi acquisisci con l'estensione.
4. Seleziona un singolo elemento quando ti serve solo un componente, come una card dei prezzi o una barra di navigazione. Le acquisizioni più piccole si ripuliscono più in fretta.
5. Usa Extra wait (Pro) sulle pagine che caricano i contenuti in ritardo.
6. Aggiungi un Reference screenshot (Pro) quando devi dimostrare che l'importazione corrisponde alla pagina online: è un layer nascosto e bloccato che puoi attivare per il confronto.
7. Importa un responsive set invece di tre importazioni separate. È un'unica importazione e i frame restano insieme.
8. Usa Import linked pages dopo la prima importazione per scegliere altre pagine dello stesso sito: arrivano come importazione Multiple.
9. Reimporta con un clic quando la pagina online cambia. L'URL sorgente è memorizzato sul frame.

Risolvere i font mancanti

I font mancanti sono il motivo più comune per cui una pagina importata sembra "strana". Il sito potrebbe usare un carattere con licenza o un webfont che non hai installato localmente.

HTML to Frames gestisce questo aspetto prima di costruire i layer:

1. Dopo l'acquisizione, una schermata Missing fonts elenca ogni famiglia usata dalla pagina che Figma non trova.
2. Per ciascuna, il plugin suggerisce una sostituzione. Puoi accettarla o scegliere un altro font.
3. Le tue scelte vengono ricordate per ogni sito (o per tutti i siti, se preferisci), così l'importazione successiva dallo stesso dominio non te lo chiede più.

La mappatura dei font è disponibile con ogni piano. I font vengono elencati solo localmente; il plugin non legge il contenuto del tuo file Figma. Se prevedi di lavorare sul design a lungo, installare il carattere effettivamente usato dal sito resta l'opzione più precisa.

Dove andare da qui

Convertire HTML in Figma è il primo passo. Il valore sta in ciò che fai con i layer:

• Stai pianificando un redesign? Leggi il flusso di lavoro HTML to design.
• Lavori con pagine generate dall'AI? Vedi AI to Figma e la nostra guida Dalla UI generata dall'AI a Figma via MCP.
• Ti servono localhost o pagine con login? Inizia dall'estensione Chrome.
• Stai confrontando strumenti? La nostra pagina delle alternative presenta le opzioni in modo equo.

Quando sei pronto, ottieni il plugin e provalo sulla pagina su cui stai lavorando adesso. La documentazione descrive ogni opzione nel dettaglio.