Plugin Figma
HTML to Figma : des calques modifiables, pas une capture d'écran
HTML to Frames transforme n'importe quelle page web en vrais frames, textes, vecteurs et images Figma, avec un Auto Layout vérifié avant d'être conservé.
- Cinq sources : lien, liens multiples, fichiers locaux, onglet Chrome, outils d'IA
- Auto Layout vérifié enfant par enfant : le design ne casse jamais
- Plan Free avec 10 imports par mois
Bientôt sur la Figma Community
Convertir du HTML en Figma semble simple, jusqu'à ce que vous ouvriez le résultat : une image plate impossible à modifier, ou un amas de blocs en position absolue qui s'effondre dès que vous redimensionnez un frame. HTML to Frames, un plugin Figma créé par EUREKA!, emprunte une autre voie. Il rend votre page dans un vrai navigateur, mesure chaque élément et la reconstruit sur votre canvas en calques Figma natifs : frames, texte modifiable avec styles mixtes, SVG convertis en vecteurs et images avec leur cadrage et leur mosaïque d'origine.
Le plugin construit d'abord la page au pixel près, avec des positions absolues. Il parcourt ensuite les frames de l'intérieur vers l'extérieur et déduit piles, rangées qui passent à la ligne, espacements, padding et alignement à partir de la géométrie du navigateur. Chaque plan d'Auto Layout est appliqué, puis la position de chaque enfant est vérifiée avec une tolérance de 2 px. Si un plan ne tient pas, un plan plus simple est essayé ; si rien ne convient, le frame conserve ses positions absolues avec des contraintes adaptées. Vous obtenez un fichier qui se comporte comme s'il avait été construit par un designer, pas un simple calque.
Vous pouvez importer du HTML où qu'il se trouve : une URL publique, jusqu'à 10 liens en un seul lot, un fichier HTML local, un dossier de site ou un .zip, du code collé, un onglet de votre propre Chrome, ou un outil d'IA connecté via MCP. La présentation des fonctionnalités liste tout ce qui est converti, des dégradés et ombres aux pseudo-éléments ::before et au shadow DOM.
Si vous découvrez le processus, le guide pas à pas Comment convertir HTML en Figma vous accompagne dans un premier import. Si vous travaillez surtout à partir de sites en ligne, consultez URL to Figma ; pour les pages protégées par une connexion ou en localhost, l'extension Chrome est la bonne solution. Les tarifs démarrent à $0 avec 10 imports par mois, et la page des tarifs détaille ce qu'apporte Pro.
Comment convertir HTML en Figma en quatre étapes
- 01
Ouvrez le plugin et choisissez une source
Choisissez Link, Multiple, Local file, Browser ou AI selon l'endroit où se trouve votre HTML.
- 02
Choisissez les écrans et les options
Sélectionnez Desktop, Laptop, Tablet ou Mobile, et activez des options comme Auto Layout, Images ou Hide cookie banners & popups.
- 03
Résolvez les polices manquantes
Avant toute création, un écran Missing fonts propose des remplacements et mémorise vos choix pour chaque site.
- 04
Vérifiez le résultat
L'écran de résultat affiche frames, calques, part d'Auto Layout et avertissements, y compris la raison pour laquelle un frame est resté en position absolue.
Ce qui rend la conversion modifiable
Des calques natifs, pas des pixels
Des frames, textes, vecteurs et images que vous pouvez sélectionner, renommer et restyler comme n'importe quel élément dessiné à la main.
Auto Layout vérifié
Piles, espacements, padding et alignement sont déduits de la géométrie mesurée et vérifiés à 2 px près avant d'être conservés.
Une vraie mise en forme du texte
Styles mixtes, liens, letter-spacing, line-height et text-transform arrivent sous forme de texte modifiable.
Dégradés, ombres, flou
Dégradés linéaires, radiaux et coniques, ombres internes et externes, modes de fusion, flou et backdrop-blur sont préservés.
Écrans responsive
Capturez Desktop, Laptop 1280, Tablet 768 et Mobile 390, ou un Responsive set complet en un clic avec Pro.
Cinq façons d'importer
Importez depuis un lien, jusqu'à 10 liens, des fichiers locaux, un onglet Chrome ou un outil d'IA via MCP.
Calques modifiables ou capture d'écran
Beaucoup d'outils qui promettent une conversion HTML to Figma collent une image de la page. C'est suffisant pour un moodboard, mais ça s'arrête là : impossible de modifier un titre, de changer une couleur ou de déplacer une carte. HTML to Frames reconstruit la structure à la place.
| Import en capture d'écran | HTML to Frames | |
|---|---|---|
| Texte | Pixels | Texte modifiable avec styles mixtes |
| Icônes et logos | Pixels | SVG convertis en vecteurs modifiables |
| Mise en page | Image plate | Frames imbriqués avec Auto Layout vérifié |
| Couleurs | Prélevées à l'œil | Valeurs exactes, variables de couleur en option (Pro) |
| Redimensionnement | L'image s'étire | L'Auto Layout et les contraintes s'adaptent |
Il existe une exception, en toute transparence. Le contenu qui ne peut pas exister sous forme de calques, comme une carte intégrée en iframe, une vidéo sans image d'aperçu ou une scène WebGL, arrive sous forme de capture d'écran de ce bloc précis. Le reste de la page reste modifiable autour : un hero avec une vidéo d'arrière-plan vous donne quand même des titres, boutons et une navigation modifiables.
Si vous voulez malgré tout une référence au pixel près, Pro inclut l'option Reference screenshot : un calque masqué et verrouillé placé sous l'import pour comparer à tout moment la reconstruction à l'original. Pour aller plus loin sur cette différence, lisez HTML to canvas ou calques modifiables.
Cinq sources, un seul résultat
Toutes les sources aboutissent au même type de résultat : choisissez celle qui correspond à votre situation.
Link et Multiple
Collez une URL publique, ou jusqu'à 10 liens traités l'un après l'autre. Chaque page arrive dans sa propre rangée sur le canvas. L'import Multiple est disponible sur tous les plans, Free compris.
Local file
Déposez un fichier HTML, un dossier de site entier (puis choisissez les pages), un .zip, ou collez directement du HTML et du CSS. Les envois peuvent atteindre 30 MB et sont supprimés dès la fin de l'import.
Browser
L'extension Chrome gratuite capture ce que voit votre navigateur : tableaux de bord avec connexion, localhost, réseaux privés et état actuel d'une page, comme un menu ouvert ou un formulaire rempli. Voir Extension Chrome vers Figma.
Outils d'IA
Connectez Claude Code, Claude Desktop, Cursor ou un autre client MCP depuis l'onglet AI du plugin, et les pages générées arrivent dans votre plugin ouvert. Tous les détails sur AI to Figma.
Quelle que soit la source, un import compte pour une page avec tous ses écrans : une capture Desktop, Tablet et Mobile d'une même page représente un seul import. Chaque frame enregistre son URL source, ce qui vous permet de le réimporter en un clic quand la page en ligne change.
Ce que gère le convertisseur
C'est sur le CSS moderne que la plupart des outils HTML to Figma perdent en fidélité. HTML to Frames lit le résultat calculé par le navigateur et gère donc un large éventail de propriétés :
- La mise en page Flexbox et Grid, traduite en Auto Layout là où elle tient (voir CSS Flexbox et Grid vers Auto Layout)
- Les bordures, y compris un seul côté d'une couleur différente, et le rayon des angles
- Les images avec
object-fit,background-size, la mosaïque et lessrcsethaute résolution clip-path,mask-image,::beforeet::after, les compteurs CSS et les puces de liste dessinées comme dans Chrome- La rotation et la mise à l'échelle CSS, l'opacité,
filter: grayscale/opacity - Les champs de formulaire, exposants et indices, le shadow DOM et l'ordre du z-index
Certaines choses ne sont pas encore prises en charge : les transformations skew et 3D, les clip-paths path(), les masques multicouches et les couleurs Display-P3. Nous les listons ouvertement pour que vous sachiez à quoi vous attendre avant d'importer. La liste complète se trouve sur la page des fonctionnalités, et les questions de configuration trouvent leur réponse dans la documentation.
Lorsqu'un élément ne peut pas être représenté exactement, l'écran de résultat vous le signale. Il liste les polices manquantes, les avertissements, la part de frames ayant reçu l'Auto Layout et, pour chaque frame resté en position absolue, la raison. Vous n'avez jamais à deviner quelles parties de la conversion vérifier.
Questions fréquentes
Non. HTML to Frames reconstruit la page en calques Figma natifs : frames, texte modifiable, vecteurs issus des SVG et images. Seuls les blocs qui ne peuvent pas devenir des calques, comme les cartes en iframe, les vidéos sans image d'aperçu ou les canvas WebGL, arrivent sous forme de capture de ce bloc, tandis que tout ce qui les entoure reste modifiable.
Cinq : un lien public, jusqu'à 10 liens dans un import Multiple, des fichiers locaux (un fichier HTML, un dossier de site, un .zip ou du code collé), un onglet Chrome via l'extension gratuite, et des outils d'IA comme Claude Code, Claude Desktop ou Cursor connectés via MCP.
Oui. Après avoir construit la page au pixel près, le plugin déduit piles, espacements, padding et alignement, les applique et vérifie chaque enfant à 2 px près. Si un plan échoue, un plan plus simple est essayé ; sinon le frame conserve ses positions absolues avec des contraintes, pour que le design ne casse pas.
Oui. Le plan Free inclut 10 imports par mois avec un écran par import, et l'import Multiple jusqu'à 10 liens est compris. Pro ajoute jusqu'à quatre écrans par import, les styles et variables, les composants, Light + Dark et bien plus, au prix de lancement de $7 par mois.
Les pages sont rendues dans un navigateur isolé et cloisonné (sandbox). Le résultat est livré une seule fois puis supprimé de la mémoire ; il n'est jamais écrit sur disque, et la trace de la tâche est oubliée au bout de 15 minutes. Les fichiers envoyés sont supprimés dès la fin de l'import.
Avant la création, le plugin affiche un écran Missing fonts avec des remplacements suggérés. Vos choix sont mémorisés par site, ou pour tous les sites si vous préférez, si bien que les imports suivants du même site ne vous redemandent rien. La correspondance des polices est disponible sur tous les plans, Free compris.
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