Localhost to Figma : capturer une page avec l'extension Chrome

Un import d'URL fonctionne quand la page est publique. Or bon nombre des écrans dont vous avez réellement besoin dans Figma ne le sont pas : la branche de fonctionnalité qui tourne sur localhost:3000, un tableau de bord d'administration protégé par une connexion, un serveur de staging sur le réseau du bureau, ou un tunnel de commande avec des articles déjà dans le panier.

Pour ces cas, HTML to Frames propose une extension Chrome gratuite. Elle capture la page depuis votre propre navigateur, exactement comme vous la voyez, et la transmet au plugin Figma, qui la transforme en frames, textes, vecteurs et images modifiables avec Auto Layout. Ce guide explique comment passer du localhost à Figma, comment capturer des pages avec connexion et des états précis, et que faire en cas de problème.

Quand utiliser l'extension Chrome plutôt qu'une URL

La source Link du plugin rend les pages dans un navigateur isolé, sur le service de capture HTML to Frames. Ce navigateur voit ce que voit un visiteur anonyme sur l'Internet public. Il ne peut atteindre ni votre machine, ni votre réseau privé, ni votre session connectée.

Utilisez l'extension quand la page est :

• Exécutée en local, comme localhost, 127.0.0.1 ou un serveur de développement sur votre réseau.
• Protégée par une connexion, comme les tableaux de bord SaaS, panneaux d'administration, paramètres de compte ou portails clients.
• Sur un réseau privé, comme les environnements de staging sur un VPN ou les outils intranet.
• Dans un état précis, comme un menu déroulant ouvert, un formulaire rempli, une fenêtre modale, un panier avec des produits ou un message d'erreur après envoi.

Pour les pages publiques, un import URL to Figma reste la voie la plus simple, et il prend en charge les Responsive sets en un clic.

Ce qu'est l'extension (et ce qu'elle n'est pas)

L'extension s'exécute dans votre navigateur. Elle ne nécessite aucun compte, ne contient aucun outil d'analytics et ne charge aucun code distant. Elle n'envoie rien à HTML to Frames, sauf si vous choisissez Send to Figma. Même dans ce cas, la capture n'est conservée en mémoire que jusqu'à ce que votre plugin la récupère, pendant 30 minutes au maximum.

Une capture compte pour un import sur votre plan. L'extension elle-même est gratuite. Pour en savoir plus, consultez la page de l'extension Chrome.

Pas à pas : du localhost à Figma

1. Installez l'extension Chrome HTML to Frames et épinglez-la dans la barre d'outils.
2. Lancez votre serveur de développement et ouvrez la page dans Chrome, par exemple http://localhost:3000/settings.
3. Réglez la largeur de la fenêtre sur l'écran souhaité (voir plus bas).
4. Mettez la page dans l'état voulu : connecté, données chargées, menu ouvert.
5. Cliquez sur l'icône de l'extension et choisissez de capturer la page entière ou de sélectionner un élément.
6. Transmettez la capture à Figma, via le presse-papiers ou un fichier .h2f, ou avec Send to Figma.
7. Dans Figma, le plugin crée les calques et affiche l'écran de résultat avec les frames, les calques, la part d'Auto Layout et les éventuels avertissements.

Page entière ou élément unique

L'extension propose deux modes de capture.

Capturer la page entière

C'est le mode par défaut pour les écrans que vous voulez relire ou refondre dans leur ensemble : un tableau de bord, une page de paramètres, une landing page en développement. Vous obtenez un frame pour la page, avec des frames imbriqués qui reflètent le DOM.

Sélectionner un seul élément

Souvent, vous n'avez besoin que d'un composant : une carte de tarif, la barre de navigation, un tableau de données, une fenêtre modale. Choisissez la sélection d'élément, puis :

• Survolez la page ; l'élément sous votre curseur est mis en surbrillance.
• Appuyez sur ↑ pour passer à l'élément parent, sur ↓ pour passer à un enfant.
• Appuyez sur Entrée pour capturer l'élément en surbrillance.
• Appuyez sur Échap pour annuler.

