Variants in Figma: Rationalisation des composants UI pour plus d'efficacité

Que sont les variantes ?

Les variantes permettent de regrouper plusieurs déclinaisons d’un composant, telles que différents styles ou états d’un bouton, dans un seul conteneur. Par exemple, les versions sombre, claire et verte d’un bouton de recherche peuvent être regroupées dans un ensemble de variantes, ce qui simplifie la gestion et l’utilisation des ressources.

Création d’un ensemble de variantes

• Sélection d’un groupe de composants.
• Accès au panneau Design et choix de Créer un ensemble de composants pour regrouper les composants dans une seule variante.
• Utilisation de barres obliques (par exemple, button/dark/default) pour organiser les propriétés comme le style (dark, light, green) et l’état (default, hover).
• Renommage des libellés de propriétés pour plus de clarté, par exemple en changeant « Property 1 » en Style et « Property 2 » en État.

Gestion des variantes

Des instances de variantes peuvent être créées en copiant l’une d’elles. Les propriétés de chaque instance peuvent être ajustées depuis le panneau Design, ce qui permet de basculer entre différents styles ou états. Pour ajouter d’autres variantes, utiliser l’icône plus sous l’ensemble de variantes pour inclure des déclinaisons supplémentaires.

Création d’interactions

Pour les prototypes interactifs, connecter un bouton par défaut à son état survolé dans l’onglet Prototype. Définir le Déclencheur sur « Pendant le survol » et l’Animation sur « Dissoudre » avec une durée de 500 ms. Utiliser le bouton Aperçu près du point de départ du flux pour tester les interactions directement.

Cette structure simplifiée rend le processus plus facile à comprendre et à suivre. N’hésitez pas à demander d’autres ajustements si besoin !