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.