HTML to design : un workflow de refonte du site web vers Figma

Le design circule généralement dans un seul sens : une maquette Figma devient du HTML dans un navigateur. Mais une bonne partie du travail réel va dans la direction opposée. Un client vous confie un site en ligne et demande une refonte. Un produit s'est éloigné de ses maquettes d'origine après trois ans de mises en production. Un développeur a construit une fonctionnalité directement en code, et l'équipe design doit désormais se l'approprier.

Cette direction inverse — HTML to design — consiste à prendre ce qui existe dans le navigateur pour le retransformer en fichier de design modifiable. Bien menée, elle épargne des jours de reconstruction manuelle et vous donne mieux qu'un moodboard de captures d'écran : un fichier de travail avec de vrais frames, textes, styles et composants.

Cet article présente un workflow concret pour les designers et les agences, du premier audit au prototype cliquable, avec HTML to Frames.

Ce que « HTML to design » signifie vraiment

L'expression recouvre tout processus qui convertit du code en ligne ou un site web en fichier de design modifiable. Il existe trois grandes façons de procéder :

1. La reconstruction manuelle — ouvrir le site, le mesurer dans les DevTools, recréer chaque frame à la main.
2. Les captures d'écran — capturer des images de chaque page et les coller dans Figma comme référence.
3. Les calques modifiables — convertir la page rendue en vrais frames, textes, vecteurs et images Figma.

Chacune a sa place, mais elles diffèrent nettement en coût et en possibilités par la suite.

Les captures d'écran suffisent comme référence. La reconstruction manuelle reste pertinente pour une petite page isolée que vous voulez restructurer de zéro. Pour tout ce qui est plus important, les calques modifiables sont le point de départ qui passe à l'échelle.

À qui s'adresse ce workflow

• Designers UI/UX et web qui mènent des refontes, des audits ou des analyses de sites inspirants.
• Agences de design qui ont besoin du site d'un client dans Figma en quelques minutes pour préparer une proposition de refonte. Le plan Team partage cinq postes sous une seule clé de licence.
• Équipes design system qui consolident les couleurs, la typographie et les composants qui ont dérivé en production.
• Développeurs front-end qui veulent transmettre un build localhost à un designer sous forme de fichier Figma.
• Product managers et marketeurs qui ont besoin de tableaux de bord avec connexion ou d'états précis dans Figma pour leur planification.

Le workflow, étape par étape

Voici la séquence que nous recommandons. Vous pouvez sauter des étapes, mais l'ordre compte : chacune s'appuie sur la précédente.

Étape 1 : auditer l'existant

Avant d'importer quoi que ce soit, décidez quelles pages comptent. Pour la plupart des sites, la liste est courte :

• la page d'accueil,
• une ou deux landing pages ou pages produit clés,
• les tarifs ou le tunnel de commande,
• un gabarit de contenu, comme un article de blog,
• les écrans avec connexion qui entrent dans le périmètre de la refonte.

Notez aussi les états dont vous avez besoin — un menu de navigation ouvert, un formulaire avec des erreurs de validation, un panier rempli. Ils ne sont pas accessibles depuis une simple URL ; vous les capturerez avec l'extension Chrome.

Étape 2 : importer un Responsive set

Importez maintenant les pages. Pour les pages publiques :

