HTML to canvas: screenshot bitmap o layer Figma modificabili

"HTML to canvas" è una di quelle espressioni che significano due cose diverse a seconda di chi cerca. Uno sviluppatore front-end di solito intende renderizzare un elemento DOM in un <canvas> HTML, il lavoro di librerie come html2canvas. Un designer di solito intende portare una pagina web sul canvas di Figma per poterci lavorare.

Entrambi partono dall'HTML. Entrambi finiscono su qualcosa che si chiama canvas. Ma i risultati sono profondamente diversi: uno è una griglia piatta di pixel, l'altro un albero di layer modificabili. Scegliere quello sbagliato fa perdere tempo, quindi conviene essere precisi.

Significato 1: da HTML a un <canvas> HTML (bitmap)

Come funziona

L'elemento HTML <canvas> è una superficie di disegno: un rettangolo di pixel su cui JavaScript può dipingere. Librerie come html2canvas percorrono il DOM, leggono gli stili calcolati e ridisegnano la pagina su un canvas usando la Canvas 2D API. Il risultato è una bitmap che puoi esportare come PNG o JPEG.

Approcci simili producono lo stesso tipo di risultato:

• Screenshot del browser: la funzione di screenshot del browser stesso, "Capture node screenshot" nei DevTools o gli screenshot di un browser headless.
• Trucchi con foreignObject SVG: incorporare HTML in un SVG, disegnarlo in un canvas, esportare i pixel.
• Servizi di screenshot lato server: un browser headless renderizza la pagina e restituisce un'immagine.

Quando una bitmap è la risposta giusta

Le bitmap sono davvero utili quando l'immagine stessa è il risultato da consegnare:

• Pulsanti "condividi come immagine": un grafico, una ricevuta, una card con una citazione.
• Test di regressione visiva che confrontano i pixel tra una build e l'altra.
• Miniature e immagini di anteprima per i social.
• Segnalazioni di bug che devono mostrare esattamente ciò che ha visto l'utente.
• Archiviazione dell'aspetto di una pagina in un dato momento.

In tutti questi casi nessuno ha bisogno di modificare il risultato. Basta guardarlo.

Limiti delle bitmap

Appena vuoi lavorare sulla pagina acquisita, i pixel diventano un ostacolo:

• Nessuna modifica. Non puoi cambiare un titolo, regolare un gap o sostituire un colore. Puoi solo dipingerci sopra.
• Nessun testo. Il testo è fatto di pixel. Non puoi selezionarlo, cercarlo, controllarne la dimensione o copiarlo in una specifica.
• Sfocate quando scalate. Una bitmap ha una risoluzione fissa. Ingrandisci, o metti un'acquisizione 1x su un display ad alta densità, e i bordi si ammorbidiscono.
• Nessuna struttura. Non ci sono frame, gerarchia o valori di spaziatura da ispezionare. Un pulsante e lo sfondo dietro di esso sono lo stesso layer.
• Nessuna responsività. Uno screenshot a 1440 resta sempre a 1440. Ti serve un'acquisizione separata per ogni larghezza, e nessuna può essere ridimensionata in modo sensato.
• Nessun design system. Colori e tipografia non possono diventare variabili o stili, e gli elementi ripetuti non possono diventare componenti.
• Lacune di fedeltà (nei ri-renderizzatori). Le librerie che ridisegnano il DOM su un canvas reimplementano il CSS in JavaScript, quindi le funzionalità CSS più recenti o meno comuni possono essere renderizzate diversamente rispetto al browser reale.

Significato 2: HTML sul canvas di Figma (layer modificabili)

Come funziona

In Figma, "il canvas" è lo spazio di lavoro infinito in cui vivono i tuoi frame. Portare HTML sul canvas di Figma significa convertire la pagina renderizzata in oggetti Figma nativi: frame, layer di testo, vettori e riempimenti immagine.

È ciò che fa HTML to Frames. Una pagina viene renderizzata in un browser reale, la sua geometria e i suoi stili calcolati vengono misurati e il plugin la ricostruisce in Figma come:

• frame annidati che rispecchiano la struttura della pagina, con Auto Layout dove può essere verificato,
• veri layer di testo con stili misti, letter-spacing, line-height e link,
• SVG come vettori modificabili,
• immagini come riempimenti immagine, rispettando object-fit e background-size,
• bordi, raggi, ombre, gradienti, blur e blend mode come proprietà native.

Il risultato è qualcosa che puoi modificare, ristilizzare, ridimensionare e trasformare in componenti: non un'immagine di una pagina, ma un file di design funzionante. La guida HTML to Figma descrive il flusso di importazione completo.

Quando i layer modificabili sono la risposta giusta

• Redesign che partono da un sito esistente.
• Audit di spaziature, tipografia e colori.
• Estrazione del design system: variabili colore, stili di testo e stili di ombra (Pro).
• Handoff e revisione di pagine costruite in codice, incluso localhost tramite l'estensione Chrome.
• Rifinitura di UI generate dall'AI importate via MCP: vedi AI to Figma.
• Lavoro responsive: Desktop, Tablet e Mobile da un'unica importazione.

Fianco a fianco

In breve: html2canvas ti dà pixel; HTML to Frames ti dà layer sul canvas di Figma.

Perché conta il rendering in un browser reale

Entrambi gli approcci dipendono innanzitutto da quanto fedelmente viene renderizzata la pagina. Le librerie che ridisegnano, come html2canvas, girano nella pagina e reimplementano in JavaScript l'impaginazione e il disegno CSS. Funziona bene per gli stili comuni, ma tutto ciò che la libreria non ha implementato, o implementa in modo leggermente diverso, si traduce in una discrepanza nell'immagine.

