Plugin Figma HTML
Le plugin Figma HTML qui crée des calques vraiment modifiables
Lancez-le dans Figma, collez un lien ou déposez votre HTML : vous obtenez des frames, des textes et des vecteurs, avec un Auto Layout contrôlé par rapport à la vraie page.
- Fonctionne dans tout fichier Figma Design, sans créer de compte
- Cinq sources : lien, 10 liens, fichiers, Chrome, outils d'IA
- Offre gratuite avec 10 imports par mois
Bientôt sur la Figma Community
Un plugin Figma HTML n'a qu'une mission : prendre ce qui existe en HTML et en CSS, et en faire quelque chose avec quoi l'on peut vraiment designer dans Figma. Tout l'écart entre les plugins tient dans ce « vraiment ». Certains collent une capture d'écran. D'autres posent des centaines de blocs en position absolue qui s'effondrent dès que l'on redimensionne une frame. HTML to Frames, un plugin Figma conçu par EUREKA!, s'impose une exigence plus stricte : chaque frame, chaque calque de texte et chaque vecteur doit se comporter comme si un designer l'avait construit à la main.
C'est pourquoi le plugin travaille en deux passes. Il reconstruit d'abord la page au pixel près. Il parcourt ensuite les frames de l'intérieur vers l'extérieur, déduit de la géométrie mesurée par le navigateur les piles, les rangées qui passent à la ligne, les espacements, les marges internes et l'alignement, applique l'Auto Layout et vérifie la position de chaque enfant à 2 px près. Si une frame devait bouger, le plugin essaie une structure plus simple ou conserve les positions exactes avec des contraintes adaptées. Dans nos tests sur de vrais sites, l'Auto Layout a été conservé sur environ 86 à 97 % des frames, et le design ne casse jamais.
Le plugin s'exécute là où vous travaillez déjà. Ouvrez-le depuis Plugins → HTML to Frames dans n'importe quel fichier Figma Design, choisissez une source et cliquez sur Import. Aucun compte à créer : l'offre Free démarre automatiquement, et Pro s'achète directement dans Figma, via le paiement intégré de Figma.
Si vous comparez plusieurs options, commencez par la présentation HTML vers Figma, découvrez précisément ce qui est converti sur la page des fonctionnalités, ou lisez notre comparatif honnête des plugins HTML vers Figma.
Comment utiliser le plugin Figma HTML
- 01
Ouvrez-le dans Figma
Dans un fichier Figma Design, allez dans Plugins → HTML to Frames, ou appuyez sur ⌘/ et tapez son nom.
- 02
Indiquez d'où vient le HTML
Link, Multiple (jusqu'à 10 liens), Local file, Browser pour l'extension Chrome, ou AI pour les outils MCP.
- 03
Choisissez les écrans et les options
Le format Desktop s'ouvre à la largeur de site mesurée. Avec Pro, ajoutez Tablet et Mobile grâce au Responsive set.
- 04
Importez et modifiez
Les frames arrivent nommées par page et par écran, avec Auto Layout, textes modifiables et vecteurs prêts à être retravaillés.
Ce que vous êtes en droit d'attendre d'un bon plugin Figma HTML
Des calques natifs, pas une image
Des frames, du texte modifiable avec ses styles mixtes, des SVG en vecteurs et des images qui gardent leur cadrage et leur répétition d'origine.
Un Auto Layout qui tient
Piles, rangées et grilles passent en Auto Layout, vérifié à 2 px près ; les frames qui bougeraient gardent leurs positions exactes.
Écrans responsive
Desktop à la largeur mesurée du site, plus Laptop, Tablet, Mobile ou une largeur personnalisée avec Pro.
Bien plus que des URL publiques
Fichiers HTML, dossiers de site complets, archives .zip et code collé, ouverts dans un navigateur isolé.
Un résultat prêt pour le design system
Variables de couleur, styles de texte et d'ombre, composants et variantes de survol avec Pro, en réutilisant ce que contient déjà votre fichier.
Confidentiel par conception
Le plugin ne lit jamais le contenu de votre fichier. Les résultats sont livrés une seule fois et ne sont jamais écrits sur disque.
Plugin, extension Chrome ou MCP : quelle voie choisir ?
HTML to Frames est un seul produit avec trois points d'entrée, qui aboutissent tous au même résultat modifiable dans le plugin.
Le plugin Figma seul
Idéal pour tout ce qui a une adresse publique. Collez un lien, ou jusqu'à 10 liens avec Multiple : le service de capture affiche chaque page dans un navigateur isolé, comme la voit un visiteur ordinaire, en masquant sur demande les bannières de cookies et les popups. Les fichiers HTML locaux, les dossiers de site et les archives .zip jusqu'à 30 MB suivent le même chemin, et sont supprimés dès la fin de l'import.
Le plugin et l'extension Chrome
Idéal pour les pages que le service ne peut pas atteindre : tableaux de bord derrière un login, localhost, préproduction sur un réseau privé, ou page dans un état précis, comme un menu ouvert ou un formulaire rempli. L'extension Chrome vers Figma, gratuite, capture ce qu'affiche votre navigateur et l'envoie directement dans le plugin ouvert grâce à Send to Figma.
Le plugin et les outils d'IA
Idéal quand le HTML n'existe pas encore. Connectez Claude Code, Claude Desktop, Cursor ou n'importe quel client MCP depuis l'onglet AI du plugin, et demandez-lui de concevoir une page : le résultat arrive dans votre plugin et s'importe avec votre propre offre. La configuration est détaillée sur la page de l'IA vers Figma.
Comment évaluer un plugin Figma HTML
Avant d'engager une équipe sur un outil, importez les trois mêmes pages avec chaque candidat : une page marketing, un écran produit dense et une page au thème sombre. Vérifiez ensuite cinq points.
- Le texte est-il modifiable ? Cliquez sur un titre et tapez. S'il fait partie d'une image, l'import est une référence, pas un design.
- L'Auto Layout résiste-t-il au redimensionnement ? Élargissez la frame. Les rangées doivent s'étirer, le contenu centré rester centré, et rien ne doit se chevaucher.
- Les largeurs sont-elles justes ? Un site conçu en 1200 px ne doit pas arriver comprimé dans 1440 px. HTML to Frames mesure la vraie largeur de design et l'appelle Site width.
- Les styles sont-ils réutilisables ? Cherchez des variables de couleur et des styles de texte plutôt que des centaines de codes hexadécimaux bruts, et vérifiez si un design system existant est réutilisé.
- Où vont vos données ? Lisez la politique de confidentialité. Notre service de capture livre chaque résultat une seule fois, ne conserve rien sur disque et supprime les fichiers envoyés juste après l'import ; tous les détails sont sur la page sécurité.
Un outil qui passe ces cinq tests vous fera gagner du temps sur de vrais projets, et pas seulement en démo.
Offres, limites et ce qui compte comme un import
L'offre Free comprend 10 imports par mois, un écran par import, l'import multiple jusqu'à 10 liens, l'Auto Layout et la correspondance des polices. Pro coûte $7 par mois au lancement (prix normal : $9) et ajoute des imports illimités dans la limite d'un usage raisonnable de 1 000 par mois, jusqu'à quatre écrans par import, les largeurs personnalisées, les styles et variables, l'alignement sur vos styles (Snap), les composants et états de survol, le mode Light + Dark, les calques détaillés, la capture de référence et le délai d'attente prolongé. Team couvre 5 postes pour $22 par mois au lancement, avec une clé de licence partagée.
Un import correspond à une page avec tous ses écrans : Desktop, Tablet et Mobile d'une même page ne comptent qu'une fois. Une capture faite avec l'extension Chrome compte elle aussi pour un import. Les compteurs sont remis à zéro chaque mois (UTC). Tous les détails sont sur la page des tarifs.
Questions fréquentes
Oui. HTML to Frames propose une offre Free avec 10 imports par mois et un écran par import. L'import multiple jusqu'à 10 liens, l'Auto Layout et la correspondance des polices sont inclus. Ni compte ni carte ne sont nécessaires : l'offre démarre la première fois que vous ouvrez le plugin.
Ouvrez HTML to Frames depuis le menu Plugins d'un fichier Figma Design, choisissez Link et collez une URL, ou choisissez Local file et déposez un fichier HTML, un dossier ou un .zip. Sélectionnez vos écrans, laissez Auto Layout activé et cliquez sur Import. La page arrive sur votre canvas sous forme de frames modifiables.
Le plugin est conçu pour les fichiers Figma Design, où les frames, l'Auto Layout, les variables et les composants sont disponibles. Ouvrez un fichier Design pour l'utiliser.
Pas à lui seul, car le service de capture n'ouvre que des adresses publiques. Installez l'extension Chrome gratuite HTML to Frames : elle capture ce qu'affiche votre propre navigateur et l'envoie au plugin, y compris les pages connectées, localhost et les réseaux privés.
Non. Il écrit les calques importés et ne lit que les métadonnées de ses propres frames, comme l'URL source et la largeur, pour permettre un réimport ultérieur. Les noms de polices sont vérifiés localement pour repérer les polices manquantes.
Les principales différences : un Auto Layout vérifié qui ne casse jamais le design, une largeur de site mesurée, des composants créés automatiquement à partir des structures répétées, des modes de variables clair et sombre en un seul import, l'import multiple dans toutes les offres et la suppression immédiate des fichiers envoyés. La page des alternatives compare les outils côte à côte.
Pour aller plus loin
Ne redessinez plus le web à la main.
Collez un lien : en quelques secondes, vous obtenez de vrais calques Figma, modifiables et responsive. Gratuit pour démarrer, avec 10 imports par mois.
Aucune carte bancaire demandée. L'offre Pro s'achète directement dans Figma.
Bientôt sur la Figma Community