HTML to Figma : comment convertir HTML en Figma (guide 2026)

Toute équipe de design finit par se heurter au même mur : ce sur quoi vous devez travailler existe sous forme de HTML dans un navigateur, mais l'endroit où vous voulez travailler, c'est Figma. Il peut s'agir du site en ligne d'un client avant une refonte, d'un build de staging qu'un développeur vient de livrer, ou d'une landing page générée en quelques secondes par un outil d'IA. La reconstruire à la main prend des heures. Coller une capture d'écran vous donne quelque chose à regarder, mais pas à modifier.

Ce guide explique comment convertir HTML en Figma sous forme de vrais calques modifiables — frames, textes, vecteurs et images — avec le plugin HTML to Frames. Vous découvrirez les cinq façons d'importer une page, comment choisir les écrans, quelles options activer, ce qui se convertit proprement et ce qui ne se convertit pas, et comment résoudre le problème le plus fréquent : les polices manquantes.

Pourquoi convertir HTML en Figma ?

Un navigateur et un outil de design résolvent des problèmes différents. Le navigateur est la source de vérité de ce qui est livré ; Figma est l'endroit où vous explorez, annotez, comparez et transmettez. La conversion amène la réalité actuelle là où vous prenez les décisions.

Les raisons les plus courantes :

• Les refontes. Partez du site existant plutôt que d'un canvas vide, pour voir ce qui est réellement là avant de le changer. Notre guide de refonte Website to Figma approfondit le sujet.
• Les audits. Inspectez les espacements, l'échelle typographique et l'usage des couleurs calque par calque, au lieu de deviner depuis les DevTools.
• L'écart entre design et code. Ramenez la version livrée dans Figma pour la comparer à la maquette d'origine.
• Le handoff inversé. Un développeur front-end construit en localhost, et le designer relit et affine le résultat dans Figma.
• L'UI générée par IA. Des outils comme Claude ou Cursor produisent du HTML rapidement ; c'est dans Figma que vous le rendez prêt pour la production.
• L'apprentissage. Étudiants et designers juniors peuvent étudier des sites bien construits, un calque à la fois.

Le mot clé de tous ces cas est modifiable. Une image bitmap se contente de vous montrer la page. Les calques vous permettent de la changer.

Les 5 façons d'importer du HTML dans Figma

HTML to Frames accepte des pages web provenant de cinq types de sources. Choisissez celle qui correspond à l'endroit où se trouve votre HTML.

1. Link (une seule URL publique)

Collez l'URL de n'importe quelle page web publique dans l'onglet Link. La page est rendue dans un navigateur isolé, mesurée, puis reconstruite en calques Figma. C'est la voie la plus rapide lorsque la page est accessible publiquement. Voir URL to Figma pour en savoir plus sur ce parcours.

