Aperçu des variables, collections et modes

Les variables stockent des valeurs, telles que les couleurs de remplissage, le remplissage et la visibilité, qui peuvent être réutilisées dans différents designs.

À l'instar des styles et des composants, les variables peuvent également être publiées dans les bibliothèques d'équipe. Lorsque vous mettez à jour la valeur d'une variable, vous pouvez mettre à jour les designs dans tous les fichiers en conséquence. Cela permet d'assurer la cohérence des designs dans tous les projets et d'améliorer la mise à jour des design systems.

Types de variables

Il existe quatre types de variables. Chacun peut être appliqué à des propriétés et des éléments spécifiques.

Une définition de variable peut être intégrée à un alias, ou faire référence à la définition d'une autre variable, ce qui permet la mise en œuvre de jetons de design. Toute variable peut être intégrée à un alias contenant une variable existante du même type. Par exemple, les variables de couleur ne peuvent faire référence qu'à d'autres variables de couleur. Découvrez comment intégrer des variables à des alias →

Collections et groupes

Les collections et les groupes sont utilisés pour organiser les variables et faciliter leur recherche.

Une collection est un ensemble de variables et de modes. Les collections peuvent être utilisées pour organiser des variables liées ensemble. Par exemple, utilisez une collection pour localiser du texte dans différentes langues, et une autre collection pour les valeurs spatiales.

Vous pouvez également organiser les variables plus précisément en les ajoutant à des groupes au sein d'une collection. Par exemple, utilisez un groupe pour les couleurs utilisées pour le texte, et un autre pour les couleurs utilisées sur les traits.

Modes de variable

Un mode est une liste de valeurs pour une variable dans une collection, stockant une valeur par variable. Les modes représentent également les différents contextes de nos designs.

Si une variable a plusieurs définitions, chaque définition est associée à un mode. Lorsque la variable est appliquée à la propriété d'un calque, le calque exprime la valeur en fonction du mode dans lequel il se trouve actuellement, ce qui nous permet de faire passer rapidement nos designs d'un contexte à un autre.

Par exemple, nous pourrions avoir une variable de couleur stockant deux valeurs de couleur : une couleur bleue sous un mode, et une couleur blanche sous un autre mode. Nous appliquons cette variable à un calque de texte, qui apparaîtra soit en bleu soit en blanc selon le mode dans lequel elle se trouve.

Voici quelques façons d'utiliser les modes pour changer de contexte :

• Différents thèmes de couleurs, comme les modes clair et sombre
• Différentes langues pour vérifier la disposition de la copie dans les designs
• Tailles des appareils pour afficher l'apparence des éléments avec différents espacements et remplissages

Découvrez comment changer de contextes de design avec les modes de variable →

Éléments à prendre en compte

Styles et variables

Les variables et les styles peuvent tous deux stocker des valeurs de couleur, sont utilisés comme source de vérité et peuvent être réutilisés dans d'autres designs pour plus d'efficacité et de cohérence.

Lorsque vous décidez d'utiliser une variable ou un style, gardez à l'esprit :

Un style peut être utilisé pour des propriétés composées de plusieurs valeurs, telles que les dégradés ou les ombres. Bien que les styles ne puissent pas faire référence à d'autres styles, ils peuvent faire référence à des variables.

Les variables sont constituées de valeurs brutes individuelles, telles que #E5E5E5 dans un mode et #888888 dans un autre. Le passage d'un contexte à un autre ne peut être réalisé qu'en utilisant des modes pour les variables. De plus, les variables peuvent être intégrées à un alias pour créer des structures complexes de jetons de design.