Documentazione di HTML to Frames

1. Apri Figma (app desktop o browser) e vai alla pagina Community di HTML to Frames.
2. Fai clic su Open in… o Try it out e scegli un file. Il plugin viene salvato nel tuo account.
3. Le volte successive, avvialo dal menu: Plugins → HTML to Frames, oppure premi ⌘/ (Ctrl / su Windows) e digita HTML to Frames.

Il plugin funziona nei file Figma Design. Non serve un account: il piano Free si attiva automaticamente e Pro si acquista direttamente in Figma.

1. Nella scheda Import, lascia la sorgente su Link e incolla un URL, per esempio la tua homepage.
2. In Screens (schermate), Desktop è selezionato e mostra Site width: il plugin misurerà la larghezza di design reale della pagina durante l'importazione. Con Pro, fai clic su Responsive set per aggiungere Tablet e Mobile.
3. Lascia attivo Auto Layout. Fai clic su Import.
4. Segui l'avanzamento: la pagina viene renderizzata, le immagini preparate, i layer costruiti e l'Auto Layout applicato e verificato.
5. La schermata dei risultati mostra il numero di frame e layer, la quota di frame con Auto Layout, i font mancanti ed eventuali avvisi.

La pagina compare sul canvas come una riga di frame con nomi come yoursite.com — Desktop (1920). Ogni testo, immagine e vettore è modificabile.

Link

Qualsiasi pagina pubblica. Le pagine che richiedono un login, che girano su localhost o in una rete privata non sono raggiungibili dal servizio di acquisizione: per queste usa l'estensione Chrome.

Multiple

Incolla fino a 10 link, uno per riga. Vengono importati uno dopo l'altro, ciascuno nella propria riga. Le pagine dello stesso sito condividono un'unica larghezza misurata, così risultano allineate.

Local file

Scegli un file HTML, una cartella del sito o un .zip (fino a 30 MB). Per le cartelle, scegli quali pagine importare. Puoi anche selezionare Paste code (incolla codice) e incollare HTML con CSS inline o incorporato. I file vengono aperti dalla memoria in un browser isolato ed eliminati subito dopo l'importazione.

Browser

Incolla un'acquisizione fatta con l'estensione Chrome di HTML to Frames (⌘V), trascina un file .h2f, oppure collega l'estensione una volta e usa Send to Figma. Vedi Estensione Chrome.

Strumenti AI

Collega un client MCP nella scheda AI e lascia che il tuo strumento AI invii le pagine. Vedi Strumenti AI (MCP).

Site width viene misurata al momento dell'importazione: i layout con sezioni da bordo a bordo vengono inseriti in un frame da 1920 con il contenitore del contenuto centrato; i siti davvero boxed usano la larghezza del loro contenitore (per esempio 1200 o 1280); i layout fluidi usano 1440. Free importa una schermata per pagina; Pro e Team fino a quattro. Tutte le schermate di una pagina contano come un'importazione.

Prima della costruzione, il plugin controlla quali font della pagina non sono disponibili in Figma sul tuo computer. La schermata Missing fonts suggerisce una sostituzione per ciascuno: prima una famiglia che inizia con la stessa parola, poi il primo font installato dello stack di font CSS, infine Inter. Se vuoi, cerca e scegli un'altra famiglia, poi decidi se ricordare la scelta per questo sito o per tutti i siti. Skip usa i suggerimenti una volta sola senza salvarli. Cancella le scelte salvate con forget saved sotto l'opzione.

Con Styles & variables attivo (Pro):

• I colori usati almeno due volte, e quelli che corrispondono alle custom property CSS del sito, diventano variabili in una collezione chiamata Colors · yoursite.com. I nomi vengono dai token del sito quando possibile (--brand-primary → brand/primary), altrimenti da tinta e tonalità (blue/500).
• La tipografia usata almeno due volte, o da 20 px in su, diventa stili di testo con nomi come yoursite.com/Heading/32/40 Bold.
• Le ombre ripetute diventano stili di ombra sm, md, lg, xl.
• Se il tuo file contiene già una variabile o uno stile con lo stesso valore, viene riutilizzato.

Snap to my file's styles fa un passo in più e mappa i valori quasi identici sul tuo design system.

Con Components & hover states attivo, le strutture ripetute diventano componenti inseriti in un frame Components · yoursite.com accanto alla pagina, e ogni occorrenza diventa un'istanza con i propri testi e immagini. Gli elementi con uno stato hover diventano component set con le varianti State=Default e State=Hover.

