Variants
Les variants vous permettent de regrouper et d'organiser les déclinaisons d’un même composant au sein d’un seul conteneur. Les composants sont ainsi plus faciles à maintenir et plus intuitifs à utiliser.
Vous pouvez appliquer des propriétés aux variants afin de les adapter à votre Design System. Ces propriétés peuvent refléter le code front-end, cela facilitera la transmission Designer / Développeur.
Par exemple, les propriétés d'un bouton peuvent être sa taille (Size*=[…]), son état (State=[…]) ou sa fonction (Primary=[…]*).
Les valeurs sont les différentes options disponibles pour chaque propriété.
Par exemple, la propriété d'état peut avoir les valeurs par défaut (State=default), survolé (State=hover), **sélectionné **(State=selected), appuyé **(State=pressed) ou désactivé (State=disabled).
Pour que l’ensemble soit cohérent, toutes les variantes d'un ensemble de composants doivent utiliser les mêmes propriétés et valeurs, chaque variant étant une combinaison unique de celles-ci.