Design Tokens
Centraliser et standardiser les bases visuelles d'un design.
Un “Design Token” est une valeur définissant des éléments fondamentaux du design comme les couleurs, les tailles de texte, les espacements, et autres. Les Design Tokens permettent de garantir la cohérence visuelle et d'adapter facilement un design à différents contextes. Par exemple, au lieu d’appliquer une couleur directement sur un élément, on utilise un token comme background-primary, qui agit comme une variable unique et centralisée. Cette variable va garder le même nom mais sa couleur va changer en fonction du thème (particulier, deep, luxid,…) ou du mode (light/dark).
Utilisation des tokens
Pour choisir un token afin de colorer un élément, rien de plus simple, leur nom indique où les utiliser (voir l’exemple ci-dessous).

Structure de la librairie de tokens
Nous avons deux collections de tokens. Chaque collection a son rôle et fait appel à la précédente. La collection utilisée par les designers est la "Particulier".

Il est important de rappeler que la valeur d’un Design Token va varier en fonction du thème et du mode (voir exemple ci-dessous).

Ci-dessous en guise d’exemple un échantillon des Design Tokens (couleur uniquement) du thème particulier en mode light et dark.
Comment ajouter un nouveau Design Token ?
Dans ce tutoriel, nous allons créer un Design Token utilisé comme background d’un nouveau composant. Ce background aura une couleur différente selon le thème et le mode (clair ou sombre). Nous relierons toutes ces couleurs à notre Design Token nommé : composant-background-onlight.
Étape 1 : Accès à la librairie
-
Ouvre la librairie "POST - Design System - 00 - Foundation".
-
Accède à l’onglet "local variables" dans la colonne de droite.
C’est ici que sont regroupés les Design Tokens (variables).
Étape 2 : Vérification des palettes de couleurs
-
Si les couleurs dont tu as besoin n’existent pas encore dans les palettes :
- Ouvre la collection "00 - Foundation".
- Ajoute les couleurs manquantes dans les palettes correspondantes (POST, LuxID, Deep).

Étape 3 : Création du Design Tokens (variable) dans la collection “Particulier”
-
Accède à la collection "Particulier".
-
Crée une nouvelle variable en suivant les règles de nomenclatures (voir image ci-dessous). Pour notre exemple, ça sera : Composant/background-onlight. Cette nouvelle variable va automatiquement se dupliquer dans les autres thèmes.


-
Définis la couleur de cette variable :
- Sélectionne la couleur appropriée depuis la palette de "00 - Foundation".

-
Fais de même pour le mode sombre (dark mode).

-
Dans les autres thèmes (extended collections), modifie au besoin la couleur de cette nouvelle variable.


Étape 4 : Publication
- Publie ta librairie pour rendre le Design Token accessible aux designers.
- Ton Design Token est prêt à être utilisé dans ton nouveau composant !