Extension Chrome gratuite
Extension Chrome vers Figma pour les pages avec connexion et localhost
Capturez ce qu'affiche votre propre navigateur, y compris tableaux de bord, builds locaux et menus ouverts, et transformez-le en calques Figma modifiables.
- Fonctionne avec les connexions, localhost et les réseaux privés
- Capturez la page entière ou un seul élément
- Sans compte, sans analytics, sans code distant
Bientôt sur le Chrome Web Store
Une extension Chrome vers Figma résout les cas qu'un import d'URL ne peut pas atteindre. Le service de capture HTML to Frames visite les pages en tant que visiteur anonyme : il ne peut donc pas voir votre tableau de bord d'administration, l'application derrière votre connexion, un build en localhost sur votre ordinateur ou un serveur de staging sur un réseau privé. L'extension Chrome gratuite HTML to Frames capture plutôt depuis votre propre navigateur, avec la session sur laquelle vous êtes déjà connecté.
Elle capture aussi l'état actuel de la page. Si un menu déroulant est ouvert, un formulaire à moitié rempli, une fenêtre modale affichée ou un panier contient trois articles, c'est exactement ce qui arrive dans Figma. Pour les product managers qui documentent des parcours et les designers qui auditent des états réels, c'est souvent la seule façon pratique d'intégrer ces écrans dans un fichier de design sans les recréer.
Vous pouvez capturer la page entière, ou passer au sélecteur d'élément pour récupérer un seul composant. Survolez pour mettre en surbrillance, utilisez les flèches pour passer à l'élément parent ou enfant, appuyez sur Entrée pour capturer et sur Échap pour annuler. La capture est copiée dans votre presse-papiers, ou dans un fichier .h2f, et vous la collez dans l'onglet Browser du plugin. Vous pouvez aussi connecter une fois l'extension à votre plugin avec un code à usage unique et utiliser Send to Figma, qui envoie les captures directement dans le plugin ouvert.
Les calques obtenus sont les mêmes que pour n'importe quel autre import : texte modifiable, vecteurs, images et Auto Layout vérifié. Une capture compte pour un import.
Les développeurs front-end trouveront un pas-à-pas complet dans Du localhost à Figma avec l'extension Chrome. Pour les pages publiques, URL to Figma ne nécessite aucune extension, et la page sécurité explique précisément ce que l'extension envoie.
Capturer un onglet avec l'extension
- 01
Installez l'extension Chrome
Ajoutez l'extension gratuite HTML to Frames à Chrome ; aucun compte n'est nécessaire.
- 02
Ouvrez la page dans l'état souhaité
Connectez-vous, lancez votre serveur local, ouvrez le menu ou remplissez le formulaire exactement comme vous voulez le capturer.
- 03
Capturez la page ou un élément
Prenez la page entière, ou utilisez le sélecteur pour mettre en surbrillance et choisir un élément.
- 04
Collez ou envoyez dans Figma
Collez dans l'onglet Browser du plugin, ou utilisez Send to Figma après un appairage unique avec un code à usage unique.
Ce que l'extension peut atteindre
Pages avec connexion
Tableaux de bord, panneaux d'administration et pages de compte capturés avec la session que vous avez déjà.
localhost et réseaux privés
Serveurs de développement locaux, staging et pages intranet qu'un service externe ne peut pas atteindre.
États d'UI exacts
Menus ouverts, formulaires remplis, fenêtres modales et paniers sont capturés tels qu'ils apparaissent à l'écran.
Sélecteur d'élément
Survolez pour mettre en surbrillance, flèche haut ou bas pour passer du parent à l'enfant, Entrée pour capturer.
Send to Figma
Appairez une fois avec un code à usage unique et les captures arrivent directement dans votre plugin ouvert.
Confidentielle par conception
Sans compte, sans analytics, sans code distant ; rien n'est envoyé si vous n'utilisez pas Send to Figma.
Du localhost à Figma pour les développeurs front-end
Les développeurs ont souvent besoin de montrer aux designers ce qui a réellement été construit, ou d'amener un prototype codé dans Figma pour le faire relire. Les options habituelles sont les captures d'écran, que personne ne peut modifier, ou la reconstruction de l'écran à la main. L'extension offre une troisième voie : capturer localhost directement.
Comme elle s'exécute dans votre propre navigateur, l'extension voit exactement ce que rend votre serveur de développement, notamment :
- Des branches de fonctionnalités qui ne sont encore déployées nulle part
- Des pages qui dépendent de données locales ou d'API simulées
- Des environnements de staging sur un VPN ou un réseau privé
- Des bacs à sable de composants et des pages de stories isolées
Utilisez le sélecteur d'élément pour capturer un seul composant plutôt que la page entière. Mettez-le en surbrillance, appuyez sur la flèche haut pour remonter à son conteneur si vous avez besoin du padding, puis appuyez sur Entrée. Le résultat est un frame avec un Auto Layout déduit du CSS rendu : une rangée Flexbox arrive sous forme de frame Auto Layout horizontal, avec ses espacements et son padding.
Le handoff devient ainsi une voie à double sens : les designers obtiennent des frames modifiables de l'implémentation réelle et peuvent commenter ou ajuster ce qui a été livré. Le guide CSS Flexbox et Grid vers Auto Layout montre comment les mises en page sont transposées.
Coller ou Send to Figma
Il existe deux façons de faire passer une capture de Chrome à Figma, et les deux produisent les mêmes calques.
Coller
Après une capture, le résultat est placé dans votre presse-papiers. Passez dans Figma, ouvrez HTML to Frames, allez dans l'onglet Browser et collez. Si vous préférez, enregistrez plutôt la capture dans un fichier .h2f et importez-la plus tard dans le plugin. Dans ce mode, rien ne quitte votre ordinateur.
Send to Figma
Connectez une fois l'extension à votre plugin à l'aide d'un code à usage unique. Ensuite, chaque capture arrive directement dans le plugin ouvert, sans passer par le presse-papiers, ce qui est plus rapide quand vous capturez plusieurs états à la suite.
Avec Send to Figma, la capture est conservée en mémoire de notre côté jusqu'à ce que votre plugin la récupère, pendant 30 minutes au maximum. Elle n'est pas écrite sur disque.
| Coller | Send to Figma | |
|---|---|---|
| Configuration | Aucune | Code d'appairage à usage unique |
| Les données quittent votre ordinateur | Non | Conservées en mémoire jusqu'à 30 minutes |
| Idéal pour | Des captures occasionnelles | Capturer rapidement de nombreux états |
Dans les deux cas, une capture compte pour un import sur votre plan, et les calques obtenus sont identiques.
Ce que l'extension fait, et ne fait pas, de vos données
Une extension capable de lire des pages avec connexion mérite un examen attentif. L'extension Chrome HTML to Frames est conçue pour en faire le moins possible :
- Elle s'exécute dans votre navigateur. Les captures sont réalisées localement à partir de la page que vous consultez.
- Sans compte. Vous n'avez ni à vous inscrire ni à vous connecter pour l'utiliser.
- Sans analytics. L'extension ne contient aucun suivi d'utilisation.
- Sans code distant. L'extension ne télécharge ni n'exécute de code provenant d'un serveur.
- Rien n'est envoyé par défaut. Les données ne nous parviennent que si vous choisissez Send to Figma, et elles attendent alors votre plugin en mémoire pendant 30 minutes au maximum.
La capture ne contient que ce qui figure sur la page que vous choisissez de capturer. Avant de capturer une page qui affiche des données personnelles ou des données clients, demandez-vous si ces données doivent se retrouver dans un fichier Figma partagé, et utilisez le sélecteur d'élément pour ne récupérer que la partie nécessaire.
Côté Figma, le plugin ne lit pas le contenu de votre fichier. Il écrit les nouveaux calques et ne lit que les métadonnées de ses propres frames. La page sécurité décrit l'ensemble du dispositif, et la documentation couvre l'installation et l'appairage. L'extension est en cours de préparation pour le Chrome Web Store.
Questions fréquentes
L'import d'URL charge les pages en tant que visiteur anonyme depuis notre service de capture : il ne peut pas atteindre les pages avec connexion, localhost ou les réseaux privés, et il voit toujours l'état par défaut. L'extension capture depuis votre propre navigateur, avec votre session et l'état dans lequel se trouve la page.
Oui. Passez au sélecteur d'élément, survolez pour mettre un élément en surbrillance, utilisez la flèche haut pour passer à son parent ou la flèche bas pour passer à son enfant, puis appuyez sur Entrée pour capturer. Appuyez sur Échap pour annuler. L'élément arrive dans son propre frame avec des calques modifiables.
Appairez une fois l'extension avec votre plugin à l'aide d'un code à usage unique. Ensuite, chaque capture est livrée directement dans le plugin ouvert. La capture attend en mémoire 30 minutes au maximum que le plugin la récupère, et n'est jamais écrite sur disque.
Non. Elle n'a ni compte, ni analytics, ni code distant. Elle ne nous envoie rien, sauf si vous utilisez Send to Figma pour une capture. Si vous collez à la place, la capture transite par votre presse-papiers ou un fichier .h2f et ne quitte jamais votre ordinateur.
Oui. Chaque capture réalisée avec l'extension compte pour un import sur votre plan. Le plan Free inclut 10 imports par mois, et Pro et Team sont illimités dans la limite d'un usage raisonnable. Les compteurs d'utilisation sont remis à zéro chaque mois (UTC), et une capture n'est comptée qu'une seule fois.
Oui. L'extension Chrome HTML to Frames est gratuite et ne nécessite aucun compte. Les captures sont importées via le plugin Figma et comptent dans votre plan, en commençant par l'offre Free. L'extension est en cours de préparation pour sa publication sur le Chrome Web Store.
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