HTML to Frames segue un'altra strada. Le pagine pubbliche, i file locali e il codice incollato vengono renderizzati in un browser isolato e in sandbox, mentre le pagine acquisite con l'estensione Chrome provengono dal tuo browser. In entrambi i casi il plugin legge la geometria e gli stili calcolati che il browser ha effettivamente prodotto, poi li ricostruisce come oggetti Figma. Per questo i dettagli facili da sbagliare arrivano corretti:

• Marcatori di elenco disegnati come in Chrome, contatori CSS, apice e pedice.
• Gradienti: lineari, radiali e conici, inclusi stop in px e gradienti ripetuti o a motivo.
• Immagini ad alta risoluzione da srcset, nel rispetto di object-fit, background-size e ripetizione.
• Un singolo lato del bordo di colore diverso, ombre interne ed esterne e text-shadow.

La pagina viene inoltre acquisita come la vede un normale visitatore: su richiesta si possono nascondere banner dei cookie e popup, e le animazioni vengono congelate così il frame è pulito e non colto a metà transizione.

E le cose che sono davvero canvas?

Qui i due significati si incontrano. Alcune parti di una pagina web sono pixel per natura, e nessun convertitore può trasformarle in layer vettoriali significativi:

• scene WebGL e 3D disegnate in un <canvas>,
• disegni su canvas 2D come alcuni grafici o giochi,
• iframe, incluse le mappe incorporate,
• video senza immagine poster,
• elementi object ed embed.

HTML to Frames li gestisce in modo pragmatico: ognuno arriva come immagine screenshot del solo riquadro. L'immagine si trova nel posto giusto, alla dimensione giusta, all'interno di una pagina per il resto completamente modificabile. Il titolo della hero, la navigazione e le card restano veri layer; solo il visualizzatore 3D del prodotto o la mappa incorporata sono una bitmap.

Per i contenuti animati, l'acquisizione punta a un frame pulito e stabile: le animazioni vengono congelate e il WebGL viene fermato dopo pochi fotogrammi, così la scena ha il tempo di renderizzare qualcosa di significativo prima di essere acquisita.

Questo ibrido è di solito ciò che un designer vuole. Non riprogetti l'interno di una mappa incorporata: progetti la card che la contiene. Un segnaposto screenshot per l'elemento incorporato, più tutto il resto modificabile, è il risultato pratico.

Cosa non viene ancora convertito

Per completezza sui limiti: trasformazioni CSS skew e 3D, clip-path con path(), maschere a più livelli e colori Display-P3 non sono ancora supportati. Rotazione e scala CSS, forme clip-path singole, mask-image, blur e backdrop-blur invece sì. La pagina delle funzionalità riporta l'elenco completo.

Scegliere l'approccio giusto

Fatti una domanda: qualcuno modificherà il risultato?

1. No: serve per guardare, condividere o testare. Usa una bitmap. html2canvas o uno screenshot del browser sono più semplici e veloci.
2. Sì: serve per il lavoro di design. Usa layer modificabili sul canvas di Figma.
3. Per lo più sì, ma alcune parti sono mappe, video o 3D. Usa layer modificabili; quei riquadri arrivano automaticamente come immagini.

Qualche scenario pratico:

• "Mi serve un PNG di questo grafico per una slide." Bitmap.
• "Devo riprogettare la nostra pagina prezzi." Layer modificabili: importala, poi itera.
• "Voglio confrontare la produzione con il nostro mockup." Layer modificabili, con il Reference screenshot opzionale (Pro): un layer immagine nascosto e bloccato che puoi attivare per un confronto al pixel. È un bell'esempio dei due significati che lavorano insieme: una bitmap per verificare, i layer per lavorare.
• "Mi serve in Figma la dashboard con login." Layer modificabili tramite l'estensione Chrome, che acquisisce le pagine che il tuo browser può vedere, incluso il loro stato attuale.

Perché "fai solo uno screenshot" costa di più dopo

Gli screenshot sembrano più veloci perché l'acquisizione richiede pochi secondi. Il costo arriva dopo: quando inizia il vero lavoro di design, qualcuno deve ricostruire a mano ogni frame. Misurare il padding dai pixel, indovinare le dimensioni dei font, ridigitare i testi, ricreare i colori: si arriva a ore per pagina.

Convertire in layer modificabili sposta quel lavoro sullo strumento. Ottieni dimensioni misurate, testo reale e, con Pro, variabili, stili di testo e componenti generati dalla pagina stessa. Il flusso di lavoro HTML to design mostra come si presenta tutto questo in un redesign completo.

Nota sulla privacy

Qualunque approccio tu scelga, pensa a dove viene renderizzata la pagina. html2canvas gira nella pagina, nel browser dell'utente. HTML to Frames renderizza le pagine pubbliche in un browser isolato e in sandbox, consegna il risultato una sola volta e lo elimina dalla memoria senza scriverlo su disco; l'estensione Chrome gira nel tuo browser e non invia nulla a meno che tu non usi Send to Figma. I dettagli sono nella pagina sulla sicurezza.

Riepilogo

• HTML to canvas (bitmap) trasforma una pagina in pixel. Ottimo per condividere, testare e creare anteprime; non modificabile.
• HTML sul canvas di Figma trasforma una pagina in frame, testi e vettori con cui puoi lavorare.
• I contenuti che sono davvero un canvas (WebGL, mappe, iframe, video senza poster) vengono acquisiti come immagine di quel riquadro, mentre il resto resta modificabile.

Per vedere l'approccio basato sui layer sulla tua pagina, ottieni il plugin e inizia dalla documentazione, oppure leggi come il motore Auto Layout trasforma la struttura della pagina in frame.