La question m'est venue naturellement en travaillant sur mon portfolio : j'avais déjà du code HTML/CSS fonctionnel, mais pas de maquette. Et si je pouvais faire l'inverse du workflow classique, partir du code pour générer le design dans Figma, plutôt que l'inverse ?
J'ai testé le plugin HTML to Design, qui permet d'importer une page web dans Figma en capturant sa structure visuelle. Le principe est séduisant : le plugin prend une capture de la page, la découpe en calques, et tente de recréer la hiérarchie des éléments dans Figma.
Le résultat est... mitigé, mais instructif. La conversion fonctionne pour l'aspect visuel brut, on obtient bien une représentation de la page dans Figma. Mais la structure des calques est souvent chaotique : des groupes imbriqués sans logique, des textes découpés en plusieurs éléments, des dimensions qui ne correspondent pas exactement aux valeurs CSS d'origine.
Ce que cette expérience m'a vraiment appris, c'est que le code et le design ne sont pas interchangeables. Un fichier Figma bien structuré est pensé pour la collaboration et l'itération visuelle. Un fichier HTML est pensé pour être rendu par un navigateur. La conversion automatique entre les deux perd inévitablement quelque chose dans la traduction.
L'outil reste utile pour un cas précis : avoir une référence visuelle rapide dans Figma à partir d'une page existante, pour annoter ou présenter. Mais il ne remplace pas un vrai travail de design en amont.
Cette expérience m'a aussi poussé à réfléchir à l'ordre des étapes dans un projet. Partir du design pour aller vers le code reste généralement plus efficace, mais dans un contexte étudiant où on apprend les deux en parallèle, faire l'aller-retour entre Figma et le code est une excellente façon de comprendre ce que chaque outil sait et ne sait pas faire.