UnHTML contre copier des éléments de Chrome DevTools vers Figma

Non, Chrome DevTools ne peut pas copier un élément directement dans Figma. Chaque option de copie qu'il documente produit du texte : une déclaration CSS, une règle ou les mêmes valeurs en syntaxe JavaScript. Pour obtenir des calques modifiables, il faut l'extension Chrome de Figma ou un import de fichier. Cet article compare les trois voies pour que vous choisissiez selon l'entrée, le forfait et la tâche.

Ce que vous donne la copie DevTools

Le panneau Styles de Chrome DevTools propose un menu contextuel sur chaque propriété CSS. D'après la référence CSS de DevTools, les options sont :

• Copy declaration : la propriété et sa valeur en syntaxe CSS.
• Copy property : uniquement le nom de la propriété.
• Copy value : uniquement la valeur.
• Copy rule : la règle entière, sélecteur compris.
• Copy all declarations : toutes les propriétés et valeurs de la règle.
• Copy declaration as JS et Copy all declarations as JS : le même contenu en syntaxe JavaScript, que la référence juge pratique pour les bibliothèques CSS-in-JS.
• Copy all CSS changes : les modifications faites dans l'onglet Styles, rattachées à un réglage expérimental nommé "Sync CSS changes in the Styles tab".

Styles calculés

L'onglet Computed affiche le CSS réellement appliqué à un élément, ce qui permet d'ignorer les déclarations écrasées. Cochez Show All pour inclure les propriétés héritées. La référence ne décrit aucune fonction de copie dans l'onglet Computed : ces valeurs se lisent, elles ne s'exportent pas.

Le manque

Toutes les options ci-dessus produisent du texte. Rien dans le menu documenté ne crée un frame, un calque de texte ou un conteneur auto layout. Ce que vous copiez doit être reconstruit à la main dans Figma.

Reconstruire à la main le CSS copié

La voie manuelle fonctionne ainsi : vous copiez la règle d'un élément, vous créez un frame dans Figma, puis vous traduisez chaque déclaration vous-même. Une règle display: flex avec gap: 16px et justify-content: space-between devient un frame auto layout avec 16px d'espacement et une distribution space between. Le padding, le border radius, la famille de police et la couleur demandent chacun leur propre passe.

C'est correct pour un bouton, une carte ou une vérification rapide d'une valeur. Cela ne tient plus quand la page contient des conteneurs flex imbriqués, une grille ou cinquante éléments répétés. Il faut aussi vérifier les polices soi-même, car une famille non installée sur votre machine ne s'affichera pas comme sur la page.

La copie DevTools convient pour lire une valeur. Elle ne convient pas pour produire des calques.

L'extension Chrome de Figma

Figma publie une extension Chrome qui va directement de la page au canevas. Selon l'article du centre d'aide Figma, elle propose deux modes de capture :

1. Select element : survolez une zone, comme une carte ou un bouton, puis cliquez pour la capturer.
2. Capture page : la capture inclut les parties de la page situées hors de la zone visible.

Chaque capture arrive dans le plateau de la barre d'outils et est copiée dans le presse-papiers. Vous la collez dans un fichier Figma Design ou un tableau FigJam avec Cmd+V sur macOS ou Ctrl+V sous Windows et Linux. Le résultat est composé de calques modifiables : frames, texte, images et formes.

L'extension lit le code qui se trouve derrière les éléments web et le traduit. Figma indique qu'elle peut appliquer certaines propriétés d'auto layout, de police et des variables "if available" (si disponibles), et qu'elle tente de lier des variables de couleur, de nombre et de chaîne existantes, y compris celles de bibliothèques.

Deux vérifications avant de vous y fier. D'abord le forfait : l'extension est disponible sur tous les forfaits, mais Figma précise que code to canvas s'active une fois connecté à un forfait payant. Ensuite la fidélité : l'article d'aide ne liste aucune limite, et sa formulation ("certain" propriétés, variables "if available") laisse penser que la couverture varie. Testez-la sur votre propre page avant d'y adosser un flux de travail.

