Funzionalità
Il toolkit completo per convertire HTML in Figma
Da un singolo URL a un file Figma multipagina, responsive e pronto per il design system. Ecco tutto ciò che fa HTML to Frames, e come lo fa.
Importa da qualsiasi fonte
Cinque sorgenti coprono siti pubblici, file sul tuo computer, pagine che solo il tuo browser può vedere e codice scritto dall'AI.
Link
Incolla qualsiasi URL pubblico. La pagina viene renderizzata in un browser isolato, i contenuti lazy vengono fatti scorrere in vista e, se vuoi, banner dei cookie e popup vengono nascosti.
Importazione Multiple
Fino a 10 link per importazione, elaborati uno dopo l'altro. Ogni pagina diventa una propria riga di schermate. Incluso in ogni piano, senza bisogno di Pro.
File locali e codice incollato
Trascina un file HTML, l'intera cartella di un sito o un .zip e scegli quali pagine importare, oppure incolla direttamente HTML/CSS. I file vengono serviti dalla memoria ed eliminati al termine dell'importazione.
Estensione Chrome
Acquisisci dashboard con login, localhost, reti private e lo stato attuale della pagina. Scegli un singolo elemento o la pagina intera, poi incollalo o usa Send to Figma.
Strumenti AI via MCP
Collega Claude Code, Claude Desktop, Cursor o qualsiasi client MCP. Chiamano import_html o import_url e la pagina arriva nel tuo plugin aperto.
Importa pagine collegate e Re-import
Dopo un'importazione, scegli altre pagine dello stesso sito da un elenco. Aggiorna qualsiasi frame in seguito con Re-import in un clic.
Schermate fedeli al sito reale
Il design responsive è più di tre screenshot. HTML to Frames esegue il rendering di ogni larghezza separatamente, così ottieni i veri layout tablet e mobile.
Site width, misurata
Desktop si apre alla larghezza di design per cui il sito è stato costruito: 1920 con contenitore centrato per i layout a tutta larghezza, la larghezza del contenitore per i siti boxed, 1440 per quelli fluidi.
Responsive set
Desktop + Tablet 768 + Mobile 390 in un clic; Laptop 1280 e larghezze personalizzate con Pro. Le schermate vengono acquisite in parallelo.
Canvas ordinato
Una riga per pagina, schermate affiancate, frame con nomi come yoursite.com/pricing — Desktop (1920).
Un Auto Layout di cui fidarti
Il cuore di HTML to Frames. L'Auto Layout viene ricavato dalla geometria reale del browser, applicato e verificato: mai dato per scontato.
Pile, righe e griglie
Pile verticali e orizzontali, righe a capo, gap, padding e allineamento vengono ricavati dalla posizione misurata di ogni elemento figlio.
Significato responsive
I contenuti centrati restano centrati, le card uguali usano Fill, i contenitori con max-width restano al centro e gli elementi spaziatori si allungano: così i frame si ridimensionano come il sito.
Verificato entro 2 px
Dopo aver applicato l'Auto Layout, la posizione di ogni elemento figlio viene confrontata con il browser. Se si è spostata, si prova un piano più semplice; altrimenti il frame mantiene le posizioni esatte.
Constraint intelligenti
I frame che mantengono posizioni assolute ricevono constraint Stretch, Scale, Center o Min/Max, così il ridimensionamento continua a funzionare.
Diagnostica
La schermata dei risultati elenca perché ogni frame è rimasto assoluto (gap irregolari, sovrapposizioni, differenze di dimensione del testo), così niente resta un mistero.
Il design system, estratto
Trasforma colori, tipografia e UI ripetuta di un sito nei mattoncini di un design system Figma, oppure mappali sul tuo.
Variabili colore
Fino a 96 variabili colore in una collezione 'Colors · dominio', con i nomi delle custom property CSS del sito (per esempio --brand-primary → brand/primary).
Stili di testo e di ombra
Fino a 48 stili di testo nominati per ruolo e dimensione, più stili di ombra da sm a xl. Riempimenti, contorni e colori del testo sono collegati alle variabili.
Riutilizza, non duplicare
Se il tuo file ha già una variabile o uno stile con lo stesso valore, viene usato quello. Importare due volte lo stesso sito non crea nulla di nuovo.
Snap to my file's styles
I valori quasi identici si agganciano al colore e allo stile di testo più vicini del tuo design system, usando la distanza cromatica percettiva.
Componenti e varianti hover
Card, pulsanti e voci di menu ripetuti diventano componenti e istanze. Gli stati hover diventano varianti Default/Hover con un'interazione on-hover.
Light + Dark
La pagina viene letta negli schemi di colore chiaro e scuro e scritta in un'unica collezione con due modalità, più una copia scura di ogni schermata.
Fedeltà fin nei dettagli
Il CSS reale è disordinato. HTML to Frames gestisce i dettagli che rendono una pagina riconoscibile.
Testo
Stili misti nello stesso paragrafo, link, letter-spacing, line-height, text-transform, apice e pedice, contatori CSS e marcatori di elenco fedeli a Chrome.
Colore e riempimenti
Gradienti lineari, radiali e conici, inclusi stop in px e motivi ripetuti, blend mode, opacità, blur e backdrop blur, filtri in scala di grigi.
Forme ed effetti
SVG come vettori modificabili, border radius, ombre interne ed esterne, ombre del testo, bordi su un solo lato, ::before/::after, clip-path, mask-image, rotazione e scala.
Contenuti incorporati
Mappe, iframe, WebGL e video senza poster vengono acquisiti come immagine di quel riquadro, così niente resta vuoto.
Immagini
Sorgenti srcset ad alta risoluzione, object-fit, background-size e sfondi ripetuti.
Font
Una schermata Missing fonts (font mancanti) suggerisce le sostituzioni prima di costruire qualsiasi cosa e ricorda la tua scelta per quel sito.
Prototipo e flusso di lavoro
Le pagine importate sono pronte da navigare e facili da tenere aggiornate.
Link cliccabili
I link aprono il loro URL in modalità Present; i link tra pagine importate diventano interazioni Navigate.
Fixed, sticky e scroll
Gli header fixed e sticky restano al loro posto e le aree a scorrimento orizzontale, come i caroselli, scorrono nei prototipi.
Testo delle fisarmoniche come note
Opzionale: il testo nascosto nelle fisarmoniche chiuse viene aggiunto come annotazioni Figma, così nessun contenuto va perso.
Screenshot di riferimento
Un layer screenshot nascosto e bloccato sotto ogni schermata per i confronti al pixel (Pro).
Domande frequenti
Free include tutte le sorgenti di importazione, l'importazione Multiple fino a 10 link, la larghezza del sito misurata, l'Auto Layout con verifica, la mappatura dei font, i link del prototipo e gli screenshot dei contenuti incorporati, con 10 importazioni al mese e una schermata per importazione. Stili e variabili, componenti, Light + Dark, larghezze personalizzate e screenshot di riferimento sono funzionalità Pro.
Sì. Il plugin non legge direttamente le regole CSS per costruire il layout: usa la geometria misurata dal browser. I layout flexbox e grid diventano pile Auto Layout e righe a capo ovunque il risultato corrisponda al browser entro 2 px.
Sì, con Pro. Per le schermate a larghezza desktop il servizio di acquisizione forza lo stato hover su link e pulsanti, lo confronta con lo stato normale e crea varianti Default/Hover con un'interazione di prototipo on-hover. I menu aperti via JavaScript al passaggio del mouse non vengono acquisiti.
Trasformazioni skew e 3D, clip-path con path(), maschere a più livelli e colori Display-P3 non vengono ancora convertiti. Canvas incorporati, mappe e iframe diventano immagini del loro riquadro anziché layer.
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