2. Multiple (jusqu'à 10 liens)

L'onglet Multiple accepte jusqu'à 10 liens d'un coup. Ils sont traités l'un après l'autre, et chaque page devient une rangée sur le canvas : page d'accueil, page de tarifs et article de blog s'alignent côte à côte pour être comparés. L'import Multiple est disponible sur tous les plans, Free compris.

3. Fichier local, dossier, .zip ou code collé

Si le HTML n'est pas encore en ligne, utilisez l'onglet Local file :

• un fichier HTML,
• un dossier de site entier (glissez-déposez-le, puis choisissez les pages à importer),
• une archive .zip, ou
• Paste code — du HTML et du CSS bruts.

Les envois peuvent atteindre 30 MB. Les fichiers sont ouverts depuis la mémoire dans un navigateur isolé (jamais via file://) et supprimés dès la fin de l'import. Les envois abandonnés sont supprimés au bout de 2 minutes. La page sécurité donne tous les détails.

4. Browser (l'extension Chrome gratuite)

Certaines pages ne sont pas accessibles depuis un serveur : tableaux de bord avec connexion, localhost, réseaux privés, ou une page dans un état précis — un menu ouvert, un formulaire rempli, un panier contenant des articles. Pour celles-ci, installez l'extension Chrome HTML to Frames, gratuite.

Vous pouvez capturer la page entière ou sélectionner un seul élément (survolez pour mettre en surbrillance, utilisez les flèches pour passer au parent ou à l'enfant, appuyez sur Entrée pour capturer, Échap pour annuler). Le résultat est copié dans votre presse-papiers, ou dans un fichier .h2f, et vous le collez dans l'onglet Browser du plugin. Plus simple encore : connectez une fois l'extension au plugin avec un code à usage unique et utilisez Send to Figma, pour que les captures arrivent directement dans le plugin ouvert.

5. Outils d'IA via MCP

Si vous construisez de l'UI avec un assistant IA, connectez Claude Code, Claude Desktop, Cursor ou tout client MCP depuis l'onglet AI du plugin. Il vous fournit un token et une configuration prête à copier. L'assistant peut alors appeler import_html (HTML jusqu'à 2 MB), import_url ou import_status, et la page arrive dans votre plugin ouvert, importée avec votre propre plan. Les connecteurs web de claude.ai ne sont pas encore pris en charge. Pour en savoir plus, lisez AI to Figma.

Quelle méthode choisir ?

Pas à pas : convertir une page avec HTML to Frames

Voici le parcours complet pour une page publique typique.

1. Ouvrez le plugin dans un fichier Figma Design et choisissez l'onglet Link.
2. Collez l'URL de la page à convertir.
3. Choisissez vos écrans — Desktop (Site width), Laptop, Tablet, Mobile, ou le Responsive set en un clic.
4. Vérifiez les options, comme Auto Layout, Full page, Images et Hide cookie banners & popups.
5. Lancez l'import. Si la page utilise des polices que vous n'avez pas installées, un écran Missing fonts apparaît avant toute création.
6. Choisissez des remplacements pour les polices manquantes (ou acceptez les suggestions).
7. Consultez l'écran de résultat. Il liste les frames, les calques, la part d'Auto Layout, les polices manquantes et les avertissements.
8. Commencez à modifier. Votre page est désormais un ensemble de frames Figma imbriqués, avec de vrais textes, vecteurs et images.

Chaque écran devient son propre frame, nommé comme example.com/pricing — Desktop (1920) — sans protocole, sans www, et limité à 60 caractères — pour que les gros imports restent faciles à parcourir dans le panneau des calques.

Choisir les écrans : la Site width expliquée

Le choix de l'écran compte plus qu'il n'y paraît. Une page rendue à la mauvaise largeur s'étire maladroitement ou se tasse dans une mise en page que le designer n'a jamais prévue.

Desktop = Site width

HTML to Frames ne se contente pas de choisir 1440 en espérant que ça tombe juste. Il mesure la largeur de design réelle de la page au moment de l'import :

• Les designs pleine largeur (arrière-plans bord à bord) arrivent en 1920, avec le contenu centré.
• Les sites réellement centrés dans un conteneur arrivent à la largeur de ce conteneur — par exemple 1200, 1280 ou 1440.
• Les sites fluides sans conteneur fixe arrivent en 1440.

Mesurée, pas devinée. Dans un import multipage, un site reçoit une seule largeur pour toutes ses pages : les frames restent alignés.

Les autres écrans

• Laptop — 1280
• Tablet — 768
• Mobile — 390
• Largeur personnalisée — la largeur dont vous avez besoin (Pro)

Le Responsive set vous donne Desktop, Tablet et Mobile en un clic. Les écrans d'une même page sont capturés en parallèle.

Avec Free, chaque import inclut un écran. Pro et Team permettent jusqu'à quatre écrans par import. Point important : un import = une page avec tous ses écrans ; un Responsive set d'une page compte donc pour un seul import. Voir les tarifs pour le détail des plans.

Les options à connaître

Les réglages par défaut conviennent à la plupart des pages, mais ces options méritent d'être comprises :

• Auto Layout — déduit piles, espacements, padding et alignement à partir de la géométrie du navigateur, et vérifie le résultat avant de le conserver. L'article sur l'Auto Layout explique son fonctionnement.
• Styles & variables (Pro) — crée des variables de couleur, des styles de texte et des styles d'ombre, et réutilise ceux qui existent déjà dans votre fichier.
• Snap to my file's styles (Pro) — en l'absence de correspondance exacte, aligne couleurs et texte sur les styles les plus proches de votre propre design system.
• Full page — capture toute la page défilante plutôt que le seul premier écran.
• Images — inclut ou ignore les remplissages d'image.
• Hide cookie banners & popups — capture la page comme la voit un visiteur normal, sans surcouches.
• Color scheme — Light, Dark ou Light + Dark (Pro), qui crée une seule collection de variables avec les deux modes.
• Detailed layers (Pro), Reference screenshot (Pro, un calque masqué et verrouillé pour comparer) et Extra wait (Pro, pour les pages lentes à charger).
• Accordion text as notes — désactivé par défaut ; transforme le texte des <details> fermés en annotations Figma.
• Page language — 15 langues, utile pour les sites multilingues.

Ce qui se convertit — et ce qui ne se convertit pas

L'objectif est un fichier de design dans lequel vous pouvez vraiment travailler : il vaut donc la peine de savoir exactement ce qui est transposé.

Ce qui devient des calques modifiables

• La mise en page sous forme de frames imbriqués, avec Auto Layout là où il peut être vérifié
• Le texte avec styles mixtes, liens, letter-spacing, line-height et text-transform
• Les couleurs et dégradés — linéaires, radiaux et coniques, y compris les arrêts en px et les dégradés répétés
• Les images avec object-fit, background-size, mosaïque et srcset haute résolution
• Les SVG en vecteurs modifiables
• Les bordures (y compris un seul côté d'une couleur différente), le rayon des angles et les ombres (internes, externes et text-shadow)
• L'opacité, les modes de fusion, le flou et le backdrop-blur
• La rotation et la mise à l'échelle CSS, filter: grayscale/opacity
• ::before et ::after, clip-path, mask-image
• Les champs de formulaire, les puces de liste dessinées comme dans Chrome, les compteurs CSS, les exposants et indices
• Le shadow DOM et le bon ordre du z-index

Ce qui arrive sous forme d'image

Certains contenus ne peuvent pas être représentés sous forme de calques. Les iframes (comme les cartes intégrées), les vidéos sans image d'aperçu, les canvas WebGL ou 3D et les éléments object/embed sont capturés sous forme de capture d'écran de ce bloc uniquement. Le reste de la page reste modifiable. La comparaison HTML to canvas explique pourquoi.

Pas encore pris en charge

• Les transformations skew et 3D
• Les clip-paths path()
• Les masques multicouches
• Les couleurs Display-P3

Conseils pour des résultats propres

Quelques habitudes font une vraie différence :

1. Activez « Hide cookie banners & popups » pour les sites marketing. Sinon, une fenêtre de consentement risque de recouvrir votre section hero.
2. Utilisez l'extension Chrome pour les pages authentifiées. Un serveur ne peut pas se connecter à votre place ; votre navigateur, lui, l'est déjà.
3. Capturez les états délibérément. Ouvrez d'abord le menu ou remplissez le formulaire dans votre navigateur, puis capturez avec l'extension.
4. Sélectionnez un seul élément lorsque vous n'avez besoin que d'un composant, comme une carte de tarif ou une barre de navigation. Les petites captures sont plus rapides à nettoyer.
5. Utilisez Extra wait (Pro) sur les pages qui chargent leur contenu tardivement.
6. Ajoutez une Reference screenshot (Pro) lorsque vous devez prouver que l'import correspond à la page en ligne — c'est un calque masqué et verrouillé que vous pouvez afficher pour comparer.
7. Importez un Responsive set plutôt que trois imports séparés. C'est un seul import, et les frames restent groupés.
8. Utilisez Import linked pages après le premier import pour choisir d'autres pages du même site — elles arrivent comme un import Multiple.
9. Réimportez en un clic quand la page en ligne change. L'URL source est enregistrée sur le frame.

Résoudre les polices manquantes

Les polices manquantes sont la cause la plus fréquente d'une page importée qui « sonne faux ». Le site peut utiliser une police sous licence ou une police web que vous n'avez pas installée localement.

HTML to Frames gère cela avant de créer les calques :

1. Après la capture, un écran Missing fonts liste chaque famille utilisée par la page que Figma ne trouve pas.
2. Pour chacune, le plugin suggère un remplacement. Vous pouvez l'accepter ou choisir une autre police.
3. Vos choix sont mémorisés par site — ou pour tous les sites, si vous préférez — si bien que le prochain import du même domaine ne vous redemande rien.

La correspondance des polices est disponible sur tous les plans. Les polices sont listées uniquement en local ; le plugin ne lit pas le contenu de votre fichier Figma. Si vous comptez travailler longtemps sur le design, installer la police réellement utilisée par le site reste l'option la plus fidèle.

Et ensuite ?

Convertir HTML en Figma n'est que la première étape. C'est ce que vous faites des calques qui crée la valeur :

• Vous préparez une refonte ? Lisez le workflow HTML to design.
• Vous travaillez avec des pages générées par IA ? Voir AI to Figma et notre guide De l'UI générée par IA à Figma via MCP.
• Besoin de localhost ou de pages avec connexion ? Commencez par l'extension Chrome.
• Vous comparez les outils ? Notre page alternatives présente les options en toute honnêteté.

Quand vous êtes prêt, installez le plugin et essayez-le sur la page sur laquelle vous travaillez en ce moment. La documentation détaille chaque option.