HTML to canvas : capture bitmap ou calques Figma modifiables

« HTML to canvas » fait partie de ces expressions qui changent de sens selon la personne qui cherche. Un développeur front-end pense généralement au rendu d'un élément du DOM dans un <canvas> HTML — le rôle de bibliothèques comme html2canvas. Un designer pense généralement à placer une page web sur le canvas Figma pour pouvoir travailler dessus.

Les deux partent du HTML. Les deux aboutissent sur quelque chose qu'on appelle un canvas. Mais les résultats sont fondamentalement différents : l'un est une grille plate de pixels, l'autre un arbre de calques modifiables. Se tromper coûte du temps, mieux vaut donc être précis.

Sens 1 : du HTML vers un <canvas> HTML (bitmaps)

Comment ça marche

L'élément HTML <canvas> est une surface de dessin : un rectangle de pixels sur lequel JavaScript peut peindre. Des bibliothèques comme html2canvas parcourent le DOM, lisent les styles calculés et redessinent la page dans un canvas à l'aide de l'API Canvas 2D. Le résultat est une image bitmap que vous pouvez exporter en PNG ou en JPEG.

Des approches voisines produisent le même type de résultat :

• Les captures d'écran du navigateur — la fonction de capture du navigateur, la commande « Capture node screenshot » des DevTools, ou les captures en navigateur headless.
• Les astuces SVG foreignObject — intégrer du HTML dans un SVG, le dessiner dans un canvas, exporter les pixels.
• Les services de capture côté serveur — un navigateur headless rend la page et renvoie une image.

Quand une image bitmap est la bonne réponse

Les bitmaps sont réellement utiles quand l'image elle-même est le livrable :

• Les boutons « partager en image » — un graphique, un reçu, une carte de citation.
• Les tests de régression visuelle qui comparent les pixels d'un build à l'autre.
• Les vignettes et images d'aperçu pour les réseaux sociaux.
• Les rapports de bugs qui doivent montrer exactement ce que l'utilisateur a vu.
• L'archivage de l'apparence d'une page à un instant donné.

Dans tous ces cas, personne n'a besoin de modifier le résultat. Il suffit de le regarder.

Les limites des bitmaps

Dès que vous voulez travailler sur la page capturée, les pixels deviennent un obstacle :

• Aucune modification. Impossible de changer un titre, d'ajuster un espacement ou de remplacer une couleur. Vous pouvez seulement peindre par-dessus.
• Pas de texte. Le texte n'est que des pixels. Impossible de le sélectionner, de le rechercher, de vérifier sa taille de police ou de le copier dans une spécification.
• Flou à l'agrandissement. Un bitmap a une résolution fixe. Zoomez, ou placez une capture 1x sur un écran haute densité, et les contours s'adoucissent.
• Aucune structure. Pas de frames, pas de hiérarchie, pas de valeurs d'espacement à inspecter. Un bouton et l'arrière-plan derrière lui forment le même calque.
• Aucun responsive. Une capture en 1440 restera toujours en 1440. Il faut une capture distincte par largeur, et aucune ne peut être redimensionnée de façon pertinente.
• Aucun design system. Les couleurs et la typographie ne peuvent pas devenir des variables ou des styles, et les éléments répétés ne peuvent pas devenir des composants.
• Des écarts de fidélité (pour les outils qui redessinent). Les bibliothèques qui redessinent le DOM dans un canvas réimplémentent le CSS en JavaScript : les fonctionnalités CSS récentes ou moins courantes peuvent s'afficher différemment du vrai navigateur.

Sens 2 : du HTML sur le canvas Figma (calques modifiables)

Comment ça marche

Dans Figma, « le canvas » est l'espace de travail infini où vivent vos frames. Placer du HTML sur le canvas Figma signifie convertir la page rendue en objets Figma natifs : frames, calques de texte, vecteurs et remplissages d'image.

C'est ce que fait HTML to Frames. Une page est rendue dans un vrai navigateur, sa géométrie et ses styles calculés sont mesurés, et le plugin la reconstruit dans Figma sous forme de :

• frames imbriqués qui reflètent la structure de la page, avec Auto Layout là où il peut être vérifié,
• vrais calques de texte avec styles mixtes, letter-spacing, line-height et liens,
• SVG en vecteurs modifiables,
• images en remplissages d'image, en respectant object-fit et background-size,
• bordures, rayons, ombres, dégradés, flou et modes de fusion en propriétés natives.

Le résultat est quelque chose que vous pouvez modifier, restyler, redimensionner et transformer en composants — pas une image de page, mais un vrai fichier de design. Le guide HTML to Figma détaille le parcours d'import complet.

Quand les calques modifiables sont la bonne réponse

• Les refontes qui partent d'un site existant.
• Les audits d'espacements, de typographie et de couleurs.
• L'extraction d'un design system — variables de couleur, styles de texte et styles d'ombre (Pro).
• Le handoff et la relecture de pages construites en code, y compris en localhost via l'extension Chrome.
• L'affinage d'une UI générée par IA importée via MCP — voir AI to Figma.
• Le travail responsive — Desktop, Tablet et Mobile en un seul import.

Côte à côte

En bref : html2canvas vous donne des pixels ; HTML to Frames vous donne des calques sur le canvas Figma.

Pourquoi le rendu dans un vrai navigateur compte

Les deux approches dépendent avant tout de la fidélité du rendu de la page. Les bibliothèques qui redessinent, comme html2canvas, s'exécutent dans la page et réimplémentent la mise en page et le rendu CSS en JavaScript. Cela fonctionne bien pour les styles courants, mais tout ce que la bibliothèque n'a pas implémenté — ou implémente un peu différemment — se traduit par un écart dans l'image.