1. Ouvrez HTML to Frames et choisissez Multiple.
2. Collez jusqu'à 10 liens. Ils sont traités l'un après l'autre, et chaque page devient une rangée sur le canvas.
3. Choisissez le Responsive set — Desktop, Tablet et Mobile en un clic (jusqu'à quatre écrans par import avec Pro et Team).
4. Activez Hide cookie banners & popups pour que les surcouches ne masquent pas le contenu.
5. Activez Styles & variables (Pro) si vous comptez extraire un design system à l'étape suivante.

L'écran Desktop utilise la Site width : le plugin mesure la largeur de design réelle de la page au lieu de la deviner. Les sites pleine largeur arrivent en 1920 avec le contenu centré, les sites centrés dans un conteneur à la largeur de ce conteneur, et les sites fluides en 1440. Un site reçoit une seule largeur pour toutes ses pages.

Rappelez-vous la règle de décompte : un import = une page avec tous ses écrans. Un Responsive set de cinq pages représente cinq imports, et non quinze.

Après le premier import, Import linked pages vous permet de choisir d'autres pages du même site dans une liste. Pour les pages avec connexion ou localhost, utilisez l'extension Chrome et Send to Figma. Pour les pages qui n'existent que sous forme de fichiers, utilisez Local file pour importer un fichier HTML, un dossier de site entier ou un .zip. Le guide HTML to Figma détaille chaque source.

Étape 3 : extraire le design system

C'est ici qu'un import cesse d'être une image du site pour devenir une base de travail. Avec Styles & variables (Pro) activé, le plugin crée :

• Des variables de couleur à partir des couleurs utilisées au moins deux fois et des propriétés personnalisées CSS du site — --brand-primary devient brand/primary — dans une collection Colors · <domain> (jusqu'à 96).
• Des styles de texte (jusqu'à 48).
• Des styles d'ombre (sm, md, lg, xl).

Deux détails rendent cela pratique sur de vrais projets :

• La réutilisation. Si votre fichier contient déjà des variables ou des styles aux valeurs identiques, le plugin les réutilise. Importer deux fois le même site ne crée rien de nouveau.
• Snap to my file's styles (Pro). Si vous avez déjà un design system, les couleurs et le texte importés peuvent s'aligner sur le style le plus proche de votre fichier en l'absence de correspondance exacte, selon la distance de couleur perceptuelle OKLab et avec la même famille de police, la même graisse et une taille à 10 % près.

Si le site prend en charge le mode sombre, choisissez Light + Dark (Pro). La page est capturée dans les deux schémas de couleurs, et vous obtenez une collection de variables avec les modes Light et Dark, plus une copie sombre de chaque écran. Notez que les fichiers Figma Free n'autorisent qu'un mode par collection : le mode sombre y est donc ignoré, avec une note.

Le résultat est un inventaire honnête de ce que le site utilise réellement — souvent le livrable le plus utile de tout l'audit. Voir une longue série de gris presque identiques dans une même collection plaide pour la consolidation mieux que n'importe quelle slide.

Étape 4 : transformer la répétition en composants

Avec Components & hover states (Pro), les structures répétées — cartes, boutons, éléments de menu — deviennent des composants et des instances, en conservant les surcharges de texte et d'image. Les éléments qui ont une apparence au survol deviennent un ensemble de composants avec variantes Default et Hover, plus une interaction de prototype au survol. Les composants principaux sont rassemblés dans un frame Components · <site>.

Vous disposez ainsi d'un inventaire de composants à rationaliser. Les étapes suivantes typiques :

• fusionner les composants de bouton quasi identiques en un seul ensemble avec variantes,
• renommer les composants selon votre convention de nommage,
• remplacer les instances par les composants de votre propre bibliothèque lorsqu'ils existent déjà.

Étape 5 : itérer sur une vraie structure

Place au design. Comme la mise en page arrive sous forme de frames imbriqués avec Auto Layout là où le plugin a pu le vérifier, les modifications se comportent comme dans un fichier que vous auriez construit vous-même :

• modifiez des titres et voyez la pile se réorganiser,
• changez l'espacement ou le padding d'une section,
• remplacez une variable de couleur et voyez chaque usage se mettre à jour,
• redimensionnez un frame et laissez Fill et Center faire leur travail.

Dans nos tests sur de vrais sites, l'Auto Layout a été déduit sur environ 86 à 97 % des frames. Les frames restés en position absolue reçoivent des contraintes adaptées, et l'écran de résultat indique pourquoi un frame est resté en position absolue. L'article sur l'Auto Layout entre dans les détails.

Une bonne habitude : gardez l'import d'origine sur sa propre page comme « avant » et dupliquez-le pour votre refonte. Activez Reference screenshot (Pro) lors de l'import si vous voulez un calque image masqué et verrouillé pour comparer côte à côte avec la page en ligne.

Étape 6 : prototyper

Les pages importées sont déjà en partie reliées :

• Les liens restent cliquables (Open link).
• Les liens entre pages importées deviennent des interactions Navigate : un import multipage forme d'emblée un parcours cliquable.
• Les en-têtes fixes et sticky et les zones de défilement horizontal fonctionnent en mode Present.
• Les variantes de survol de l'étape 4 sont accompagnées d'interactions au survol.

Vous pouvez donc placer le prototype « avant » à côté du prototype « après » dans une présentation client, sans avoir à relier l'un ou l'autre de zéro.

Étape 7 : rester synchronisé

Les sites évoluent sans cesse. Chaque frame importé enregistre son URL source : le Re-import se fait en un clic quand la page en ligne change. Comme les variables et styles existants sont réutilisés, un Re-import n'inonde pas votre fichier de doublons.

Cas d'usage concrets

Propositions de refonte en agence

Une agence qui présente une refonte a besoin du site actuel du client dans Figma, et vite. Importez les pages clés en Responsive set, extrayez le design system, et vous disposez d'une partie factuelle « voici ce que vous avez aujourd'hui » — avec le véritable inventaire des couleurs et de la typographie — avant même de montrer une seule nouvelle idée. Le plan Team partage cinq postes : plusieurs designers peuvent travailler avec la même licence. Voir Website to Figma et le guide de refonte.

Audits de l'écart entre design et code

Importez la page de production et placez-la à côté de la maquette d'origine. Les différences d'espacement, de couleurs et de typographie apparaissent calque par calque, et les variables générées révèlent combien de couleurs hors palette se sont glissées.

Fonctionnalités construites par les développeurs

Un développeur a prototypé une fonctionnalité en localhost. Capturez-la avec l'extension Chrome, envoyez-la dans Figma, et le designer l'affine dans le même fichier que le reste du produit.

Pages générées par IA

Si le point de départ est du HTML produit par Claude ou Cursor, connectez l'assistant via MCP et la page arrive dans votre plugin ouvert. Voir AI to Figma.

Apprentissage et analyse

Les étudiants peuvent importer des sites bien construits et étudier la structure des sections, l'échelle typographique et la répétition des espacements — un calque à la fois.

Confidentialité pour le travail client

Les agences importent souvent des sites clients : ce qu'il advient des données compte. Les pages sont rendues dans un navigateur isolé et cloisonné (sandbox) ; le résultat est livré une seule fois puis supprimé de la mémoire, jamais écrit sur disque. Les fichiers locaux envoyés sont supprimés dès la fin de l'import. Le plugin ne lit pas le contenu de votre fichier Figma. La page sécurité présente la politique complète.

Pour commencer

Le moyen le plus rapide de savoir si ce workflow vous convient est de l'essayer sur une vraie page sur laquelle vous travaillez. Free inclut 10 imports par mois ; Pro ajoute les fonctionnalités de design system et de composants décrites ci-dessus. Comparez les plans sur la page des tarifs, parcourez la documentation, ou voyez comment se situent les autres outils sur la page alternatives.