Documentation HTML to Frames

1. Ouvrez Figma (application de bureau ou navigateur) et allez sur la page Community de HTML to Frames.
2. Cliquez sur Open in… ou Try it out et choisissez un fichier. Le plugin est enregistré dans votre compte.
3. Les fois suivantes, lancez-le depuis le menu : Plugins → HTML to Frames — ou appuyez sur ⌘/ (Ctrl / sous Windows) et tapez HTML to Frames.

Le plugin fonctionne dans les fichiers Figma Design. Aucun compte n'est nécessaire : le plan Free démarre automatiquement, et Pro s'achète directement dans Figma.

1. Dans l'onglet Import, laissez la source sur Link et collez une URL, par exemple votre propre page d'accueil.
2. Sous Screens (écrans), Desktop est sélectionné et affiche Site width — le plugin mesurera la largeur de design réelle de la page pendant l'import. Avec Pro, cliquez sur Responsive set pour ajouter Tablet et Mobile.
3. Laissez Auto Layout activé. Cliquez sur Import.
4. Suivez la progression : la page est rendue, les images sont préparées, les calques sont créés, puis l'Auto Layout est appliqué et vérifié.
5. L'écran de résultat indique le nombre de frames et de calques, la part de frames en Auto Layout, les polices manquantes et les éventuels avertissements.

Votre page apparaît sur le canvas sous forme d'une rangée de frames nommés comme yoursite.com — Desktop (1920). Chaque texte, image et vecteur est modifiable.

Link

N'importe quelle page publique. Les pages qui nécessitent une connexion, qui tournent en localhost ou sur un réseau privé ne sont pas accessibles au service de capture — utilisez l'extension Chrome pour celles-ci.

Multiple

Collez jusqu'à 10 liens, un par ligne. Ils sont importés l'un après l'autre, chacun dans sa propre rangée. Les pages d'un même site partagent une même largeur mesurée pour rester alignées.

Local file

