Dans Figma, les variants sont une fonctionnalité avancée qui permet de regrouper plusieurs versions d’un même composant sous un seul composant principal. Cela facilite la gestion et l’utilisation de variations d’un élément dans vos designs, comme différents styles de boutons, états d’interaction ou configurations d’un composant.
1. Qu’est-ce qu’un Variant ?
Un variant est une version spécifique d’un composant, regroupée avec d’autres variantes pour former un seul composant logique. Cela simplifie la gestion des styles et permet de naviguer facilement entre les variations.
- Exemple classique : Un bouton avec plusieurs styles (par exemple, primaire, secondaire) et états (par exemple, normal, hover, disabled).
- Tous ces styles et états sont organisés dans un seul composant « Bouton » au lieu de créer plusieurs composants séparés.
2. Pourquoi utiliser des Variants ?
- Simplifie l’organisation : Regroupe plusieurs composants similaires en un seul.
- Facilite le prototypage : Changez rapidement les propriétés des composants (comme l’état d’un bouton) via un menu déroulant.
- Gain de temps : Moins de duplication de composants et gestion plus centralisée.
3. Comment créer des Variants ?
Étape 1 : Créez un Composant de Base
- Créez un élément que vous souhaitez convertir en composant (par exemple, un bouton).
- Transformez-le en composant avec
Ctrl/Cmd + Alt + K.
Étape 2 : Ajoutez des Variants
- Sélectionnez le composant.
- Dans le panneau de droite, cliquez sur « Add Variant » ou utilisez le raccourci
Shift + V. - Une nouvelle version du composant apparaîtra. Vous pouvez personnaliser ses propriétés.
Étape 3 : Organisez les Variants en un Set
- Si vous avez plusieurs composants similaires, sélectionnez-les tous, puis cliquez sur « Combine as Variants » dans le panneau de droite.
- Ils seront regroupés dans un Variant Set.
4. Propriétés des Variants
Chaque variant peut avoir des propriétés personnalisées pour définir ses différences. Par exemple :
- Type : Primaire, Secondaire, Tertiaire.
- État : Normal, Hover, Disabled, Active.
- Taille : Petit, Moyen, Grand.
Ces propriétés apparaissent sous forme de menu déroulant ou de boutons radio lorsque vous utilisez une instance de ce composant.
5. Utilisation des Variants dans un Design
- Une fois vos variants créés, glissez une instance du composant dans votre design.
- Dans le panneau de droite, vous pouvez choisir parmi les options disponibles (par exemple, changer un bouton de Primaire à Secondaire ou passer son état à Hover).
- Le changement est instantané et conserve la cohérence du design.
6. Exemple concret : Bouton avec Variants
- Propriétés :
- Type : Primaire / Secondaire.
- État : Normal / Hover / Disabled.
- Taille : Petit / Moyen / Grand.
- Organisation des Variants :
- Bouton Primaire – Normal.
- Bouton Primaire – Hover.
- Bouton Primaire – Disabled.
- Bouton Secondaire – Normal.
- Bouton Secondaire – Hover.
- Bouton Secondaire – Disabled.
Au lieu de créer 6 composants séparés, vous créez un seul composant avec 6 variants organisés par propriétés.
7. Avantages des Variants
- Centralisation : Toutes les variantes d’un composant sont regroupées en un seul élément.
- Prototypage fluide : Vous pouvez simuler des interactions comme un passage de l’état « normal » à « hover » dans vos prototypes.
- Évolutivité : Ajoutez facilement de nouvelles variantes au fur et à mesure des besoins.
- Lisibilité : Réduit le désordre dans votre bibliothèque de composants.
8. Variants et Auto Layout
Les variants fonctionnent parfaitement avec les Auto Layouts, ce qui permet de gérer des variantes de composants adaptatifs. Par exemple :
- Un bouton « Primaire » peut avoir plusieurs tailles (petit, moyen, grand), chacune ajustant automatiquement la taille du bouton en fonction du texte.
En résumé :
- Variants permettent de regrouper et de gérer des versions d’un composant en fonction de ses propriétés (type, état, taille, etc.).
- Ils améliorent la modularité, la cohérence et la productivité.
- C’est une fonctionnalité idéale pour gérer des systèmes de design complexes.