Ce que fait un import de fichier à la place

UnHTML est un plugin Figma qui travaille à partir d'un fichier plutôt que d'un onglet en direct. Il accepte trois entrées : un fichier .html autonome, un .webarchive Safari ou un scene.json capturé avec sa CLI open source. Vous choisissez Desktop (1440px), Mobile (390px) ou une largeur personnalisée, puis vous déposez le fichier sur le plugin.

Il convertit flex et grid en auto layout. Quand un frame ne peut pas reproduire la géométrie capturée, il se replie sur le positionnement absolu. Les polices que vous n'avez pas sont remplacées (Inter par défaut) et chaque remplacement figure dans un rapport d'import. Le résultat est composé de calques modifiables, pas d'un clone au pixel près.

Côté confidentialité, la valeur par défaut est zéro requête réseau. La récupération à distance est optionnelle, et les scripts, les gestionnaires d'événements en ligne et les URL javascript: sont retirés du balisage avant le rendu. Pour les sites en ligne, les ressources distantes ou les pages construites en JavaScript, la CLI ou le bookmarklet capturent d'abord un scene.json.

Le prix est unique et, selon l'éditeur, "launch pricing, and it may change" (tarif de lancement, susceptible de changer). Vérifié le 2026-10-10 :

Un budget de nœuds protège aussi contre les imports qui s'emballent, si bien qu'une très grande page peut s'arrêter avant une conversion complète.

Quelle voie pour quelle tâche

Utilisez la copie DevTools quand vous lisez du CSS. Utilisez l'extension quand vous avez un forfait Figma payant et voulez un élément ou une page en direct depuis un onglet ouvert. Utilisez un import de fichier quand vous voulez une page entière depuis un fichier enregistré, quand la limite gratuite de 500 calques suffit ou quand rien ne doit quitter votre machine. Pour les pages derrière une connexion, voyez comment fonctionne la capture d'une page derrière une connexion avec un fichier enregistré.

Comment tester chaque voie sur votre propre page

Choisissez une page réelle et faites les mêmes trois vérifications sur chaque voie, afin que la comparaison repose sur votre contenu et non sur une démo.

1. Comptez les calques. Notez le nombre de calques du résultat et si les éléments répétés (une rangée de cartes, une liste de navigation) arrivent en frames séparés. Le niveau gratuit de l'import de fichier s'arrête à 500 calques par import : une page longue est donc un bon test de charge.
2. Inspectez l'auto layout. Sélectionnez un conteneur flex du CSS source, par exemple un avec display: flex, gap: 24px et align-items: center. Vérifiez que le frame Figma a un auto layout avec 24px d'espacement et un alignement centré. S'il affiche un positionnement absolu, c'est un repli, pas un défaut de votre page.
3. Contrôlez les polices. Ouvrez les calques de texte et comparez la famille au font-family de la page. Une police absente est remplacée : un titre peut sembler correct au premier coup d'œil tout en portant la mauvaise famille.

Notez ce qui diffère. Une voie qui correspond à votre page sur ces trois vérifications suffit en général pour le reste du travail, et une voie qui en rate une vous indique où prévoir un nettoyage manuel.

Conclusion

DevTools est conçu pour lire et déboguer du CSS, et son menu de copie le reflète : il vous remet du texte. Les calques viennent d'un outil de capture. L'extension de Figma est l'alternative la plus proche si vous payez déjà un forfait qui inclut code to canvas ; un import de fichier est l'alternative quand vous voulez la page comme entrée enregistrée, sans trafic réseau par défaut. Quel que soit votre choix, testez-le sur votre vraie page et lisez le résultat. Chaque voie ici a des limites. Pour voir la voie par fichier en pratique, partez de la page d'accueil.