Pixels ou calques
HTML to canvas : des calques modifiables sur le canvas Figma
Les bibliothèques de capture bitmap vous donnent des pixels. HTML to Frames place la page sur votre canvas Figma sous forme de vecteurs, de textes et de frames que vous pouvez modifier.
- Texte modifiable et vecteurs SVG, pas une image matricielle
- Les vrais blocs canvas et WebGL conservés comme image de leur bloc
- Animations figées pour un frame propre et cohérent
Bientôt sur la Figma Community
« HTML to canvas » recouvre deux choses différentes, et mieux vaut les distinguer avant de choisir un outil. Les développeurs pensent souvent à html2canvas, la bibliothèque JavaScript qui parcourt le DOM et peint une approximation de la page dans un élément <canvas>, ou à une capture d'écran du navigateur qui enregistre les pixels visibles. Les designers pensent généralement à autre chose : placer une page web sur le canvas Figma pour pouvoir travailler dessus.
Les deux produisent quelque chose qui ressemble à la page, mais un seul vous donne de quoi travailler. Une image bitmap, aussi nette soit-elle, n'est qu'une grille de pixels colorés. Impossible d'y corriger une faute de frappe, de changer une taille de police, de recolorer un bouton ou d'extraire une carte vers une nouvelle mise en page. Vous pouvez seulement la recadrer, la redimensionner et peindre par-dessus.
HTML to Frames, un plugin Figma créé par EUREKA!, prend le second sens au pied de la lettre. Il rend la page dans un vrai navigateur, lit la géométrie et les styles calculés de chaque élément, et recrée la page sur votre canvas Figma en calques natifs : des frames qui reflètent la structure de la page, du texte modifiable avec ses styles d'origine, des SVG convertis en vecteurs et des images placées avec leur cadrage d'origine. La mise en page est convertie en Auto Layout là où elle peut être vérifiée : le résultat s'adapte donc aussi quand vous le redimensionnez.
Il existe un cas où les pixels sont la bonne réponse, et le plugin le traite délibérément. Un véritable élément <canvas> ou une scène WebGL ne contient aucun DOM à reconstruire : ce bloc arrive donc sous forme de capture d'écran, tandis que le reste de la page reste modifiable.
Pour la version complète de cette comparaison, lisez HTML to canvas ou calques modifiables. Pour découvrir la conversion de base, commencez par HTML to Figma, ou parcourez ce qui est converti sur la page des fonctionnalités.
Placer une page sur votre canvas Figma
- 01
Choisissez la provenance de la page
Une URL, un fichier ou dossier local, du HTML et du CSS collés, un onglet Chrome ou un outil d'IA via MCP.
- 02
Laissez le navigateur la rendre
La page se charge dans un navigateur isolé, les animations sont figées et le WebGL est figé après quelques images.
- 03
Récupérez des calques sur le canvas
Frames, textes, vecteurs et images sont placés sur votre page Figma actuelle, prêts à être modifiés.
Pourquoi des calques plutôt qu'un bitmap sur le canvas
Le texte reste du texte
Titres et texte courant arrivent sous forme de texte modifiable, avec letter-spacing, line-height et styles mixtes intacts.
Les SVG deviennent des vecteurs
Icônes et logos sont convertis en calques vectoriels modifiables, que vous pouvez recolorer et redimensionner sans flou.
Une structure sélectionnable
Les frames imbriqués suivent la structure de la page : vous pouvez sélectionner une seule carte au lieu de recadrer une image.
Des pixels seulement si nécessaire
Les iframes, les vidéos sans image d'aperçu et les blocs canvas WebGL ou 3D arrivent sous forme de capture de leur bloc.
Une capture figée et propre
Les animations sont mises en pause pour obtenir un frame cohérent, sans éléments à moitié estompés.
Calque de référence
Avec Pro, un calque de capture d'écran masqué et verrouillé vous permet de comparer la reconstruction aux pixels d'origine.
html2canvas et captures d'écran ou calques modifiables
Les approches par capture d'écran et HTML to Frames partent de la même page rendue, mais aboutissent à des résultats très différents.
| html2canvas / capture du navigateur | HTML to Frames sur le canvas Figma | |
|---|---|---|
| Résultat | Une image matricielle | Frames, textes, vecteurs et images |
| Modifier le texte | Impossible | Modification directe |
| Mise à l'échelle | Flou au-delà de 1x | Les vecteurs restent nets |
| Mise en page | Pixels figés | Auto Layout là où il est vérifié, contraintes ailleurs |
| Sélectionner un élément | Recadrage à la main | Un clic sur le frame |
| Usage typique | Rapports de bugs, vignettes, aperçus | Refontes, audits, handoff, design systems |
html2canvas réimplémente en outre le rendu CSS en JavaScript, si bien qu'il peut manquer des fonctionnalités prises en charge par le navigateur. HTML to Frames lit les valeurs dans un vrai navigateur basé sur Chromium une fois le rendu effectué, puis les associe aux propriétés Figma : dégradés, y compris coniques et répétés, ombres, modes de fusion, flou et backdrop-blur, clip-path, mask-image et plus encore.
Les captures d'écran gardent leur utilité. Pour une trace visuelle rapide, un bitmap convient. Si vous comptez modifier quoi que ce soit, les calques vous évitent de redessiner la page.
Une règle simple : si l'étape suivante est un commentaire ou un ticket, une capture d'écran suffit. Si l'étape suivante consiste à ouvrir Figma pour modifier quelque chose, importez plutôt des calques.
Ce que devient un vrai élément <canvas> ou WebGL
Une partie du contenu d'une page est déjà faite de pixels. Un élément <canvas> dessine en JavaScript, et une scène WebGL affiche des graphismes 3D via le GPU. Ces blocs ne contiennent aucun DOM à lire : aucun outil ne peut donc les transformer en calques vectoriels pertinents.
HTML to Frames les traite explicitement au lieu d'échouer en silence :
- Le bloc est capturé sous forme de capture d'écran à sa position et à sa taille exactes.
- Les scènes WebGL sont figées après quelques images : vous obtenez une image stable plutôt qu'un frame vide ou en pleine transition.
- Tout ce qui entoure le bloc, comme les titres, boutons et superpositions placés par-dessus, reste sous forme de calques modifiables.
La même règle s'applique aux autres contenus intégrés qui ne peuvent pas devenir des calques : iframes comme les cartes, vidéos sans image d'aperçu et éléments object ou embed. Chacun devient une image de son propre bloc, et l'écran de résultat liste les éventuels avertissements.
Concrètement, une landing page avec un hero 3D se convertit tout de même en design exploitable. Vous pouvez remplacer l'image du hero par un nouveau visuel, réécrire le texte au-dessus et ajuster les espacements, tandis que le reste de la page conserve son Auto Layout. Découvrez comment cette mise en page est déduite dans L'Auto Layout expliqué.
Obtenir un frame propre à partir d'une page qui bouge
Les pages modernes bougent : les carrousels tournent, les éléments apparaissent en fondu au défilement, les bannières de cookies glissent et les sections hero s'animent au chargement. Une capture naïve fige ce qui se passait à cette milliseconde précise.
HTML to Frames capture la page comme la voit un visiteur normal, avec quelques réglages pour rendre le résultat prévisible :
Animations figées
Les animations sont figées pour que la capture montre chaque élément dans un état stable plutôt qu'au milieu d'une transition.
Hide cookie banners & popups
Activez cette option et les bannières de consentement et popups sont masquées avant la capture, pour ne pas recouvrir la page sur votre canvas.
Extra wait
Les pages lentes qui chargent leur contenu tardivement peuvent bénéficier d'un délai supplémentaire avant la capture. Extra wait est une option Pro.
Full page
Capturez toute la page défilante ou seulement le premier écran, selon vos besoins.
Ces options s'appliquent que la page provienne d'une URL, d'un fichier local ou de l'extension Chrome. L'extension est le bon choix quand vous voulez un état précis, comme un menu ouvert, plutôt que l'affichage par défaut.
Si un élément est encore capturé en pleine animation ou manquant, l'écran de résultat liste les avertissements, et un Re-import en un clic avec une autre option est généralement la solution la plus rapide.
Questions fréquentes
Non. html2canvas est une bibliothèque JavaScript qui peint une approximation du DOM dans une image bitmap. HTML to Frames est un plugin Figma qui reconstruit la page sur le canvas Figma en calques modifiables : frames, textes, vecteurs et images, avec Auto Layout là où il peut être vérifié.
Oui. Le texte arrive sous forme de calques de texte Figma natifs, y compris les styles mixtes au sein d'un même paragraphe, les liens, le letter-spacing, le line-height et le text-transform. Si une police n'est pas disponible, un écran Missing fonts vous permet de choisir un remplacement avant la création de la page, et votre choix est mémorisé.
Ils ne contiennent aucun DOM à reconstruire : chacun de ces blocs arrive donc sous forme de capture d'écran à sa position et à sa taille exactes. Le WebGL est figé après quelques images pour obtenir une image stable. Tout ce qui entoure le bloc reste sous forme de calques modifiables.
Oui, avec Pro. L'option Reference screenshot ajoute un calque image masqué et verrouillé sous l'import. Affichez-le quand vous voulez comparer les calques reconstruits au rendu d'origine, et laissez-le masqué le reste du temps pour qu'il ne gêne pas.
Les animations sont figées et, si vous le souhaitez, les bannières de cookies et popups sont masquées : la capture montre une page stable. Une capture d'écran enregistre ce qui était affiché à cet instant. Si vous avez besoin d'un état précis, comme un menu ouvert, utilisez l'extension Chrome.
Les dégradés linéaires, radiaux et coniques, les ombres internes et externes, text-shadow, l'opacité, les modes de fusion, le flou et le backdrop-blur, clip-path, mask-image, la rotation et la mise à l'échelle. Ne sont pas encore pris en charge : les transformations skew et 3D, les clip-paths path(), les masques multicouches et les couleurs Display-P3. La liste complète figure sur la page des fonctionnalités.
Voir aussi
Arrêtez de redessiner le web.
Collez un lien et obtenez en quelques secondes de vrais calques Figma, modifiables et responsive. Gratuit pour commencer — 10 imports par mois.
Sans carte bancaire. Pro s'achète directement dans Figma.
Bientôt sur la Figma Community