La capture d'élément est le moyen le plus rapide de constituer une référence de composants à partir d'un produit en ligne, ou d'envoyer un seul widget à un designer pour relecture sans le reste de la page.

Deux modes de transmission : presse-papiers/.h2f ou Send to Figma

Presse-papiers et .h2f

La capture est copiée dans votre presse-papiers, ou enregistrée dans un fichier .h2f. Dans Figma, ouvrez le plugin, allez dans l'onglet Browser et collez. Un fichier .h2f est pratique quand quelqu'un d'autre capture la page (par exemple un PM ayant accès au tableau de bord d'un client) et qu'un designer l'importe plus tard.

Send to Figma

Si vous capturez souvent, connectez une fois l'extension à votre plugin avec un code à usage unique. Ensuite, les captures arrivent directement dans le plugin ouvert, sans étape de collage. Gardez le plugin ouvert dans Figma pendant que vous travaillez.

Une capture = un écran à la largeur actuelle de la fenêtre

L'extension capture ce que rend votre navigateur : une capture correspond à un écran à la largeur actuelle de la fenêtre. Si votre fenêtre fait 1440 px de large, vous obtenez un frame desktop de 1440.

Pour capturer d'autres breakpoints, redimensionnez la fenêtre et capturez à nouveau :

• Tablette : redimensionnez à environ 768 px de large et capturez.
• Mobile : redimensionnez à environ 390 px de large et capturez.

La barre d'outils d'appareils des DevTools de Chrome est un moyen pratique de régler des largeurs exactes. Chaque capture compte pour un import. Si la page est publique, la source Link du plugin peut produire le Responsive set complet (Desktop + Tablet + Mobile) en un seul import.

Capturer des états qu'une URL ne peut pas reproduire

L'extension capture l'état actuel de la page, ce qui donne accès à des écrans autrement fastidieux à recréer :

• Menus et listes déroulantes ouverts. Ouvrez le menu, puis capturez la page ou sélectionnez l'élément du menu.
• Formulaires remplis et erreurs de validation. Remplissez les champs, envoyez pour déclencher les erreurs, puis capturez.
• Paniers et tunnels de commande. Ajoutez des produits et capturez le panier avec de vraies lignes d'articles.
• États vide, en chargement et rempli. Capturez le même tableau de bord avec et sans données pour constituer un inventaire des états.
• Fenêtres modales et notifications. Déclenchez-les et capturez-les pendant qu'elles sont à l'écran.

Pour les équipes produit, c'est le moyen le plus rapide de documenter chaque état d'un parcours dans Figma avant une refonte ou un test utilisateur.

Ce qui est transposé

L'extension alimente le même moteur de conversion que toutes les autres sources : vous bénéficiez de l'ensemble des fonctionnalités présentées sur la page des fonctionnalités — mise en page, texte à styles mixtes, dégradés, images, SVG en vecteurs modifiables, bordures, ombres, flou, ::before/::after, champs de formulaire, shadow DOM et ordre du z-index.

L'Auto Layout est déduit de la géométrie mesurée par le navigateur et vérifié : la position de chaque enfant est contrôlée à 2 px près, et si cela ne tient pas, un plan plus simple est essayé ou le frame conserve ses positions absolues avec des contraintes adaptées. Dans nos tests, l'Auto Layout a été déduit sur environ 86 à 97 % des frames, selon le site. Si vous écrivez vous-même le front-end, ce guide de correspondance montre comment écrire un CSS qui s'importe proprement.

Le contenu intégré qui ne peut pas devenir des calques, comme les iframes avec des cartes, les vidéos sans image d'aperçu ou les canvas WebGL, arrive sous forme de capture de son bloc.

Une check-list rapide avant capture

Parcourez cette liste avant chaque session de capture pour éviter de refaire le travail :

