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 même ensemble de variantes, ce qui simplifie la gestion et l’utilisation des ressources.

Création d’un ensemble de variantes

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

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 passer facilement d’un style ou d’un état à un autre. 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 des prototypes interactifs, connecter un bouton par défaut à son état survolé dans l’onglet Prototype. Définir le Déclencheur sur « While Hovering » et l’Animation sur « Dissolve » avec une durée de 500 ms. Utiliser le bouton Aperçu près du point de départ du flux pour tester directement les interactions.

Cette structure rationalisée facilite la compréhension et le suivi du processus. N’hésitez pas à demander d’autres ajustements si nécessaire !