Fonctionnalités
La boîte à outils HTML to Figma complète
D'une simple URL à un fichier Figma multipage, responsive et aligné sur votre design system. Voici tout ce que fait HTML to Frames — et comment.
Importez depuis n'importe où
Cinq sources couvrent les sites publics, les fichiers sur votre ordinateur, les pages que seul votre navigateur peut voir et le code écrit par l'IA.
Link
Collez n'importe quelle URL publique. La page est rendue dans un navigateur isolé, le contenu différé est chargé par défilement, et les bannières de cookies et popups sont masquées si vous le souhaitez.
Import Multiple
Jusqu'à 10 liens par import, traités l'un après l'autre. Chaque page devient sa propre rangée d'écrans. Inclus dans tous les plans — pas besoin de Pro.
Fichiers locaux et code collé
Déposez un fichier HTML, un dossier de site entier ou un .zip et choisissez les pages à importer — ou collez directement du HTML/CSS. Les fichiers sont servis depuis la mémoire et supprimés à la fin de l'import.
Extension Chrome
Capturez des tableaux de bord avec connexion, localhost, des réseaux privés et l'état actuel de la page. Choisissez un seul élément ou la page entière, puis collez-le ou utilisez Send to Figma.
Outils d'IA via MCP
Connectez Claude Code, Claude Desktop, Cursor ou tout client MCP. Ils appellent import_html ou import_url, et la page arrive dans votre plugin ouvert.
Import des pages liées et Re-import
Après un import, choisissez d'autres pages du même site dans une liste. Mettez à jour n'importe quel frame plus tard en un clic avec Re-import.
Des écrans fidèles au vrai site
Le responsive, ce n'est pas seulement trois captures d'écran. HTML to Frames rend chaque largeur séparément : vous obtenez les vraies mises en page tablette et mobile.
Site width, mesurée
Desktop s'ouvre à la largeur de design pour laquelle le site a été conçu : 1920 avec un conteneur centré pour les mises en page pleine largeur, la largeur du conteneur pour les sites centrés, 1440 pour les sites fluides.
Responsive set
Desktop + Tablet 768 + Mobile 390 en un clic ; Laptop 1280 et largeurs personnalisées avec Pro. Les écrans sont capturés en parallèle.
Un canvas bien rangé
Une rangée par page, les écrans côte à côte, des frames nommés comme yoursite.com/pricing — Desktop (1920).
Un Auto Layout digne de confiance
Le cœur de HTML to Frames. L'Auto Layout est déduit de la géométrie réelle du navigateur, appliqué, puis vérifié — jamais supposé.
Piles, rangées et grilles
Piles verticales et horizontales, rangées qui passent à la ligne, espacements, padding et alignement sont déduits de la position mesurée de chaque enfant.
Un sens responsive
Le contenu centré reste centré, les cartes de même taille passent en Fill, les conteneurs à largeur maximale restent au milieu et les éléments d'espacement s'étirent — les frames se redimensionnent comme le site.
Vérifié à 2 px près
Après application de l'Auto Layout, la position de chaque enfant est comparée au navigateur. S'il a bougé, un plan plus simple est essayé ; sinon le frame conserve ses positions exactes.
Contraintes intelligentes
Les frames qui gardent des positions absolues reçoivent des contraintes Stretch, Scale, Center ou Min/Max, pour que le redimensionnement reste cohérent.
Diagnostics
L'écran de résultat indique pourquoi chaque frame est resté en positionnement absolu — espacements irréguliers, chevauchements, différences de taille de texte — rien ne reste un mystère.
Le design system, extrait
Transformez les couleurs, la typographie et l'UI répétée d'un site en briques d'un design system Figma — ou rattachez-les au vôtre.
Variables de couleur
Jusqu'à 96 variables de couleur dans une collection « Colors · domaine », nommées d'après les propriétés personnalisées CSS du site (par exemple --brand-primary → brand/primary).
Styles de texte et d'ombre
Jusqu'à 48 styles de texte nommés selon leur rôle et leur taille, plus des styles d'ombre de sm à xl. Remplissages, contours et couleurs de texte sont liés aux variables.
Réutiliser, pas dupliquer
Si votre fichier contient déjà une variable ou un style avec la même valeur, il est utilisé. Importer deux fois le même site ne crée rien de nouveau.
Snap to my file's styles
Les correspondances approchantes s'alignent sur la couleur et le style de texte les plus proches de votre propre design system, selon une distance de couleur perceptuelle.
Composants et variantes de survol
Les cartes, boutons et éléments de menu répétés deviennent des composants et des instances. Les apparences au survol deviennent des variantes Default/Hover avec une interaction au survol.
Light + Dark
La page est lue en schéma de couleurs clair et sombre, puis écrite dans une seule collection à deux modes, avec une copie sombre de chaque écran.
Fidèle jusque dans les détails
Le vrai CSS est complexe. HTML to Frames gère les détails qui donnent à une page son apparence.
Texte
Styles mixtes dans un même paragraphe, liens, letter-spacing, line-height, text-transform, exposants et indices, compteurs CSS et puces de liste fidèles à Chrome.
Peinture
Dégradés linéaires, radiaux et coniques, y compris les arrêts en px et les motifs en mosaïque, modes de fusion, opacité, flou et flou d'arrière-plan, filtres en niveaux de gris.
Formes et effets
SVG en vecteurs modifiables, rayon de bordure, ombres internes et externes, ombres de texte, bordures sur un seul côté, ::before/::after, clip-path, mask-image, rotation et mise à l'échelle.
Contenu intégré
Cartes, iframes, WebGL et vidéos sans image d'aperçu sont capturés comme une image de leur bloc : rien ne reste vide.
Images
Sources srcset haute résolution, object-fit, background-size et arrière-plans en mosaïque.
Polices
Un écran Missing fonts (polices manquantes) propose des remplacements avant toute création et mémorise votre choix pour ce site.
Prototype et workflow
Les pages importées sont prêtes à être parcourues et faciles à tenir à jour.
Liens cliquables
Les liens ouvrent leur URL en mode Present ; les liens entre pages importées deviennent des interactions Navigate.
Fixe, sticky et défilement
Les en-têtes fixes et sticky restent en place, et les zones de défilement horizontal comme les carrousels défilent dans les prototypes.
Texte d'accordéon en notes
En option : le texte masqué des accordéons fermés est ajouté sous forme d'annotations Figma, pour ne perdre aucun contenu.
Capture de référence
Un calque de capture d'écran masqué et verrouillé sous chaque écran, pour des comparaisons au pixel près (Pro).
Questions fréquentes
Free inclut toutes les sources d'import, l'import Multiple jusqu'à 10 liens, la largeur de site mesurée, l'Auto Layout avec vérification, la correspondance des polices, les liens de prototype et les captures du contenu intégré — avec 10 imports par mois et un écran par import. Styles et variables, composants, Light + Dark, largeurs personnalisées et capture de référence sont des fonctionnalités Pro.
Oui. Le plugin ne lit pas directement les règles CSS pour construire la mise en page ; il utilise la géométrie mesurée par le navigateur. Les mises en page Flexbox et Grid deviennent des piles Auto Layout et des rangées qui passent à la ligne partout où le résultat correspond au navigateur à 2 px près.
Oui, avec Pro. Pour les écrans de largeur Desktop, le service de capture force l'état de survol des liens et des boutons, le compare à l'état normal et crée des variantes Default/Hover avec une interaction de prototype au survol. Les menus ouverts par JavaScript à l'entrée de la souris ne sont pas capturés.
Les transformations skew et 3D, clip-path avec path(), les masques multicouches et les couleurs Display-P3 ne sont pas encore convertis. Les canvas intégrés, cartes et iframes deviennent des images de leur bloc plutôt que des calques.
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