html.to.design : importer un site web dans Figma

html.to.design est un plugin Figma qui convertit n'importe quel site web en design éditable. C'est un accélérateur pour le design (benchmarks concurrentiels, refontes, moodboards) et un outil de capture de contexte pour le développement assisté par IA : donner du HTML réel à Claude Code ou Cursor au lieu d'un prompt vague. Avec son intégration MCP, il se connecte directement aux agents IA et s'inscrit dans un workflow complet Figma vers Webflow.

html.to.design est un plugin Figma utilisé par plus de 2,6 millions de personnes. Sa fonction de base est simple : on colle l'URL d'un site web, et le plugin génère les layers Figma correspondantes. Textes éditables, images, structure de page, styles locaux créés automatiquement. C'est déjà un outil précieux pour les designers qui font des benchmarks, des refontes ou des moodboards.

Mais en 2026, avec l'essor du développement assisté par IA (Claude Code, Codex, Cursor), l'outil prend une nouvelle dimension. En capturant le HTML/CSS propre d'un site existant, on obtient un fichier que l'on peut donner directement à une IA comme contexte de développement. Au lieu de décrire un design dans un prompt textuel et d'obtenir un résultat approximatif, on donne à l'IA un point de départ concret. Cet article couvre les deux usages, explique comment s'en servir concrètement, et montre comment html.to.design s'intègre dans un workflow Figma vers Webflow.

‍

Qu'est-ce que html.to.design

html.to.design est un plugin Figma développé par divRIOTS. Il convertit n'importe quel site web en design Figma entièrement éditable. Le fonctionnement est direct : on colle l'URL d'un site dans le plugin, on choisit le viewport (desktop, tablette, mobile) et le thème (light ou dark), et le plugin génère les layers Figma correspondantes. Les textes sont éditables, les images sont importées, et les styles de texte et de couleur sont automatiquement créés comme styles locaux dans Figma.

Le plugin est disponible gratuitement sur la communauté Figma, avec environ 2,6 millions d'utilisateurs et 39 000 likes. En complément du plugin, divRIOTS propose une extension Chrome qui permet de capturer des pages privées ou protégées par un login (le plugin Figma ne peut capturer que des pages publiquement accessibles). Un éditeur intégré permet aussi d'importer du HTML/CSS brut directement, sans passer par une URL. C'est utile quand on veut importer un composant isolé ou un bloc de code spécifique plutôt qu'une page entière.

‍

Côté design : un accélérateur pour les refontes et les benchmarks

L'usage le plus immédiat de html.to.design est le design. Le plugin élimine plusieurs heures de travail manuel dans les phases amont d'un projet web.

Benchmark concurrentiel

Capturer les sites de concurrents dans Figma pour analyser leur structure, leur layout et leur direction visuelle est un cas d'usage classique. Avec html.to.design, on importe un site en quelques secondes au lieu de prendre des captures d'écran, de les recadrer et de les organiser manuellement. Le résultat est un fichier Figma avec des layers séparées : on peut sélectionner un bloc, mesurer des espacements, extraire des couleurs et des typographies, et comparer la structure de plusieurs sites côte à côte dans un même fichier. Pour un benchmark de maquettes, c'est un gain de temps considérable sur la phase de recherche.

Base de travail pour une refonte

Quand un projet de refonte part d'un site existant, importer ce site dans Figma avec html.to.design donne un point de départ éditable au lieu de partir de zéro. L'équipe peut modifier le texte, réorganiser les blocs, tester de nouvelles hiérarchies visuelles, et comparer l'avant et l'après directement dans Figma. C'est plus rapide que de reconstruire chaque page manuellement, surtout quand le site existant comporte beaucoup de pages et de variations.

Moodboard et récupération d'assets

Importer plusieurs sites de référence dans un même fichier Figma permet de construire un moodboard collaboratif où l'équipe peut commenter et donner du feedback directement sur des éléments réels, pas sur des screenshots statiques. Le plugin permet aussi d'extraire des composants visuels (structures de section, grilles, hiérarchies de texte) pour les réutiliser comme inspiration dans un nouveau projet. Pour les équipes qui travaillent avec un design system structuré, c'est un moyen rapide de collecter des références visuelles avant de designer les composants.

‍

Côté IA : capturer du HTML pour le donner à Claude Code

C'est l'usage le moins couvert par les articles existants sur html.to.design, et pourtant c'est celui qui prend le plus de valeur en 2026. Au-delà de la conversion visuelle vers Figma, le plugin permet de capturer le HTML/CSS propre d'un site web. Ce HTML peut être utilisé comme contexte pour des outils de développement assisté par IA.

Le principe est simple. On capture le HTML d'une page existante (via le plugin ou l'extension Chrome), et on le donne à Claude Code, Codex ou Cursor comme point de départ pour recoder la page dans un autre framework, adapter le design, ajouter des fonctionnalités, ou transposer le site vers un autre environnement. L'avantage est fondamental : au lieu de décrire un design en langage naturel (ce qui produit un résultat souvent approximatif), on donne à l'IA un fichier HTML réel. L'IA a du contexte concret : la structure de la page, les classes CSS, la hiérarchie des éléments, les images, les textes. Le résultat est bien plus précis et fidèle que ce qu'un prompt textuel peut produire.