• Largeur : la fenêtre est-elle au breakpoint voulu, avec le zoom du navigateur à 100 % ?
• Données : la page est-elle entièrement chargée, y compris graphiques, images et sections différées ?
• État : les menus, fenêtres modales ou erreurs de formulaire sont-ils visibles exactement comme vous les voulez dans Figma ?
• Contenu : êtes-vous passé sur un compte de test ou des données fictives là où des données clients réelles apparaîtraient ?
• Périmètre : avez-vous besoin de la page entière, ou un seul élément serait-il plus clair pour la relecture ?
• Transmission : le plugin est-il ouvert dans Figma si vous utilisez Send to Figma ?

Deux minutes ici vous épargnent plusieurs nouvelles captures du même écran.

Confidentialité des pages avec connexion et internes

Capturer un tableau de bord, c'est capturer tout ce qu'il affiche. Quelques règles pratiques :

• La capture a lieu dans votre navigateur. Rien n'en sort, sauf si vous collez dans Figma ou utilisez Send to Figma.
• Send to Figma est éphémère. La capture attend en mémoire que votre plugin la récupère, 30 minutes au maximum, et n'est pas écrite sur disque.
• Masquez d'abord les données sensibles. Utilisez des comptes de test ou des données fictives quand c'est possible, car ce qui est à l'écran devient des calques de texte dans votre fichier Figma.
• Votre fichier Figma n'est pas lu. Le plugin se contente d'écrire des calques et de lire les métadonnées de ses propres frames.

Consultez la page sécurité pour la politique complète.

Dépannage

La capture ne contient pas le contenu chargé tardivement

Attendez que la page soit entièrement chargée, y compris les sections différées et les graphiques, avant de capturer. Faites défiler la page une fois si le contenu se charge au défilement.

La mise en page diffère de ce que je vois

Vérifiez la largeur de la fenêtre ; la capture reflète exactement la largeur actuelle. Assurez-vous aussi qu'aucun zoom n'est appliqué dans le navigateur.

Send to Figma ne fait rien

Vérifiez que le plugin est ouvert dans Figma. Si l'appairage date un peu ou si vous avez changé de machine, appairez à nouveau avec un nouveau code à usage unique. Les captures attendent jusqu'à 30 minutes : ouvrir le plugin dans ce délai suffit pour les recevoir.

Le collage dans l'onglet Browser ne fonctionne pas

Votre presse-papiers a peut-être été écrasé par une autre copie. Capturez à nouveau, ou enregistrez un fichier .h2f et chargez-le à la place.

Les polices ne sont pas les bonnes

Les polices web locales ou sous licence ne sont peut-être pas installées sur votre machine. L'écran Missing fonts du plugin propose des remplacements avant la création et mémorise vos choix pour chaque site.

Certains frames ne sont pas en Auto Layout

L'écran de résultat indique pourquoi un frame est resté en position absolue. Il s'agit souvent de contenus qui se chevauchent ou de marges négatives. Le frame correspond quand même à la page ; il conserve simplement ses positions absolues avec des contraintes.

Du localhost à Figma dans un workflow de développement

Pour les développeurs front-end, l'extension transforme le handoff en voie à double sens :

1. Construisez la fonctionnalité en local.
2. Capturez les nouveaux écrans en largeur desktop et mobile.
3. Envoyez-les dans Figma à côté du design d'origine.
4. Les designers relisent l'implémentation réelle, commentent et ajustent.
5. Vous corrigez, recapturez et comparez.

Si vous développez avec des outils d'IA, il existe aussi une voie directe : Claude Code, Claude Desktop ou Cursor peuvent envoyer du HTML au plugin via MCP. Voir De l'IA à Figma via MCP.

Pour commencer

Installez l'extension Chrome, ouvrez votre build local et capturez d'abord un seul élément, une carte ou un bouton, pour voir comment il est restitué. Capturez ensuite la page entière en largeur desktop et mobile. La documentation détaille l'appairage et l'onglet Browser, et la page des tarifs explique comment les captures sont décomptées de vos imports.