HTML to Figma : convertir le HTML, le CSS et le code source en designs Figma modifiables
Si vous avez accès au code source HTML et CSS — votre propre code de production, une bibliothèque UI open source, un prototype frontend ou un export statique — vous pouvez le convertir directement en fichier Figma modifiable. C’est le cousin orienté source et piloté par les développeurs du flux Website-to-Figma.
Pourquoi utiliser le code source plutôt qu’une URL en direct ? Trois raisons : fidélité maximale (les styles calculés viennent directement du CSS, pas d’une estimation à partir des pixels), prise en charge des pages difficiles à capturer (générées au build, derrière authentification, en développement), et idéal pour les boucles code-design dans les workflows pilotés par l’ingénierie.
Produit Codia associé : Codia HTML to Figma.
Quand utiliser HTML-to-Figma
Ce flux convient lorsque :
- La page vit dans un environnement de développement et n’est pas encore déployée.
- Vous avez un export HTML/CSS statique mais aucun source design.
- Vous travaillez avec un système de design ou une bibliothèque de composants open source écrite en code.
- L’ingénierie possède la page et le source Figma doit être régénéré à partir du CSS de production.
- Vous documentez une bibliothèque de composants vers Figma pour aligner le design.
- Une équipe de design system veut auditer l’écart entre le CSS de production et les tokens de design.
Si la page est accessible via une URL, le flux Website-to-Figma est généralement plus simple. HTML-to-Figma est destiné aux situations où le code source est ce que vous avez.
HTML vers Figma vs Website vers Figma vs Screenshot vers Figma
| Entrée | Flux | Idéal pour |
|---|---|---|
| Source HTML/CSS brute | HTML to Figma | Conversion pilotée par les développeurs, fidélité maximale, pages non publiées. |
| URL en direct | Website to Figma | Pages accessibles, y compris concurrentes et en production. |
| PNG/JPG | Screenshot to Figma | Quand tout ce que vous avez est une image. |
Les trois flux aboutissent à la même destination : un fichier Figma modifiable. Ils diffèrent par l’entrée fournie.
Flux de travail
- Préparez la source. Vérifiez que le HTML s’affiche proprement de manière isolée — pas de CSS manquant, pas de polices cassées, pas de dépendance à un serveur de build qui doit tourner.
- Convertissez. Codia AI analyse le balisage, applique les styles CSS calculés, résout les images et polices, et reconstruit le visuel dans des calques Figma.
- Ouvrez le résultat dans Figma. Chaque job de conversion arrive sous forme de frame avec calques structurés, styles de texte et remplissages d’image.
- Relisez — voir la section de nettoyage ci-dessous.
- Transformez les composants répétés pour que le fichier Figma reflète la même structure que le code source.
Ce qui survit à la conversion
Généralement propre
- Structure HTML sémantique —
<section>,<article>,<header>,<footer>et les mises en page imbriquées deviennent des frames Figma groupés. - Contenu texte et typographie — vrais calques de texte, avec
font-family,font-size,font-weightetline-heightconservés. - Valeurs de couleur — arrière-plans et couleurs de texte solides convertis directement en remplissages Figma.
- Mises en page Flexbox et Grid — traduites en Auto Layout Figma lorsque l’analogie est propre.
- Bordures, border-radius, ombres — appliqués comme effets Figma.
- Images — placées comme remplissages d’image référant l’URL d’asset d’origine.
À relire
- Effets complexes uniquement CSS —
backdrop-filter,mask-imagecomplexes, fusions de dégradés multi-étapes. Approximés vers l’équivalent Figma le plus proche. - Pseudo-éléments — le contenu
::before/::afterest capturé comme frames séparés ; les états pseudo-classe (:hover) nécessitent de capturer chaque état. - Hébergement de polices personnalisé — les polices chargées via un CDN personnalisé peuvent nécessiter un mapping manuel vers des polices Figma locales.
- Variables CSS et tokens de design — conservés comme valeurs brutes ; le mapping vers votre système de design Figma est une étape manuelle.
- Mise en page pilotée par JS — tout ce qui est dimensionné ou positionné par JavaScript doit être exécuté avant la capture de conversion.
- Animations web — Figma ne représente pas nativement les keyframes ou transitions CSS. Convertissez l’état repos.
Cas d’usage selon le rôle
Designers héritant d’une base de code
Vous arrivez dans une entreprise. Il existe un frontend en production. Il n’y a pas de Figma. HTML-to-Figma vous donne un point de départ pour le travail de design sans reconstruire manuellement chaque écran.
Équipes design system
Comparez ce qui est réellement en CSS de production avec ce qui se trouve dans votre bibliothèque Figma. Convertissez des composants représentatifs de la base de code et placez-les à côté des équivalents Figma. La dérive devient visible.
Équipes d’ingénierie documentant des composants
Si votre bibliothèque de composants vit dans le code mais que l’équipe design veut une documentation Figma, HTML-to-Figma est le pont. Convertissez le storybook ou la démo de chaque composant en frame Figma.
Agences et freelances
Un client vous remet des mockups HTML statiques (souvent d’un ancien prestataire). HTML-to-Figma va plus vite qu’une reconstruction manuelle et fournit une base modifiable pour la refonte.
Ce qu’il faut nettoyer
Après conversion, concentrez-vous sur :
- Styles de texte — remplacez les styles en ligne par des tokens typographiques Figma.
- Tokens de couleur — mappez les hex récupérés vers vos styles de couleur de système de design.
- Icônes — remplacez les icônes raster par des composants SVG de votre bibliothèque.
- Auto Layout — vérifiez que l’Auto Layout a bien été converti pour les sections responsives ; reconstruisez où nécessaire.
- Structure des composants — transformez les motifs répétés (cartes, boutons, éléments de liste) en composants Figma.
- Nommage — les noms de classes du code se traduisent rarement bien en noms design. Renommez pour clarifier le design.
- Widgets tiers — retirez les analytics, le chat et les superpositions de consentement de la surface de design.
Erreurs fréquentes
Source à moitié cassée. Si le HTML ne s’affiche pas correctement dans un navigateur, la conversion ne peut pas récupérer ce qui n’existe pas. Vérifiez d’abord que la source s’affiche proprement.
CSS ou polices manquants. Même logique — si les CSS externes ou les polices ne se chargent pas, la conversion capture les valeurs de repli. Emballez tout pour la conversion.
Oublier le contenu piloté par JS. Si la mise en page ou le contenu important est rendu par JavaScript après le chargement, assurez-vous que le JS s’exécute et que la page est entièrement hydratée avant la capture.
Attendre qu’une animation CSS se traduise. Figma est statique. Convertissez l’état repos, puis concevez les variantes interactives dans Figma si besoin.
Le traiter comme un contrôle qualité du code. HTML-to-Figma ne refactorise pas votre code ; il convertit ce qui existe. Le travail sur la qualité du code relève de la revue de code, pas de Figma.
Couplage avec Figma-to-Code
Un pattern de round-trip utile pour les équipes d’ingénierie : HTML → Figma (ce flux) → nettoyage dans Figma → Figma to Code → frontend refactorisé plus propre. Utilisez-le lorsque vous voulez consolider un CSS de production incohérent en une implémentation propre, alignée sur le système de design.
Accès API
Pour une conversion en masse sur une bibliothèque de composants ou un système de design entier, le Visual Struct API accepte des entrées HTML et renvoie du JSON structuré que les outils en aval peuvent convertir vers Figma ou injecter dans des pipelines design ops.
FAQ
Peut-on vraiment convertir du HTML/CSS brut en Figma modifiable ?
Oui. La conversion analyse le HTML, applique le CSS calculé et reconstruit le visuel en calques Figma — le texte est un vrai texte, les couleurs sont de vrais remplissages, la mise en page est du vrai Auto Layout là où l’analogie tient.
En quoi est-ce différent de prendre une capture de la page ?
Une capture fait perdre le contexte CSS calculé — polices, couleurs exactes, logique de mise en page doivent être ré-estimées à partir des pixels. HTML-to-Figma part des valeurs source, donc la fidélité est supérieure et la relecture plus légère.
Cela fonctionne-t-il avec des frameworks comme React ou Vue ?
La conversion s’exécute sur le HTML rendu, pas sur le code source du framework. Rendez le composant en HTML/CSS (Storybook, export statique, "Copy outerHTML" dans les DevTools du navigateur) puis fournissez-le.
Qu’en est-il de Tailwind CSS ?
Tailwind compile en CSS standard au runtime, donc la conversion voit des règles CSS normales. Les styles Figma récupérés correspondent au rendu visuel, pas aux noms de classes.
Les tokens de design seront-ils conservés ?
Les propriétés CSS personnalisées (--brand-primary) sont conservées comme valeurs brutes. Leur mapping vers les tokens de votre système de design Figma est une étape de nettoyage manuelle — même si le rapport signale chaque valeur de token distincte pour que vous puissiez les mapper systématiquement.
Faut-il un site complet ou un seul composant peut-il suffire ?
L’un ou l’autre. Vous pouvez fournir une page entière ou un simple extrait de composant. Les entrées plus petites et plus ciblées produisent généralement une sortie plus propre.
L’API peut-elle traiter une bibliothèque de composants complète ?
Oui — voir le Visual Struct API pour les endpoints batch.