Composants Figma issus d'un import : transformer une page UnHTML Pro en styles réutilisables

Ce que Pro convertit déjà à l'import

Obtenir des composants Figma issus d'un import n'est plus une tâche manuelle, du moins pas pour la majeure partie d'une page. Quand tu lances un import avec Pro, le plugin lit le CSS propre à la page et transpose le spacing, le padding, le wrap et le comportement de stretch en auto layout : gap pour la distance entre les objets, padding pour l'espace autour d'eux, et un sens pour le flux vertical, horizontal ou en grid. Les sections dont la géométrie ne peut pas être reproduite avec l'auto layout basculent d'elles-mêmes en positionnement absolu, si bien qu'un frame qui ne peut pas être représenté proprement n'arrive pas cassé.

Cette même passe traite aussi deux choses que les designers font d'habitude à la main. Le texte répété, titres, corps de texte, légendes, devient des text styles partagés, si bien que modifier un style met à jour chaque calque qui l'utilise. Et les éléments visuels répétés, cartes, éléments de navigation, blocs de témoignages, deviennent de vrais composants avec instances et variantes, selon le même modèle de composant principal et d'instance que Figma utilise nativement : le composant principal conserve la source de vérité, et les instances sont des copies liées qui héritent de ses mises à jour.

Pro reste volontairement prudent sur cette seconde partie. Si remplacer une occurrence répétée par une instance devait déplacer sa position ou altérer la mise en page capturée depuis la page, Pro la laisse en simple frame plutôt que de forcer un composant qui s'écarterait de l'original. C'est exactement l'écart que couvre cet article : repérer ce qui est resté en simple frame, et finir le travail à la main.

Si tu n'as pas encore lancé l'import, consulte l'import d'un site React ou Vue dans Figma pour l'étape de capture qui précède tout ceci.

Il est utile de considérer l'import comme deux passes plutôt qu'une seule. Pro gère la première passe seul : il lit la géométrie, observe comment chaque frame de la page était organisé en CSS, et la reproduit avec gap, padding et un réglage de direction qui reflètent le comportement de flexbox et de grid. La seconde passe, celle que couvre cet article, concerne la nomination et la réutilisation : transformer une géométrie qui fonctionne déjà en styles et en composants qu'une équipe peut réellement entretenir. La sauter te laisse un fichier qui a l'air correct le jour de l'import et qui devient plus difficile à modifier chaque jour suivant.

Étape 1 : vérifier le rapport d'import pour repérer ce qui est resté en simples frames

Chaque import Pro livre un rapport d'import avec le fichier. Il liste chaque substitution de police (une police manquante remplacée par Inter par défaut, consignée pour que rien ne change silencieusement) et indique quelles sections répétées ont été converties en composants et lesquelles sont restées de simples frames.

Ouvre d'abord le rapport, avant de toucher au canvas. Compare les sections signalées aux répétitions visuelles de la page : grilles de cartes, niveaux de tarifs, lignes de témoignages, colonnes de liens du footer. Ce sont les endroits les plus susceptibles d'avoir été laissés en frames volontairement, et aussi ceux où une passe manuelle rapporte le plus vite, puisque corriger un modèle de carte met à jour chaque carte dès qu'elle devient une instance.

Ne suppose pas qu'une section a été oubliée par erreur. Le rapport existe précisément pour distinguer "Pro n'a pas pu reproduire cette mise en page" de "Pro n'a pas essayé parce qu'un composant l'aurait déplacée".

Deux listes valent la peine d'être notées avant de toucher au canvas : les sections signalées comme repli en positionnement absolu, et les sections signalées comme simples frames malgré leur répétition. La première est un problème de mise en page, une section dont le CSS d'origine n'a pas pu se mapper proprement sur l'auto layout, et la corriger peut vouloir dire reconstruire à la main la structure de ce frame. La seconde est un problème de nommage et de composantisation : des sections déjà correctement organisées qui ont juste besoin de devenir de vrais composants. Les étapes 2 à 4 traitent cette seconde liste. Traite la première liste comme une passe séparée et plus réduite, car forcer l'auto layout sur un frame qui ne peut vraiment pas le supporter produit le même type de dérive que Pro cherchait justement à éviter.

Étape 2 : transformer en text styles le texte répété restant

Pour le texte que Pro n'a pas déjà converti, souvent des titres uniques ou du texte qui ne s'est pas répété assez souvent pour être signalé, tu peux appliquer le même traitement à la main. Sélectionne un calque de texte, ouvre la section typographie dans le panneau de droite, et crée un nouveau style. Nomme-le par rôle et par taille (Heading/Large, Body/Default, Caption/Small) plutôt que par sa position sur la page. Le nom est ce que ton équipe verra en choisissant un style dans six mois, pas la page d'où il vient.

