Pixel o layer
HTML to canvas: layer modificabili sul canvas di Figma
Le librerie di screenshot bitmap ti danno pixel. HTML to Frames porta la pagina sul tuo canvas di Figma come vettori, testi e frame che puoi modificare.
- Testo modificabile e vettori SVG, non un'immagine raster
- Riquadri canvas e WebGL reali mantenuti come immagine di quel riquadro
- Animazioni congelate per un frame pulito e coerente
In arrivo su Figma Community
"HTML to canvas" significa due cose diverse, ed è utile distinguerle prima di scegliere uno strumento. Gli sviluppatori spesso intendono html2canvas, la libreria JavaScript che percorre il DOM e dipinge un'approssimazione della pagina in un elemento <canvas>, oppure uno screenshot del browser che cattura i pixel visibili. I designer di solito intendono altro: portare una pagina web sul canvas di Figma per poterci lavorare.
Entrambi producono qualcosa che somiglia alla pagina, ma solo uno ti dà qualcosa su cui lavorare. Una bitmap, per quanto nitida, è una griglia di pixel colorati. Non puoi correggere un refuso, cambiare la dimensione di un font, ricolorare un pulsante o spostare una card in un nuovo layout. Puoi solo ritagliarla, scalarla e dipingerci sopra.
HTML to Frames, un plugin Figma di EUREKA!, prende alla lettera il secondo significato. Esegue il rendering della pagina in un browser reale, legge geometria e stili calcolati di ogni elemento e ricrea la pagina sul tuo canvas di Figma come layer nativi: frame che rispecchiano la struttura della pagina, testo modificabile con i suoi stili originali, SVG convertiti in vettori e immagini posizionate con il loro adattamento originale. Il layout viene convertito in Auto Layout dove può essere verificato, così il risultato risponde anche quando lo ridimensioni.
C'è un caso in cui i pixel sono la risposta giusta, e il plugin lo gestisce di proposito. Un vero elemento <canvas> o una scena WebGL non hanno un DOM interno da ricostruire, quindi quel riquadro arriva come immagine screenshot mentre il resto della pagina resta modificabile.
Per la versione estesa di questo confronto, leggi HTML to canvas o layer modificabili. Per vedere la conversione di base, inizia da HTML to Figma, oppure scopri cosa viene convertito nella pagina delle funzionalità.
Portare una pagina sul tuo canvas di Figma
- 01
Scegli da dove arriva la pagina
Un URL, un file o una cartella locale, HTML e CSS incollati, una scheda di Chrome o uno strumento AI via MCP.
- 02
Lascia che il browser la renderizzi
La pagina si carica in un browser isolato, le animazioni vengono congelate e il WebGL viene fermato dopo pochi fotogrammi.
- 03
Ottieni i layer sul canvas
Frame, testi, vettori e immagini vengono inseriti nella tua pagina Figma attuale, pronti da modificare.
Perché i layer battono una bitmap sul canvas
Il testo resta testo
Titoli e testo corrente arrivano come testo modificabile, con letter-spacing, line-height e stili misti intatti.
Gli SVG diventano vettori
Icone e loghi vengono convertiti in layer vettoriali modificabili che puoi ricolorare e ridimensionare senza sfocature.
Una struttura selezionabile
I frame annidati seguono la struttura della pagina, così puoi selezionare una singola card invece di ritagliare un'immagine.
Pixel solo dove servono
Iframe, video senza poster e riquadri canvas WebGL o 3D arrivano come immagine screenshot di quel riquadro.
Acquisizione congelata e pulita
Le animazioni vengono messe in pausa per un frame coerente, così non ottieni elementi a metà dissolvenza.
Layer di riferimento
Con Pro, un layer screenshot nascosto e bloccato ti permette di confrontare la ricostruzione con i pixel originali.
html2canvas e screenshot o layer modificabili
Gli approcci basati su screenshot e HTML to Frames partono dalla stessa pagina renderizzata, ma arrivano in posti molto diversi.
| html2canvas / screenshot del browser | HTML to Frames sul canvas di Figma | |
|---|---|---|
| Risultato | Un'unica immagine raster | Frame, testi, vettori e immagini |
| Modifica del testo | Impossibile | Modifica diretta |
| Ridimensionamento | Sfoca oltre 1x | I vettori restano nitidi |
| Layout | Pixel fissi | Auto Layout dove verificato, constraint altrove |
| Selezione di un elemento | Ritaglio a mano | Clic sul frame |
| Uso tipico | Segnalazioni di bug, miniature, anteprime | Redesign, audit, handoff, design system |
html2canvas, inoltre, reimplementa il rendering CSS in JavaScript, quindi può perdere funzionalità che il browser supporta. HTML to Frames legge i valori da un vero browser basato su Chromium dopo che ha eseguito il rendering, poi li mappa sulle proprietà di Figma: gradienti inclusi quelli conici e ripetuti, ombre, blend mode, blur e backdrop-blur, clip-path, mask-image e altro.
Gli screenshot hanno comunque il loro posto. Se ti serve una rapida documentazione visiva, una bitmap va benissimo. Se intendi modificare qualcosa, i layer ti evitano di ridisegnare la pagina.
Una regola pratica utile: se il passo successivo è un commento o un ticket, basta uno screenshot. Se il passo successivo è aprire Figma e cambiare qualcosa, importa i layer.
Cosa succede a un vero elemento <canvas> o WebGL
Alcuni contenuti di una pagina sono già pixel. Un elemento <canvas> disegna con JavaScript e una scena WebGL esegue il rendering di grafica 3D sulla GPU. Dentro questi riquadri non c'è un DOM da leggere, quindi nessuno strumento può trasformarli in layer vettoriali significativi.
HTML to Frames li gestisce in modo esplicito invece di fallire in silenzio:
- Il riquadro viene acquisito come immagine screenshot nella sua posizione e dimensione esatte.
- Le scene WebGL vengono congelate dopo pochi fotogrammi, così ottieni un'immagine stabile e non un frame vuoto o a metà transizione.
- Tutto ciò che sta intorno al riquadro, come titoli, pulsanti e overlay posizionati sopra, resta come layer modificabili.
La stessa regola vale per gli altri contenuti incorporati che non possono diventare layer: iframe come le mappe, video senza immagine poster ed elementi object o embed. Ognuno diventa un'immagine del proprio riquadro e la schermata dei risultati elenca eventuali avvisi.
In pratica, una landing page con una hero 3D si converte comunque in un design utilizzabile. Puoi sostituire l'immagine della hero con un nuovo visual, riscrivere il testo sopra e regolare le spaziature, mentre il resto della pagina mantiene il suo Auto Layout. Scopri come viene ricavato quel layout in Auto Layout spiegato.
Ottenere un frame pulito da una pagina in movimento
Le pagine moderne si muovono: i caroselli ruotano, gli elementi compaiono in dissolvenza durante lo scroll, i banner dei cookie scorrono verso l'alto e le hero si animano al caricamento. Un'acquisizione ingenua congela qualunque cosa stesse accadendo in quel millisecondo.
HTML to Frames acquisisce la pagina come la vede un normale visitatore, con alcuni controlli per rendere il risultato prevedibile:
Animazioni congelate
Le animazioni vengono congelate, così l'acquisizione mostra ogni elemento nel suo stato finale invece che a metà di una transizione.
Hide cookie banners & popups
Attiva questa opzione e i banner del consenso e i popup vengono nascosti prima dell'acquisizione, così non coprono la pagina sul tuo canvas.
Extra wait
Alle pagine lente che caricano i contenuti in ritardo si può concedere più tempo prima dell'acquisizione. Extra wait è un'opzione Pro.
Full page
Acquisisci l'intera pagina a scorrimento o solo la prima schermata, a seconda di ciò che ti serve.
Queste opzioni valgono sia che la pagina arrivi da un URL, da un file locale o dall'estensione Chrome. L'estensione è la scelta giusta quando vuoi uno stato specifico, come un menu aperto, invece della vista predefinita.
Se qualcosa viene ancora acquisito a metà animazione o manca, la schermata dei risultati elenca gli avvisi, e un Re-import in un clic con un'opzione diversa è di solito la soluzione più rapida.
Domande frequenti
No. html2canvas è una libreria JavaScript che dipinge un'approssimazione del DOM in una bitmap. HTML to Frames è un plugin Figma che ricostruisce la pagina sul canvas di Figma come layer modificabili: frame, testi, vettori e immagini, con Auto Layout dove può essere verificato.
Sì. Il testo arriva come layer di testo Figma nativi, inclusi stili misti nello stesso paragrafo, link, letter-spacing, line-height e text-transform. Se un font non è disponibile, una schermata Missing fonts ti permette di scegliere una sostituzione prima che la pagina venga costruita, e la tua scelta viene ricordata.
Non hanno un DOM interno da ricostruire, quindi ognuno di questi riquadri arriva come immagine screenshot nella sua posizione e dimensione esatte. Il WebGL viene congelato dopo pochi fotogrammi per dare un'immagine stabile. Tutto ciò che sta intorno al riquadro resta come layer modificabili.
Sì, con Pro. L'opzione Reference screenshot aggiunge un layer immagine nascosto e bloccato sotto l'importazione. Attivalo quando vuoi confrontare i layer ricostruiti con il rendering originale, e lascialo nascosto per il resto del tempo, così non ti intralcia.
Le animazioni vengono congelate e, se lo scegli, banner dei cookie e popup vengono nascosti, così l'acquisizione mostra una pagina stabile. Uno screenshot cattura qualunque cosa ci fosse sullo schermo in quel momento. Se ti serve uno stato specifico, come un menu aperto, usa l'estensione Chrome.
Gradienti lineari, radiali e conici, ombre interne ed esterne, text-shadow, opacità, blend mode, blur e backdrop-blur, clip-path, mask-image, rotazione e scala. Non sono ancora supportati trasformazioni skew e 3D, clip-path con path(), maschere a più livelli e colori Display-P3. L'elenco completo è nella pagina delle funzionalità.
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