HTML to Frames emprunte une autre voie. Les pages publiques, les fichiers locaux et le code collé sont rendus dans un navigateur isolé et cloisonné (sandbox), et les pages capturées avec l'extension Chrome proviennent de votre propre navigateur. Dans les deux cas, le plugin lit la géométrie et les styles calculés que le navigateur a réellement produits, puis les reconstruit en objets Figma. C'est pourquoi les détails faciles à rater sont restitués correctement :

• Les puces de liste dessinées comme dans Chrome, les compteurs CSS, les exposants et indices.
• Les dégradés — linéaires, radiaux et coniques, y compris les arrêts en px et les dégradés répétés ou en mosaïque.
• Les images haute résolution issues de srcset, en respectant object-fit, background-size et la mosaïque.
• Une bordure sur un seul côté d'une couleur différente, les ombres internes et externes, et text-shadow.

La page est aussi capturée telle que la voit un visiteur normal : les bannières de cookies et popups peuvent être masqués sur demande, et les animations sont figées pour obtenir un frame propre plutôt qu'une image prise en pleine transition.

Et ce qui est réellement un canvas ?

C'est là que les deux sens se rejoignent. Certaines parties d'une page web sont des pixels par nature, et aucun convertisseur ne peut les transformer en calques vectoriels pertinents :

• Les scènes WebGL et 3D dessinées dans un <canvas>,
• Les dessins sur canvas 2D, comme certains graphiques ou jeux,
• Les iframes, y compris les cartes intégrées,
• Les vidéos sans image d'aperçu,
• Les éléments object et embed.

HTML to Frames les traite de façon pragmatique : chacun arrive sous forme de capture d'écran de ce bloc uniquement. L'image se trouve au bon endroit, à la bonne taille, au sein d'une page par ailleurs entièrement modifiable. Le titre de votre hero, la navigation et les cartes restent de vrais calques ; seuls la visionneuse produit 3D ou la carte intégrée sont des bitmaps.

Pour le contenu animé, la capture vise un frame propre et stable : les animations sont figées, et le WebGL est figé après quelques images pour que la scène ait le temps d'afficher quelque chose de significatif avant d'être capturée.

Ce mode hybride est généralement ce que veut un designer. On ne redessine pas l'intérieur d'une carte intégrée ; on dessine la carte de contenu qui l'entoure. Une capture tenant lieu de l'élément intégré, plus tout le reste modifiable : voilà le résultat pratique.

Ce qui n'est pas encore converti

Pour être complet sur les limites : les transformations CSS skew et 3D, les clip-paths path(), les masques multicouches et les couleurs Display-P3 ne sont pas encore pris en charge. La rotation et la mise à l'échelle CSS, les formes clip-path simples, mask-image, le flou et le backdrop-blur le sont. La page des fonctionnalités donne la liste complète.

Choisir la bonne approche

Posez-vous une seule question : quelqu'un va-t-il modifier le résultat ?

1. Non — c'est pour regarder, partager ou tester. Utilisez un bitmap. html2canvas ou une capture du navigateur est plus simple et plus rapide.
2. Oui — c'est pour du travail de design. Utilisez des calques modifiables sur le canvas Figma.
3. Plutôt oui, mais certaines parties sont des cartes, des vidéos ou de la 3D. Utilisez des calques modifiables ; ces blocs arrivent automatiquement sous forme d'images.

Quelques scénarios concrets :

• « Il me faut un PNG de ce graphique pour une slide. » Bitmap.
• « Je dois refondre notre page de tarifs. » Calques modifiables — importez-la, puis itérez.
• « Je veux comparer la production à notre maquette. » Calques modifiables, avec en option la Reference screenshot (Pro) — un calque image masqué et verrouillé que vous pouvez afficher pour une comparaison au pixel près. Un bel exemple des deux sens qui travaillent ensemble : un bitmap pour vérifier, des calques pour travailler.
• « J'ai besoin du tableau de bord connecté dans Figma. » Calques modifiables via l'extension Chrome, qui capture les pages que voit votre navigateur, y compris leur état actuel.

Pourquoi « faire une simple capture » coûte plus cher ensuite

Les captures d'écran semblent plus rapides parce que la capture prend quelques secondes. Le coût apparaît après : quelqu'un doit reconstruire chaque frame à la main dès que le vrai travail de design commence. Mesurer le padding à partir des pixels, deviner les tailles de police, retaper les textes, recréer les couleurs — cela représente des heures par page.

Convertir en calques modifiables confie ce travail à l'outil. Vous obtenez des tailles mesurées, du vrai texte et — avec Pro — des variables, des styles de texte et des composants générés à partir de la page elle-même. Le workflow HTML to design montre à quoi cela ressemble sur une refonte complète.

Note sur la confidentialité

Quelle que soit l'approche choisie, pensez à l'endroit où la page est rendue. html2canvas s'exécute dans la page, dans le navigateur de l'utilisateur. HTML to Frames rend les pages publiques dans un navigateur isolé et cloisonné (sandbox), livre le résultat une seule fois et le supprime de la mémoire sans l'écrire sur disque ; l'extension Chrome s'exécute dans votre propre navigateur et n'envoie rien si vous n'utilisez pas Send to Figma. Les détails figurent sur la page sécurité.

En résumé

• HTML to canvas (bitmap) transforme une page en pixels. Idéal pour le partage, les tests et les aperçus ; non modifiable.
• HTML vers le canvas Figma transforme une page en frames, textes et vecteurs exploitables.
• Le contenu qui est réellement un canvas — WebGL, cartes, iframes, vidéos sans image d'aperçu — est capturé comme une image de son bloc, tandis que le reste reste modifiable.

Pour essayer l'approche par calques sur votre propre page, installez le plugin et commencez par la documentation, ou lisez comment le moteur Auto Layout transforme la structure d'une page en frames.