Figma Component et Variant : une UI réutilisable

Le secret d'une bonne conception d'interface n'est pas de redessiner cent fois le même bouton ; c'est de le construire une seule fois, correctement, et de le réutiliser partout. C'est précisément là qu'intervient le système de Figma component et de variant. Transformez un élément en source de vérité unique, regroupez ses états (hover, désactivé, primary/secondary) en variants, et votre design devient une bibliothèque cohérente, rapide et facile à maintenir. Dans cet article, je vous accompagne d'une page blanche jusqu'à un système de composants réellement évolutif.

Qu'est-ce qu'un composant et pourquoi est-ce important ?

Dans Figma, un composant est la copie principale d'un élément de design que vous souhaitez réutiliser. Chaque copie que vous en dérivez s'appelle une instance. Lorsque vous modifiez le composant principal, ce changement se répercute automatiquement sur toutes les instances. Ajustez une fois le rayon d'angle d'un bouton ou son token de couleur, et vous n'aurez pas à corriger manuellement des centaines d'usages dans le fichier.

Pour transformer un élément en composant, sélectionnez-le, faites un clic droit et choisissez Create component (raccourci : ⌥⌘K sur macOS, Ctrl+Alt+K sur Windows). Il est désormais marqué d'une icône en losange violet et vous pouvez le glisser n'importe où depuis l'onglet Assets du panneau de gauche.

• Cohérence : une seule source, le même rendu partout.
• Rapidité : vous ne repartez jamais de zéro pour un nouvel écran.
• Maintenance : la couleur de marque a changé ? Corrigez-la une fois, elle se propage partout.

Combiner les états avec les variants

Un bouton n'a pas qu'un seul état : par défaut, survol (hover), pressé, désactivé... Plutôt que d'en faire un composant distinct chacun, la structure qui les regroupe tous dans un seul component set s'appelle un variant. Les variants conservent ensemble, de manière logique, les différents états du même composant.

Sélectionnez plusieurs composants et cliquez sur Combine as variants dans le panneau de droite ; Figma les enveloppe dans un cadre violet en pointillés. Ce cadre est désormais un component set. Vous attribuez à chaque variant des noms et des valeurs de propriété pertinents depuis la section « Properties » du panneau.

Bien nommer les propriétés de variant

La puissance du système de variants vient d'une structure de propriétés saine. Pensez à une propriété comme à un axe : pour un bouton, par exemple, vous pourriez définir deux axes.

• Type = Primary, Secondary, Ghost
• State = Default, Hover, Pressed, Disabled

Combinez ces deux propriétés et vous obtenez 3 × 4 = 12 combinaisons possibles, toutes vivant dans un seul component set. Lorsqu'un designer utilise une instance, il choisit Type: Primary et State: Hover dans des menus déroulants du panneau de droite, et le bon variant apparaît instantanément.

Soyez cohérent dans le nommage. Écrivez les noms et valeurs de propriété de façon identique sur chaque composant ; si State se mélange avec state, ou Disabled avec disable, Figma les considère comme des propriétés distinctes et le set se désagrège. Gardez des valeurs courtes, lisibles et logiques.

Propriétés boolean et instance swap

Les variants ne sont pas le seul type de propriété. Figma propose plusieurs types qui rendent un composant plus flexible :

• Propriété boolean : active ou désactive un calque. Par exemple, créez un interrupteur nommé Has icon pour afficher l'icône dans un bouton.
• Propriété instance swap : permet de remplacer une instance imbriquée par un autre composant. Vous pouvez échanger l'avatar à l'intérieur d'un composant carte contre un autre avatar au moment de l'usage.
• Propriété text : permet de modifier le contenu d'un calque de texte depuis le panneau de droite, sans avoir à plonger dans le calque pour le retrouver.

Combinez ces propriétés avec les variants, et un seul composant carte ou bouton couvre à lui seul des dizaines de scénarios différents.

Pas à pas : construire un composant bouton

Passons de la théorie à la pratique. Un composant bouton avec variants d'état se construit de zéro dans cet ordre :

• 1. Dessinez un cadre avec auto layout (raccourci Shift+A) : placez-y du texte et une icône facultative. Laissez l'auto layout gérer le padding et l'alignement pour que le bouton grandisse à mesure que le texte s'allonge.
• 2. Transformez ce cadre en composant (⌥⌘K / Ctrl+Alt+K).
• 3. Dupliquez le composant, assombrissez sa couleur et faites-en l'état « Hover ». Répétez pour « Pressed » et « Disabled ».
• 4. Sélectionnez-les tous et cliquez sur Combine as variants.
• 5. Dans le panneau de droite, nommez la propriété State ; saisissez les valeurs Default, Hover, Pressed, Disabled.
• 6. Plutôt que de saisir les couleurs à la main, liez une color variable (token de couleur). Ainsi, changer la couleur de marque met à jour chaque variant.

À mesure que cette bibliothèque grandit, définir les couleurs et les espacements comme des variables révèle la vraie valeur des composants : votre design system est alimenté par une source unique.

Erreurs fréquentes

Il existe quelques pièges dans lesquels on tombe en construisant un système de composants. Les éviter garde votre fichier propre sur le long terme.

• Trop de variants : ne faites pas un variant de chaque petite différence. Cinq axes et 60 combinaisons deviennent ingérables ; résolvez certaines différences avec boolean ou instance swap.
• L'habitude du detach : détacher une instance et la modifier à la main rompt le lien. Utilisez plutôt les overrides (texte, couleur, swap).
• Nommage incohérent : une casse incohérente dans les noms de propriété et de valeur divise le set.
• Ne pas utiliser de variables : saisir des couleurs en hex fixe rend impossible les mises à jour groupées plus tard.

Questions fréquentes

Quelle est la différence entre un composant et un variant ?

Un composant est un élément de design principal, unique et réutilisable. Un variant est la structure qui regroupe différents états du même composant (par exemple Default et Hover) dans un seul component set. Chaque variant est donc en réalité un composant ; le système de variants les maintient ensemble de façon logique.

Les variants nuisent-ils aux performances ?

En pratique, un nombre raisonnable de variants n'affecte pas les performances. Les problèmes surviennent avec des sets multi-axes inutiles produisant des centaines de combinaisons. Limiter le nombre d'axes et utiliser les propriétés boolean/instance swap garde le fichier léger.

Puis-je modifier les variants plus tard ?

Oui. Vous pouvez sélectionner un component set pour ajouter de nouveaux variants, renommer des propriétés ou modifier des valeurs. Les changements se propagent à toutes les instances liées, d'où l'importance d'un nommage cohérent dès le départ.

Vous voulez mettre de l'ordre dans votre design system ? Je peux vous aider à construire une bibliothèque de composants Figma réutilisable et basée sur les variants, ou à remettre de l'ordre dans votre fichier existant. Contactez-moi et parlons de votre projet.