Plugin Figma · Estensione Chrome · MCP
Qualsiasi pagina web, come veri layer Figma.
HTML to Frames converte URL online, HTML locale, schede di Chrome e codice generato dall'AI in frame Figma modificabili e responsive, con un Auto Layout verificato: il tuo design non si rompe mai.
Piano Free: 10 importazioni al mese. Nessun account, nessuna carta di credito.
In arrivo su Figma Community
- Auto Layout verificato
- Desktop · Tablet · Mobile
- Variabili e stili
- Componenti e stati hover
Cinque modi per importare. Un risultato pulito.
- LinkIncolla qualsiasi URL pubblico.
- MultipleFino a 10 link in un colpo solo, con ogni piano.
- Local fileFile HTML, cartella del sito, .zip o codice incollato.
- BrowserPagine con login, localhost, menu aperti.
- Strumenti AIClaude, Cursor e qualsiasi client MCP.
Come funziona
Da URL a frame in Auto Layout in quattro passaggi
Questo è il flusso reale del plugin: lo stesso pannello che userai in Figma.
yoursite.com — Desktop (1440)
Tablet (768)
Mobile (390)
3 frame importati
Auto Layout su 60 frame su 77 · 23 variabili colore · 19 stili di testo · 10 componenti
- 01
Incolla un link
Oppure trascina una cartella, incolla del codice, invia una scheda di Chrome o lascia che il tuo strumento AI invii una pagina.
- 02
Scegli le schermate
Desktop si apre alla larghezza di design reale del sito: misurata, non stimata. Aggiungi Tablet e Mobile con un clic.
- 03
Importa
Un browser isolato esegue il rendering della pagina come la vede un normale visitatore, nasconde i banner dei cookie e carica i contenuti lazy.
- 04
Modifica subito
Frame, testi, vettori e immagini arrivano con Auto Layout, variabili, stili di testo e componenti.
2 px
L'Auto Layout viene confrontato con il layout del browser con una tolleranza di 2 px.
86–97%
Quota di frame che hanno ricevuto l'Auto Layout sui siti reali che abbiamo testato.
10
Link in un'unica importazione Multiple, inclusa anche nel piano Free.
4
Schermate per importazione con Pro: Desktop, Laptop, Tablet e Mobile.
Numeri dai nostri test su siti reali, non calcoli di marketing.
Il motore Auto Layout
Un Auto Layout che non rompe mai il tuo design
La maggior parte dei convertitori indovina un layout e spera. HTML to Frames prima costruisce la pagina al pixel, poi lavora dall'interno verso l'esterno: ricava pile, righe a capo, gap, padding e allineamento dalla geometria misurata dal browser, applica l'Auto Layout e controlla la posizione di ogni elemento figlio. Se qualcosa si sposta di più di 2 px, prova un piano più semplice; se fallisce anche quello, il frame mantiene le posizioni esatte con constraint sensati. La schermata dei risultati ti dice perfino perché un frame è rimasto in posizionamento assoluto.
- I contenuti centrati diventano Center; le card uguali diventano Fill
- I contenitori con max-width restano centrati quando ridimensioni
- I frame assoluti ricevono constraint Stretch, Scale, Center o Min/Max
- Un elenco diagnostico spiega ogni frame rimasto in posizionamento assoluto
Funzionalità
Tutto quello che altrimenti ricostruiresti a mano
HTML to Frames legge la pagina come la impagina un browser, poi scrive i layer Figma come li costruirebbe un designer.
Auto Layout verificato
Righe, pile e griglie diventano Auto Layout. Ogni frame viene controllato dopo l'applicazione: se non corrisponde, la modifica viene annullata.
Responsive set
Desktop, Tablet e Mobile in un'unica importazione, acquisiti in parallelo e affiancati.
Larghezza del sito misurata
Desktop si apre alla larghezza di design reale della pagina: 1920 per i layout a tutta larghezza, la larghezza del contenitore per i siti boxed.
Variabili e stili
I colori diventano variabili con i nomi dei token CSS del sito; tipografia e ombre diventano stili. Quelli esistenti vengono riutilizzati.
Componenti e hover
Card, pulsanti e voci di menu ripetuti diventano componenti con istanze; gli stati hover diventano varianti.
Modalità Light + Dark
Un'importazione, due modalità: una collezione di variabili con valori Light e Dark e una copia scura di ogni schermata.
Pronto per il prototipo
I link restano cliccabili, le pagine importate sono collegate tra loro, header fissi e aree di scorrimento funzionano in Present.
Mappatura dei font
Font mancanti? Scegli le sostituzioni una volta sola: vengono ricordate per ogni sito.
Privacy by design
I risultati vengono consegnati una sola volta e mai scritti su disco. I file caricati vengono eliminati al termine dell'importazione.
Pensato per i design system
Importazioni che si agganciano al tuo design system
I colori usati più di una volta diventano variabili, con i nomi delle custom property CSS del sito quando esistono, come brand/primary. La tipografia diventa stili di testo, le ombre ripetute diventano stili di ombra. Con Snap to my file's styles (aggancia agli stili del mio file), colori e testi quasi identici ai tuoi vengono mappati sulle tue variabili e sui tuoi stili, così l'importazione sembra costruita nel tuo file.
- Fino a 96 variabili colore e 48 stili di testo per sito
- Riutilizza variabili e stili già presenti nel tuo file
- Light + Dark acquisiti in un'unica collezione con due modalità
- Componenti con varianti Default / Hover e interazioni on-hover
Pensato per chi lavora tra il web e Figma
Product e UI designer
Inizia un redesign dal sito reale, non da uno screenshot. Analizza spaziature, tipografia e colori in pochi secondi.
Agenzie di design
Porta il sito attuale di un cliente in Figma e prepara la proposta in giornata. Piano Team per cinque postazioni.
Team di design system
Trova ogni colore e stile tipografico che un prodotto usa davvero, mappato sulle tue variabili.
Sviluppatori front-end
Consegna ai designer il lavoro in localhost o staging come frame Figma modificabili.
Chi crea con l'AI
Invia la UI da Claude Code, Claude Desktop o Cursor direttamente nel tuo file Figma.
Studenti
Smonta i grandi siti web layer per layer e impara come sono costruiti.
I layer modificabili battono screenshot e ricostruzioni
| Screenshot | Ricostruzione manuale | HTML to Frames | |
|---|---|---|---|
| Testo modificabile | No | Sì | Sì |
| Auto Layout | No | Sì, a mano | Sì, verificato |
| Variabili e stili | No | A mano | Generati o riutilizzati |
| Tablet e mobile | Acquisizioni separate | Ore di lavoro in più | Un'importazione |
| Tempo per una pagina | Secondi | Ore | Da pochi secondi a un minuto |
Prezzi onesti, sconto di lancio incluso
Inizia gratis. Pro è illimitato a $7 al mese al lancio, e i primi clienti mantengono quel prezzo.
- 10 importazioni al mese
- 1 schermata per importazione
- Importazione Multiple: fino a 10 link
- Link, file locali, estensione Chrome, strumenti AI
- Auto Layout verificato
- Larghezza del sito misurata
- Mappatura dei font
- Link del prototipo
Pro
Prezzo di lancioImportazioni illimitate e il toolkit completo, da acquistare in Figma.
- Importazioni illimitate (uso corretto 1.000 / mese)
- Fino a 4 schermate per importazione
- Stili e variabili
- Snap to my file's styles
- Componenti e varianti hover
- Modalità variabili Light + Dark
- Larghezze personalizzate
- Layer dettagliati, screenshot di riferimento, attesa extra
Team
5 postazioniTutto ciò che c'è in Pro per tutto il tuo team, con una sola chiave di licenza.
- Tutto ciò che c'è in Pro
- 5 postazioni su una chiave di licenza
- Importazioni illimitate (uso corretto 5.000 / mese)
- Le postazioni si possono spostare tra le persone
Le tue pagine non sono dati nostri
Le pagine vengono renderizzate in un browser isolato e in sandbox. Il risultato viene consegnato al tuo plugin una sola volta, poi eliminato: mai scritto su disco. I file caricati vengono cancellati appena termina l'importazione. Niente cookie, niente analytics, niente pubblicità.
CSS to Figma Auto Layout: guida a flexbox e grid in Figma
Flexbox e l'Auto Layout di Figma si somigliano, ma non sono lo stesso modello. Questa guida tecnica mappa le proprietà CSS sulle impostazioni dell'Auto Layout, spiega perché la verifica è importante e mostra come scrivere CSS che si importa in modo pulito.
10 min di letturalocalhost to FigmaLocalhost to Figma: acquisire pagine con l'estensione Chrome
Alcune pagine non si raggiungono con un'importazione da URL: la tua build in localhost, una dashboard protetta da login, un menu aperto in questo momento. L'estensione Chrome gratuita di HTML to Frames le acquisisce dal tuo browser e le trasforma in layer Figma modificabili.
9 min di letturaAI to FigmaAI to Figma: inviare la UI di Claude e Cursor a Figma via MCP
Gli strumenti di coding con AI possono costruire una UI funzionante in pochi minuti, ma i designer ne hanno comunque bisogno in Figma. Ecco come collegare Claude Code, Claude Desktop o Cursor a HTML to Frames via MCP e ottenere layer modificabili invece di screenshot.
9 min di letturaDomande frequenti
È un plugin Figma che converte le pagine web in veri layer Figma modificabili. Puoi importare un URL online, fino a 10 link alla volta, un file HTML locale o la cartella di un sito, codice incollato, una scheda acquisita con l'estensione Chrome oppure HTML inviato da uno strumento AI tramite MCP. Le pagine arrivano come frame con testi, vettori e immagini, con Auto Layout, variabili, stili e componenti.
No. Ogni titolo è un layer di testo modificabile, ogni icona è un vettore e ogni sezione è un frame. Solo i contenuti che non sono HTML (una mappa in un iframe, una scena WebGL o un video senza poster) vengono inseriti come immagine di quel riquadro, così il resto della pagina resta completamente modificabile.
Il plugin applica l'Auto Layout e poi verifica la posizione di ogni elemento figlio rispetto al layout del browser, con una tolleranza di 2 px. Se un frame non regge, prova un layout più semplice oppure mantiene le posizioni assolute con i constraint. Nei nostri test su siti reali, l'86–97% dei frame ha ricevuto l'Auto Layout; gli altri sono elencati con il motivo.
Sì, con l'estensione Chrome gratuita di HTML to Frames. Acquisisce la scheda nel tuo browser, comprese dashboard con login, localhost, reti private, menu aperti e moduli compilati, e la invia al plugin tramite gli appunti o con Send to Figma.
Desktop alla larghezza di design misurata del sito, Laptop 1280, Tablet 768 e Mobile 390, più larghezze personalizzate con Pro. Il Responsive set importa Desktop, Tablet e Mobile con un clic. Free include una schermata per importazione; Pro e Team fino a quattro.
Free ti dà 10 importazioni al mese. Pro è illimitato (con uso corretto) a $7 al mese al lancio, $9 a prezzo pieno, e si acquista direttamente in Figma. Team costa $22 al mese al lancio, $29 a prezzo pieno, per cinque postazioni con una chiave di licenza condivisa. Un'importazione corrisponde a una pagina con tutte le sue schermate.
Vengono renderizzate in un browser isolato, consegnate una sola volta al tuo plugin e poi eliminate dalla memoria: mai scritte su disco. I file caricati vengono rimossi al termine dell'importazione. Il plugin non legge il tuo file Figma e non riceviamo da Figma né il tuo nome né la tua email.
Sì. Collega Claude Code, Claude Desktop, Cursor o un altro client MCP dalla scheda AI del plugin. Il tuo strumento AI potrà chiamare import_html o import_url e la pagina arriverà nel tuo file Figma aperto, importata con il tuo piano.
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