HTML to design : reconstruisez le fichier de design dont votre code s'est éloigné

Reconstruire à l'œil une page de production dans Figma, c'est mesurer les espacements, prélever les couleurs, deviner les tailles de police et redessiner les icônes. Une seule page marketing peut prendre une journée. Un produit de plusieurs dizaines d'écrans prend des semaines, et le résultat s'écarte encore des vraies valeurs.

HTML to Frames lit les valeurs directement dans le navigateur : espacements, couleurs et tailles de texte sont exacts, pas approximatifs. Les icônes SVG deviennent des vecteurs modifiables. La mise en page est traduite en Auto Layout et vérifiée à 2 px près, le positionnement absolu n'étant conservé que là où l'Auto Layout déplacerait quelque chose.

Cela change le premier jour d'une refonte. Au lieu de le consacrer à la reconstruction, l'équipe part d'une copie fidèle du produit actuel et consacre son temps aux décisions :

• Quelles couleurs sont réellement utilisées, et lesquelles sont des quasi-doublons accidentels ?
• Quels composants se répètent, et combien de variantes existent dans la nature ?
• Où la mise en page livrée s'écarte-t-elle du système prévu ?

Le guide de refonte Website to Figma explique comment les agences s'en servent pour préparer leurs propositions.

Comme chaque frame conserve son URL source, vous pouvez réimporter une page après la prochaine mise en production et la comparer à la refonte. Le fichier de design reste relié à la production au lieu de devenir un énième instantané qui se périme peu à peu.

L'extraction est conçue pour produire un ensemble réduit et utilisable, plutôt qu'un style par élément.

Couleurs

Une couleur devient une variable lorsqu'elle est utilisée au moins deux fois, ou lorsque le site la définit comme propriété personnalisée CSS. Les noms des propriétés personnalisées sont conservés comme structure : --brand-primary devient brand/primary. Jusqu'à 96 variables de couleur sont placées dans une collection Colors · <domain>.

Texte et ombres

Jusqu'à 48 styles de texte sont créés à partir de la typographie réellement rendue sur la page. Les ombres sont regroupées en styles sm, md, lg et xl.

Réutiliser avant de créer

Si votre fichier contient déjà une variable ou un style avec la même valeur, il est réutilisé. Importez deux fois le même site et rien de nouveau n'est créé, ce qui garde propre un fichier destiné à durer.

Light + Dark

Avec le schéma de couleurs Light + Dark, la page est capturée selon les deux réglages prefers-color-scheme et une même collection reçoit deux modes. Les fichiers Figma Free n'autorisent qu'un mode par collection : dans ce cas, le mode sombre est ignoré, avec une note.

Tout cela reste facultatif. Désactivez Styles & variables et vous obtenez de simples calques avec des valeurs brutes, ce qui est parfois exactement ce qu'il vous faut pour une référence rapide ou une analyse ponctuelle.

Le code de production correspond rarement parfaitement à un design system. Un bouton peut utiliser #2161E9 alors que le token vaut #2160E8, ou un titre peut faire 31 px au lieu de 32 px. Importer ces valeurs telles quelles inonderait votre fichier de styles quasi identiques.

Snap to my file's styles (s'aligner sur les styles de mon fichier) règle ce problème. En l'absence de correspondance exacte, le plugin cherche dans votre fichier la couleur la plus proche selon la distance perceptuelle OKLab, et le style de texte le plus proche avec la même famille de police, la même graisse et une taille à 10 % près. Les calques importés sont alors liés à vos styles plutôt qu'à de nouveaux.

C'est utile dans trois situations :

1. Les audits, quand vous voulez voir le produit exprimé dans le système officiel.
2. Les refontes, qui doivent démarrer dans le système dès le premier frame.
3. L'analyse concurrentielle, quand vous restylez une autre mise en page avec vos propres tokens.

Snap, Styles & variables et Components & hover states sont des fonctionnalités Pro. Le plugin ne lit jamais le contenu de votre fichier au-delà du nécessaire : il écrit des calques et ne lit que les métadonnées de ses propres frames, comme décrit sur la page sécurité.

Snap fonctionne au mieux lorsque votre fichier contient déjà des styles de couleur et de texte publiés. Commencez avec une bibliothèque réduite et propre, importez une page représentative et vérifiez quelles valeurs se sont alignées avant de lancer un import Multiple plus large sur le reste du site.