Plugin Figma · Extension Chrome · MCP
N'importe quelle page web, en vrais calques Figma.
HTML to Frames convertit des URL en ligne, du HTML local, des onglets Chrome et du code généré par IA en frames Figma modifiables et responsive — avec un Auto Layout vérifié, pour que votre design ne casse jamais.
Plan Free : 10 imports par mois. Sans compte, sans carte bancaire.
Bientôt sur la Figma Community
- Auto Layout vérifié
- Desktop · Tablet · Mobile
- Variables et styles
- Composants et états de survol
Cinq façons d'importer. Un résultat propre.
- LinkCollez n'importe quelle URL publique.
- MultipleJusqu'à 10 liens d'un coup, sur tous les plans.
- Local fileFichier HTML, dossier de site, .zip ou code collé.
- BrowserPages avec connexion, localhost, menus ouverts.
- Outils d'IAClaude, Cursor et tout client MCP.
Comment ça marche
De l'URL aux frames Auto Layout en quatre étapes
Voici le vrai parcours du plugin — le même panneau que vous utiliserez dans Figma.
yoursite.com — Desktop (1440)
Tablet (768)
Mobile (390)
3 frames importés
Auto Layout sur 60 frames sur 77 · 23 variables de couleur · 19 styles de texte · 10 composants
- 01
Collez un lien
Ou déposez un dossier, collez du code, envoyez un onglet Chrome ou laissez votre outil d'IA envoyer une page.
- 02
Choisissez vos écrans
Desktop s'ouvre à la largeur de design réelle du site — mesurée, pas devinée. Ajoutez Tablet et Mobile en un clic.
- 03
Importez
Un navigateur isolé affiche la page comme la voit un visiteur normal, masque les bannières de cookies et charge le contenu différé.
- 04
Modifiez tout de suite
Frames, textes, vecteurs et images arrivent avec Auto Layout, variables, styles de texte et composants.
2 px
L'Auto Layout est comparé à la mise en page du navigateur, avec une tolérance de 2 px.
86–97%
Part des frames ayant reçu l'Auto Layout sur les vrais sites que nous avons testés.
10
Liens dans un seul import Multiple — inclus aussi dans le plan Free.
4
Écrans par import avec Pro : Desktop, Laptop, Tablet et Mobile.
Des chiffres issus de nos propres tests sur de vrais sites — pas des calculs marketing.
Le moteur Auto Layout
Un Auto Layout qui ne casse jamais votre design
La plupart des convertisseurs devinent une mise en page et croisent les doigts. HTML to Frames construit d'abord la page au pixel près, puis travaille de l'intérieur vers l'extérieur : il déduit les piles, les rangées qui passent à la ligne, les espacements, le padding et l'alignement à partir de la géométrie mesurée par le navigateur, applique l'Auto Layout et vérifie la position de chaque enfant. Si un élément bouge de plus de 2 px, un plan plus simple est essayé — et si celui-ci échoue aussi, le frame conserve ses positions exactes avec des contraintes adaptées. L'écran de résultat vous indique même pourquoi un frame est resté en positionnement absolu.
- Le contenu centré devient Center ; les cartes de même taille deviennent Fill
- Les conteneurs à largeur maximale restent centrés quand vous redimensionnez
- Les frames absolus reçoivent des contraintes Stretch, Scale, Center ou Min/Max
- Une liste de diagnostics explique chaque frame resté en positions absolues
Fonctionnalités
Tout ce que vous auriez sinon reconstruit à la main
HTML to Frames lit la page comme un navigateur la met en page, puis écrit des calques Figma comme un designer les construirait.
Auto Layout vérifié
Rangées, piles et grilles deviennent de l'Auto Layout. Chaque frame est vérifié après application — s'il ne correspond pas, la modification est annulée.
Responsive set
Desktop, Tablet et Mobile en un seul import, capturés en parallèle et disposés côte à côte.
Largeur de site mesurée
Desktop s'ouvre à la largeur de design réelle de la page — 1920 pour les mises en page pleine largeur, la largeur du conteneur pour les sites centrés.
Variables et styles
Les couleurs deviennent des variables nommées d'après les tokens CSS du site ; la typographie et les ombres deviennent des styles. Ceux qui existent déjà sont réutilisés.
Composants et survol
Les cartes, boutons et éléments de menu répétés deviennent des composants avec instances ; les apparences au survol deviennent des variantes.
Modes Light + Dark
Un import, deux modes : une collection de variables avec des valeurs Light et Dark, et une copie sombre de chaque écran.
Prêt pour le prototype
Les liens restent cliquables, les pages importées sont reliées entre elles, les en-têtes fixes et zones de défilement fonctionnent en mode Present.
Correspondance des polices
Des polices manquantes ? Choisissez les remplacements une fois — ils sont mémorisés pour chaque site.
Confidentiel par conception
Les résultats sont livrés une seule fois et jamais écrits sur disque. Les fichiers envoyés sont supprimés à la fin de l'import.
Pensé pour les design systems
Des imports qui s'intègrent à votre design system
Les couleurs utilisées plus d'une fois deviennent des variables — nommées d'après les propriétés personnalisées CSS du site lorsqu'elles existent, comme brand/primary. La typographie devient des styles de texte, les ombres répétées des styles d'ombre. Avec Snap to my file's styles (s'aligner sur les styles de mon fichier), les couleurs et la typographie presque identiques aux vôtres sont rattachées à vos propres variables et styles : l'import semble avoir été construit dans votre fichier.
- Jusqu'à 96 variables de couleur et 48 styles de texte par site
- Réutilise les variables et styles qui existent déjà dans votre fichier
- Light + Dark capturés dans une seule collection à deux modes
- Composants avec variantes Default / Hover et interactions au survol
Conçu pour celles et ceux qui travaillent entre le web et Figma
Designers produit et UI
Démarrez une refonte à partir du vrai site, pas d'une capture d'écran. Auditez espacements, typographie et couleurs en quelques secondes.
Agences de design
Importez le site actuel d'un client dans Figma et présentez une proposition le jour même. Plan Team pour cinq postes.
Équipes design system
Retrouvez chaque couleur et chaque style typographique réellement utilisés par un produit, rattachés à vos variables.
Développeurs front-end
Transmettez votre travail en localhost ou en staging aux designers sous forme de frames Figma modifiables.
Créateurs avec l'IA
Envoyez l'UI de Claude Code, Claude Desktop ou Cursor directement dans votre fichier Figma.
Étudiants
Décortiquez les meilleurs sites calque par calque et apprenez comment ils sont construits.
Des calques modifiables plutôt que des captures ou une reconstruction
| Capture d'écran | Reconstruction manuelle | HTML to Frames | |
|---|---|---|---|
| Texte modifiable | Non | Oui | Oui |
| Auto Layout | Non | Oui, à la main | Oui, vérifié |
| Variables et styles | Non | À la main | Générés ou réutilisés |
| Tablette et mobile | Captures séparées | Des heures de travail en plus | Un seul import |
| Temps pour une page | Quelques secondes | Des heures | De quelques secondes à une minute |
Des tarifs justes, remise de lancement incluse
Commencez gratuitement. Pro est illimité pour $7 par mois au lancement — et les premiers clients conservent ce prix.
- 10 imports par mois
- 1 écran par import
- Import Multiple — jusqu'à 10 liens
- Link, fichiers locaux, extension Chrome, outils d'IA
- Auto Layout vérifié
- Largeur de site mesurée
- Correspondance des polices
- Liens de prototype
Pro
Prix de lancementImports illimités et toute la boîte à outils, achetés directement dans Figma.
- Imports illimités (usage raisonnable : 1 000 / mois)
- Jusqu'à 4 écrans par import
- Styles et variables
- Snap to my file's styles
- Composants et variantes de survol
- Modes de variables Light + Dark
- Largeurs personnalisées
- Calques détaillés, capture de référence, attente supplémentaire
Team
5 postesTout Pro pour toute votre équipe, avec une seule clé de licence.
- Tout ce qu'inclut Pro
- 5 postes sur une seule clé de licence
- Imports illimités (usage raisonnable : 5 000 / mois)
- Les postes peuvent être réattribués à d'autres personnes
Vos pages ne sont pas nos données
Les pages sont rendues dans un navigateur isolé et cloisonné (sandbox). Le résultat est livré une seule fois à votre plugin, puis supprimé — jamais écrit sur disque. Les fichiers envoyés sont effacés dès la fin de l'import. Pas de cookies, pas d'analytics, pas de publicité.
CSS to Figma Auto Layout : Flexbox et Grid vers Auto Layout
Flexbox et l'Auto Layout de Figma se ressemblent, mais ce n'est pas le même modèle. Ce guide technique fait correspondre les propriétés CSS aux réglages Auto Layout, explique pourquoi la vérification compte et montre comment écrire un CSS qui s'importe proprement.
10 min de lecturelocalhost to FigmaLocalhost to Figma : capturer une page avec l'extension Chrome
Certaines pages sont hors de portée d'un import d'URL : votre build en localhost, un tableau de bord protégé par une connexion, un menu ouvert à l'instant. L'extension Chrome gratuite HTML to Frames les capture depuis votre propre navigateur et les transforme en calques Figma modifiables.
9 min de lectureAI to FigmaAI to Figma : envoyer l'UI de Claude et Cursor dans Figma (MCP)
Les outils de code assistés par IA peuvent construire une UI fonctionnelle en quelques minutes, mais les designers en ont toujours besoin dans Figma. Voici comment connecter Claude Code, Claude Desktop ou Cursor à HTML to Frames via MCP et obtenir des calques modifiables plutôt que des captures d'écran.
9 min de lectureQuestions fréquentes
C'est un plugin Figma qui convertit des pages web en vrais calques Figma modifiables. Vous pouvez importer une URL en ligne, jusqu'à 10 liens à la fois, un fichier HTML local ou un dossier de site, du code collé, un onglet capturé avec l'extension Chrome, ou du HTML envoyé par un outil d'IA via MCP. Les pages arrivent sous forme de frames avec textes, vecteurs et images — avec Auto Layout, variables, styles et composants.
Non. Chaque titre est un calque de texte modifiable, chaque icône est un vecteur et chaque section est un frame. Seul le contenu qui n'est pas du HTML — une carte dans une iframe, une scène WebGL ou une vidéo sans image d'aperçu — est placé comme image de son bloc, pour que le reste de la page reste entièrement modifiable.
Le plugin applique l'Auto Layout puis vérifie la position de chaque enfant par rapport à la mise en page du navigateur, à 2 px près. Si un frame ne tient pas, il essaie une mise en page plus simple ou conserve les positions absolues avec des contraintes. Dans nos tests sur de vrais sites, 86 à 97 % des frames ont reçu l'Auto Layout ; les autres sont listés avec la raison.
Oui, avec l'extension Chrome gratuite HTML to Frames. Elle capture l'onglet dans votre propre navigateur — y compris les tableaux de bord connectés, localhost, les réseaux privés, les menus ouverts et les formulaires remplis — et l'envoie au plugin via le presse-papiers ou avec Send to Figma.
Desktop à la largeur de design mesurée du site, Laptop 1280, Tablet 768 et Mobile 390, plus des largeurs personnalisées avec Pro. Le Responsive set importe Desktop, Tablet et Mobile en un clic. Free inclut un écran par import ; Pro et Team jusqu'à quatre.
Free vous donne 10 imports par mois. Pro est illimité (usage raisonnable) pour $7 par mois au lancement, $9 au prix normal, et s'achète directement dans Figma. Team coûte $22 par mois au lancement, $29 au prix normal, pour cinq postes avec une clé de licence partagée. Un import correspond à une page avec tous ses écrans.
Elles sont rendues dans un navigateur isolé, livrées une seule fois à votre plugin puis supprimées de la mémoire — jamais écrites sur disque. Les fichiers envoyés sont supprimés à la fin de l'import. Le plugin ne lit pas votre fichier Figma et nous ne recevons ni votre nom ni votre e-mail de la part de Figma.
Oui. Connectez Claude Code, Claude Desktop, Cursor ou un autre client MCP depuis l'onglet AI du plugin. Votre outil d'IA peut alors appeler import_html ou import_url, et la page arrive dans votre fichier Figma ouvert, importée avec votre propre plan.
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