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).

Représentation visuelle de l'utilisation des tokens sur des éléments d'interface. Par exemple : pour un titre sur fond blanc on utilisera le token text&icon-primary-onlight

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".

Les collections sont 00 - Foundation, 01 - Mode, 02 - Brand

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).

Le token button-primary-backgorund-default-onlight sera jaune avec le thème particulier et bleu avec le thème Deep.

Ci-dessous en guise d’exemple un échantillon des Design Tokens (couleur uniquement) du thème particulier en mode light et dark.

Représentation visuelle des Tokens dans Figma

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

  1. Ouvre la librairie "POST - Design System - 00 - Foundation".

  2. Accède à l’onglet "local variables" dans la colonne de droite.
    C’est ici que sont regroupés les Design Tokens (variables).

    Onglet

Étape 2 : Vérification des palettes de couleurs

  1. 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”

  1. Accède à la collection "Particulier".

  2. 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.

  3. Définis la couleur de cette variable :

    • Sélectionne la couleur appropriée depuis la palette de "00 - Foundation".

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

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

Étape 4 : Publication

  1. Publie ta librairie pour rendre le Design Token accessible aux designers.
  2. Ton Design Token est prêt à être utilisé dans ton nouveau composant !