Scegli Color scheme → Light + Dark (Pro). La pagina viene letta due volte, con prefers-color-scheme: light e dark, senza ricaricarla. Ogni colore che cambia diventa una variabile con un valore Light e uno Dark, e accanto a ogni schermata viene inserita una sua copia scura con la collezione impostata su Dark. I file Figma con piano Starter consentono una sola modalità per collezione; in quel caso il plugin ti avvisa che la modalità scura è stata saltata. I siti che cambiano tema solo con un interruttore JavaScript (e non con l'impostazione di sistema) vengono importati nel loro tema predefinito.

• I link continuano a funzionare in modalità Present: i link esterni aprono il loro URL; i link a pagine che hai importato a loro volta diventano interazioni Navigate.
• Gli header fixed e sticky restano al loro posto mentre scorri; caroselli orizzontali e aree a scorrimento scorrono.
• Dopo un'importazione, Import linked pages (importa pagine collegate) elenca le altre pagine dello stesso sito trovate nella pagina. Spunta quelle che vuoi e verranno importate come importazione Multiple con le stesse impostazioni.
• Seleziona un frame importato e fai clic su Re-import per ottenere una versione aggiornata dall'URL sorgente memorizzato.

Usa l'estensione Chrome gratuita di HTML to Frames per le pagine che il servizio di acquisizione non può raggiungere: pagine con login, localhost, intranet e lo stato esatto di una pagina (un menu a tendina aperto, un modulo compilato).

1. Installa l'estensione e fissala nella barra degli strumenti.
2. Apri la pagina e fai clic sull'estensione → Capture this page (acquisisci questa pagina), oppure Select an element (seleziona un elemento) per acquisirne solo una parte (muovi il mouse, ↑ per il genitore, ↓ per tornare indietro, Invio per scegliere, Esc per annullare).
3. L'acquisizione viene copiata negli appunti (o scaricata come file .h2f).
4. In Figma, apri il plugin → scheda Browser → premi ⌘V o trascina il file.

Send to Figma: nella scheda Browser del plugin fai clic su Connect per ottenere un codice monouso e inseriscilo nell'estensione in Connect to Figma. Da quel momento il pulsante principale è Send to Figma e le acquisizioni arrivano direttamente nel tuo plugin aperto.

L'estensione acquisisce una schermata alla larghezza attuale della finestra: ridimensiona la finestra per i layout tablet o mobile. Ogni acquisizione conta come un'importazione.

1. Apri il plugin → scheda AI → Connect an AI tool (collega uno strumento AI). Viene creato un token personale, mostrato una sola volta.
2. Copia la configurazione per il tuo client: Claude Code (un comando claude mcp add), Claude Desktop (una configurazione con mcp-remote) o Cursor & others (JSON con URL e header).
3. Tieni il plugin aperto in Figma e chiedi al tuo strumento AI di importare una pagina, per esempio: “Crea una pagina prezzi con tre piani e inviala a Figma con HTML to Frames.”

Strumenti disponibili: import_html (HTML fino a 2 MB, nome e schermate opzionali), import_url (qualsiasi URL pubblico) e import_status. L'importazione viene eseguita nel tuo plugin con il tuo piano e lo strumento riceve un riepilogo: frame, layer, quota di Auto Layout e font mancanti. Create a new token invalida quello precedente; Disconnect lo rimuove. I connettori web di claude.ai non sono ancora supportati.

Un'importazione = una pagina con tutte le sue schermate. I contatori si azzerano ogni mese (UTC). Se una pagina molto lunga viene tagliata da un limite del piano, il frame riceve una striscia viola Capture limit, così lo sai sempre. Acquista Pro nella scheda Plan con il checkout di Figma; i membri Team inseriscono la loro chiave di licenza nella stessa scheda e possono rimuoverla da un account per liberare la postazione.

La pagina è diversa da come la vedo nel browser. Attiva Hide cookie banners & popups, prova Extra wait per le animazioni lente oppure usa l'estensione Chrome per acquisire esattamente ciò che vedi.

“This address can't be reached.” Il servizio di acquisizione apre solo indirizzi pubblici. Per localhost, staging dietro VPN o pagine con login, usa l'estensione Chrome.

Il testo va a capo in modo diverso. Di solito è una differenza di font: mappa il font mancante sulla famiglia giusta nella schermata Missing fonts.

Alcuni frame non hanno l'Auto Layout. È voluto, quando l'Auto Layout sposterebbe degli elementi. Apri l'elenco diagnostico nella schermata dei risultati per vedere il motivo (gap irregolari, sovrapposizioni, dimensione del testo).

Qualcosa è vuoto. Mappe, iframe e scene WebGL vengono acquisiti come immagini; se uno è ancora vuoto, probabilmente il contenuto richiedeva un'azione dell'utente o un login.

“Limit reached.” Hai usato le importazioni Free di questo mese. Si azzerano il giorno 1 (UTC), oppure passa a Pro per avere importazioni illimitate.

Ancora bloccato? Scrivi a [email protected] con l'URL e uno screenshot.