Si un calque doit garder son apparence actuelle sans être lié à un style partagé, le détacher supprime le lien vers la définition du style mais conserve intactes les valeurs de propriété actuelles du calque. Cela compte quand tu nettoies un import de façon sélective : applique un style pour le tester, puis détache le seul calque qui doit rester légèrement différent sans toucher au reste.

Créer et modifier des styles nécessite un accès en édition sur un plan Figma payant (Education, Professional, Organization ou Enterprise). Les personnes en lecture seule peuvent appliquer un style existant d'une bibliothèque partagée, mais pas en créer un nouveau, ce qui vaut la peine d'être su avant de transmettre le fichier pour relecture.

Étape 3 : composantiser les sections que Pro a volontairement laissées de côté

C'est l'étape qui transforme en vrais composants les simples frames signalés dans ton audit. Sélectionne les calques qui composent une section répétée et choisis Create component ; Figma imbrique la sélection dans un frame de composant, marqué de l'icône violette de composant dans le panneau des calques. Quand plusieurs sections distinctes ont besoin du même traitement, trois niveaux de tarifs, cinq cartes de témoignages, sélectionner l'ensemble et choisir Create multiple components transforme chacune en son propre composant en une seule passe, plutôt que de répéter le flux de sélection unique section par section.

Garde à l'esprit la même prudence que Pro pendant que tu avances. Si transformer une occurrence précise en instance devait déplacer sa position, redimensionne le frame pour que l'instance s'y ajuste proprement, ou laisse cette occurrence en frame et composantise le reste. Un composant qu'il faut recaler après chaque usage est pire qu'un frame qui reste simplement un frame.

Une fois qu'une section est un vrai composant, le composant principal devient l'endroit où tu fais chaque modification future : changer le padding, remplacer une icône, ajuster le schéma du texte, et chaque instance du fichier en hérite.

Reste attentif à un cas particulier fréquent sur les pages importées : des sections qui semblent identiques mais qui ont été construites à partir d'un balisage légèrement différent, un composant de carte avec un badge optionnel, par exemple, face à un sans. Forcer les deux dans un seul composant sans prise en charge de variantes fait que le badge apparaît soit sur toutes les instances, soit sur aucune. C'est exactement ce que résolvent les variantes de composant. Construis d'abord le composant de base, puis ajoute une propriété de variante (Badge : Yes/No) pour que chaque instance puisse différer d'une manière définie sans rompre le lien vers le composant principal. C'est une étape supplémentaire à la création, et elle évite une reconstruction plus tard quand la page ajoute une troisième variation que tu n'avais pas prévue.

Étape 4 : organiser pour la transmission

Avant de publier quoi que ce soit vers une bibliothèque d'équipe, regroupe les nouveaux text styles et composants que tu viens de créer et donne-leur une convention de nommage qui correspond à ce que Pro a généré automatiquement, pour que le fichier se lise comme un seul système plutôt que deux. Un fichier composantisé et stylé donne à une équipe un cycle d'édition plus rapide qu'un import brut : un seul endroit pour mettre à jour une section répétée, un seul endroit pour mettre à jour un rôle typographique, un panneau de calques qui montre une structure au lieu d'une pile plate de frames positionnés en absolu.

C'est aussi le moment de décider ce qui reste local au fichier et ce qui rejoint une bibliothèque partagée, puisque l'accès à la bibliothèque suit la même règle d'édition que la création de styles et de composants en premier lieu. Si ton équipe dispose déjà d'une bibliothèque de composants pour d'autres travaux, c'est généralement le moment d'y intégrer les nouveaux plutôt que de laisser l'import devenir sa propre île.

La passe de conversion d'UnHTML Pro amène automatiquement la majeure partie d'une page jusqu'à ce point. Ce qui reste, le plus souvent une poignée de sections que l'import a délibérément traitées avec prudence, est une passe courte et mécanique, pas une refonte.

Conclusion

Un import Pro te donne déjà l'auto layout, les text styles et les composants pour la majeure partie d'une page. Le mappage CSS vers auto layout et la passe de composantisation tournent tous deux automatiquement, et le rapport d'import te dit exactement où ils se sont arrêtés. Vérifier ce rapport, finir les text styles du texte restant, et composantiser les sections que Pro a volontairement laissées en frames, voilà ce qui transforme le fichier d'une capture fidèle en quelque chose avec quoi ton équipe peut vraiment travailler. Répète la même passe courte à chaque fois que tu réimportes une page qui a changé.