Choisissez un fichier HTML, un dossier de site ou un .zip (jusqu'à 30 MB). Pour les dossiers, choisissez les pages à importer. Vous pouvez aussi choisir Paste code (coller du code) et coller du HTML avec du CSS inline ou intégré. Les fichiers sont ouverts depuis la mémoire dans un navigateur isolé et supprimés juste après l'import.

Browser

Collez une capture réalisée avec l'extension Chrome HTML to Frames (⌘V), déposez un fichier .h2f, ou connectez l'extension une fois pour utiliser Send to Figma. Voir Extension Chrome.

Outils d'IA

Connectez un client MCP dans l'onglet AI et laissez votre outil d'IA envoyer des pages. Voir Outils d'IA (MCP).

Site width est mesurée au moment de l'import : les mises en page avec des sections bord à bord sont placées dans un frame de 1920 avec le contenu centré ; les sites réellement centrés dans un conteneur utilisent la largeur de ce conteneur (par exemple 1200 ou 1280) ; les mises en page fluides utilisent 1440. Free importe un écran par page ; Pro et Team jusqu'à quatre. Tous les écrans d'une même page comptent pour un seul import.

Avant la création, le plugin vérifie quelles polices de la page ne sont pas disponibles dans Figma sur votre ordinateur. L'écran Missing fonts propose un remplacement pour chacune — d'abord une famille qui commence par le même mot, puis la première police installée de la pile de polices CSS, puis Inter. Recherchez et choisissez une autre famille si vous le souhaitez, puis décidez de mémoriser ce choix pour ce site ou pour tous les sites. Skip utilise les suggestions une seule fois sans les enregistrer. Effacez les choix enregistrés avec forget saved sous l'option.

Avec Styles & variables activé (Pro) :

• Les couleurs utilisées au moins deux fois — ainsi que celles qui correspondent aux propriétés personnalisées CSS du site — deviennent des variables dans une collection nommée Colors · yoursite.com. Les noms proviennent des tokens du site quand c'est possible (--brand-primary → brand/primary), sinon de la teinte et de la nuance (blue/500).
• La typographie utilisée au moins deux fois, ou de 20 px et plus, devient des styles de texte nommés comme yoursite.com/Heading/32/40 Bold.
• Les ombres répétées deviennent des styles d'ombre sm, md, lg, xl.
• Si votre fichier contient déjà une variable ou un style avec la même valeur, il est réutilisé.

Snap to my file's styles va plus loin et rattache les correspondances approchantes à votre propre design system.

Avec Components & hover states activé, les structures répétées deviennent des composants placés dans un frame Components · yoursite.com à côté de la page, et chaque occurrence devient une instance avec ses propres textes et images. Les éléments qui ont une apparence au survol deviennent des ensembles de composants avec les variantes State=Default et State=Hover.

Choisissez Color scheme → Light + Dark (Pro). La page est lue deux fois — avec prefers-color-scheme: light et dark — sans rechargement. Chaque couleur qui change devient une variable avec une valeur Light et une valeur Dark, et une copie sombre de chaque écran est placée à côté, avec la collection réglée sur Dark. Les fichiers Figma du plan Starter n'autorisent qu'un mode par collection ; dans ce cas, le plugin vous indique que le mode sombre a été ignoré. Les sites qui changent de thème uniquement via un bouton JavaScript (et non selon le réglage système) seront importés dans leur thème par défaut.

• Les liens continuent de fonctionner en mode Present : les liens externes ouvrent leur URL ; les liens vers des pages que vous avez aussi importées deviennent des interactions Navigate.
• Les en-têtes fixes et sticky restent en place pendant le défilement ; les carrousels horizontaux et zones de défilement défilent.
• Après un import, Import linked pages liste les autres pages du même site trouvées sur la page. Cochez celles que vous voulez : elles sont importées comme un import Multiple avec les mêmes réglages.
• Sélectionnez un frame importé et cliquez sur Re-import pour récupérer une version à jour depuis l'URL source enregistrée.

Utilisez l'extension Chrome HTML to Frames, gratuite, pour les pages que le service de capture ne peut pas atteindre : pages avec connexion, localhost, intranets et l'état exact d'une page (un menu déroulant ouvert, un formulaire rempli).

1. Installez l'extension et épinglez-la dans la barre d'outils.
2. Ouvrez la page et cliquez sur l'extension → Capture this page, ou Select an element pour ne capturer qu'une partie (déplacez la souris, ↑ pour le parent, ↓ pour revenir, Entrée pour choisir, Échap pour annuler).
3. La capture est copiée dans votre presse-papiers (ou téléchargée sous forme de fichier .h2f).
4. Dans Figma, ouvrez le plugin → onglet Browser → appuyez sur ⌘V ou déposez le fichier.

Send to Figma : dans l'onglet Browser du plugin, cliquez sur Connect pour obtenir un code à usage unique, puis saisissez-le dans l'extension sous Connect to Figma. Dès lors, le bouton principal devient Send to Figma et les captures arrivent directement dans votre plugin ouvert.

L'extension capture un écran à la largeur actuelle de la fenêtre — redimensionnez la fenêtre pour obtenir les mises en page tablette ou mobile. Chaque capture compte pour un import.

1. Ouvrez le plugin → onglet AI → Connect an AI tool. Un token personnel est créé et affiché une seule fois.
2. Copiez la configuration de votre client : Claude Code (une commande claude mcp add), Claude Desktop (une configuration utilisant mcp-remote) ou Cursor & others (JSON avec URL et en-tête).
3. Gardez le plugin ouvert dans Figma et demandez à votre outil d'IA d'importer une page, par exemple : « Crée une page de tarifs avec trois plans et envoie-la dans Figma avec HTML to Frames. »

Outils disponibles : import_html (HTML jusqu'à 2 MB, nom et écrans facultatifs), import_url (n'importe quelle URL publique) et import_status. L'import s'exécute dans votre plugin avec votre plan, et l'outil reçoit un résumé — frames, calques, part d'Auto Layout et polices manquantes. Create a new token invalide l'ancien ; Disconnect le supprime. Les connecteurs web de claude.ai ne sont pas encore pris en charge.

Un import = une page avec tous ses écrans. Les compteurs sont remis à zéro chaque mois (UTC). Si une très longue page est coupée par une limite de plan, le frame reçoit une bande violette Capture limit pour que vous le sachiez toujours. Achetez Pro dans l'onglet Plan via le paiement Figma ; les membres Team saisissent leur clé de licence dans ce même onglet et peuvent la retirer d'un compte pour libérer le poste.

La page n'a pas le même rendu que dans mon navigateur. Activez Hide cookie banners & popups, essayez Extra wait pour les animations lentes, ou utilisez l'extension Chrome pour capturer exactement ce que vous voyez.

« This address can't be reached. » Le service de capture n'ouvre que des adresses publiques. Pour localhost, un staging derrière un VPN ou des pages avec connexion, utilisez l'extension Chrome.

Le texte passe à la ligne différemment. C'est généralement une différence de police — associez la police manquante à la bonne famille dans l'écran Missing fonts.

Certains frames n'ont pas d'Auto Layout. C'est volontaire lorsque l'Auto Layout déplacerait des éléments. Ouvrez la liste des diagnostics sur l'écran de résultat pour en voir la raison (espacements irréguliers, chevauchement, taille de texte).

Quelque chose est vide. Les cartes, iframes et scènes WebGL sont capturées comme images ; si l'une reste vide, le contenu nécessitait probablement une action de l'utilisateur ou une connexion.

« Limit reached. » Vous avez utilisé les imports Free de ce mois. Ils sont remis à zéro le 1er (UTC) ; vous pouvez aussi passer à Pro pour des imports illimités.

Toujours bloqué ? Écrivez à [email protected] en indiquant l'URL et en joignant une capture d'écran.