Les cas d'usage concrets sont nombreux. Transposer un site WordPress vers Webflow en donnant le HTML capturé à Claude Code comme référence de structure. Recoder un site existant dans un framework différent (de custom HTML vers Next.js, ou de Squarespace vers Webflow) en gardant la structure de page comme base. Adapter un template en conservant la structure mais en modifiant le design. Extraire des composants réutilisables à partir du code source d'un site pour les reconstruire proprement. Dans chacun de ces cas, html.to.design fonctionne comme un outil de "capture de contexte" : plus le contexte donné à l'IA est concret, meilleur est le résultat.

‍

L'intégration MCP : connecter html.to.design à vos agents IA

html.to.design dispose d'un serveur MCP (Model Context Protocol) compatible avec Claude Desktop et Cursor. Cette intégration permet d'aller plus loin que l'import manuel : depuis un agent IA, on peut demander à html.to.design d'importer un site web dans Figma automatiquement, sans ouvrir le plugin manuellement.

Ce que ça permet concrètement : importer un site dans Figma directement depuis Claude Desktop ou Cursor, automatiser des imports en batch (plusieurs URLs dans une seule commande), et générer des designs avec l'IA puis les envoyer dans Figma. C'est une boucle complète : l'IA capture un site via MCP, le design arrive dans Figma, l'équipe itère dans Figma, puis exporte vers Webflow via le workflow classique ou via le connecteur MCP Webflow + Claude. L'intégration MCP positionne html.to.design comme un maillon entre les agents IA et Figma, dans un écosystème où les connecteurs MCP se multiplient.

Les limites à connaître

html.to.design est un outil utile, mais il a des limites qu'il vaut mieux connaître avant de l'intégrer dans un workflow de production.

Le plugin ne capture pas les animations CSS ou JavaScript, à l'exception de certains effets hover basiques. Les sites très lourds en JavaScript (applications React ou Vue rendues côté client, SPA sans rendu serveur) peuvent poser des problèmes de rendu et produire des imports incomplets ou visuellement incorrects. Les pages très longues peuvent faire freezer Figma, surtout sur le plan Free, parce que chaque layer consomme de la mémoire.

Le résultat est un snapshot visuel, pas un design system structuré. Les composants d'un site ne deviennent pas automatiquement des composants Figma réutilisables : chaque bloc est un ensemble de layers à plat. Pour construire un vrai design system à partir d'un import, il faut un travail de structuration manuel dans Figma. La qualité de l'import dépend aussi de la propreté du code source du site. Un site avec du CSS propre et sémantique donnera un bien meilleur résultat qu'un site avec du code généré, du CSS inline en masse, ou des structures HTML mal hiérarchisées.

Côté pricing, le plan Free permet jusqu'à 10 imports par mois (limite glissante de 30 jours). Le plan Pro, à 18 $ par mois, offre des imports illimités (fair use), des images en haute résolution, l'import multi-URL, le re-import en un clic et un support premium. L'extension Chrome et l'intégration MCP sont disponibles sur tous les plans.

‍

Comment l'intégrer dans un workflow Figma vers Webflow

Dans un workflow de conception et de développement web orienté Figma vers Webflow, html.to.design intervient en amont, sur la phase de recherche et de préparation.

Le workflow complet fonctionne en trois étapes. En premier, on capture les sites de référence ou le site actuel avec html.to.design. Cela donne un fichier Figma éditable avec la structure, les textes, les images et les styles du site source. C'est le point de départ pour un benchmark, une refonte ou une analyse de structure. En deuxième, l'équipe itère sur le design dans Figma : modification de la hiérarchie, ajustement des composants, création de nouvelles pages, travail sur le design system. En troisième, le design est exporté vers Webflow, soit via le workflow classique Figma vers Webflow, soit via Claude Code avec le HTML capturé comme contexte de développement.

Pour les benchmarks, c'est un gain de temps considérable par rapport aux captures d'écran manuelles organisées dans un Google Drive. Pour les refontes, c'est un point de départ éditable qui évite de reconstruire chaque page en partant de zéro dans Figma. Pour le développement assisté par IA, c'est un outil de capture de contexte qui rend le travail de Claude Code ou Cursor plus précis et plus fiable.

‍

Conclusion

html.to.design est un outil simple qui résout deux problèmes concrets. Le premier est la capture de sites existants pour le design : benchmarks concurrentiels, bases de travail pour les refontes, moodboards collaboratifs. Le deuxième est la capture de HTML réel comme contexte pour le développement assisté par IA, un usage qui prend de plus en plus de valeur à mesure que Claude Code, Codex et Cursor deviennent des outils de production quotidiens.

Avec l'intégration MCP, html.to.design s'inscrit dans l'écosystème des agents IA connectés. Dans un workflow Figma vers Webflow, c'est un gain de temps mesurable sur la phase amont : recherche, benchmark, reverse engineering. BeBranded utilise html.to.design dans son workflow de benchmark et de refonte, en combinaison avec Figma, Claude Code et Webflow. Si vous préparez une refonte ou un benchmark et souhaitez structurer votre phase de recherche, contactez-nous pour un premier échange.