Design Tokens & Système de Variables

L’atome de liaison entre Design et Tech

UI/UX Design
Design System
Centraliser les décisions de style (couleurs, espaces, typographie) sous forme de variables agnostiques.

Un design token est un nom symbolique (un alias) qui stocke une valeur graphique brute. C’est le contrat immuable entre le Design et la Tech, éliminant définitivement les valeurs codées en dur (hard-coding).

Pourquoi tokeniser ?

Dans un projet moderne, propager des valeurs brutes comme #268bd2 ou 16px directement dans le code pose trois problèmes majeurs :

  • Maintenance complexe : Si l’identité de marque change, il faut traquer et remplacer chaque occurrence.
  • Manque d’intention : #268bd2 ne dit pas pourquoi cette couleur est là. Est-ce un bouton principal ? Un lien ? Une bordure d’alerte ?
  • Incohérence multi-plateforme : Le Web (CSS), iOS (Swift) et Android (Compose) parlent des syntaxes différentes.

Les tokens résolvent ces problèmes en centralisant toutes les décisions de design dans une Source Unique de Vérité (généralement un fichier JSON) et en la compilant automatiquement pour toutes les cibles.

  • Consistance : Les mêmes espacements et couleurs sont partagés par toutes les équipes.
  • Agilité : Un changement de marque se déploie en quelques minutes sur toutes les applications.
  • Thématisation : Le mode sombre ou les thèmes alternatifs se résument à changer un jeu de tokens sémantiques.

Les 3 niveaux de spécificité

Pour assurer flexibilité et maintenance, les design tokens sont organisés en trois niveaux hiérarchiques :

💎 1. Global / Primitive

La valeur brute. Il liste tous les choix disponibles dans le système de design, sans leur attribuer de rôle.

Exemple :

  • color-blue-500 \(\rightarrow\) #268bd2
  • spacing-base \(\rightarrow\) 16px
🔄 2. Sémantique / Alias

L’intention de design. Il donne un rôle à une primitive. C’est ici que réside toute la puissance de thématisation.

Exemple :

  • color-action-primary \(\rightarrow\) {color-blue-500}
  • spacing-layout-padding \(\rightarrow\) {spacing-base}
📦 3. Composant

La portée restreinte. Il lie un token sémantique à un composant unique. Il est utilisé pour les micro-ajustements.

Exemple :

  • button-primary-bg \(\rightarrow\) {color-action-primary}
  • card-border-radius \(\rightarrow\) 12px
Pourquoi cette séparation ?

Si vous décidez de passer votre bouton principal en vert pour une campagne, vous changez l’alias color-action-primary sans modifier la primitive color-blue-500. Tout le système s’adapte sans casser la cohérence.

Tokeniser la Couleur, la Typographie et l’Espace

Toutes les propriétés visuelles de l’interface peuvent être tokenisées.

🎨 Les couleurs

Comme vu dans le cours sur les Couleurs, le choix des couleurs s’appuie sur la physique et la perception humaine (CIELAB). En tokenisation, on associe les variations de luminosité (\(L^*\)) à des échelles de primitives numériques (ex: 100 à 900) pour assurer un contraste constant et le respect des normes WCAG.

✍️ La typographie

En complément du cours sur les Polices, la typographie est tokenisée selon ses propriétés clés (familles, graisses, hauteurs de ligne) ou les axes de polices variables (MONO, CASL, wght). On crée des ensembles sémantiques comme font-heading-main.

📏 L’espacement

La grille de 8px étudiée dans le cours sur la Disposition est tokenisée sous forme de multiplicateurs. Plutôt que d’écrire des valeurs arbitraires, on structure l’échelle selon la loi de Gestalt avec des alias simples : spacing-s, spacing-m, spacing-l.

Du Design au Code : Le Pipeline

Comment les tokens passent-ils de Figma au code de production ? C’est le rôle du pipeline de compilation (souvent géré par Style Dictionary d’Amazon).

graph TD
    Figma["Figma / Tokens Studio"] -->|Export JSON| Src["Source unique de vérité : tokens.json"]
    Src --> SD["Style Dictionary Compiler"]
    SD -->|Compile| CSS["web: variables.css"]
    SD -->|Compile| SCSS["web-build: variables.scss"]
    SD -->|Compile| Swift["iOS: DesignTokens.swift"]
    SD -->|Compile| Kotlin["Android: DesignTokens.kt"]

    style Src fill:#2aa198,color:#fff,stroke:none
    style SD fill:#268bd2,color:#fff,stroke:none
    style CSS fill:#859900,color:#fff,stroke:none
    style SCSS fill:#859900,color:#fff,stroke:none
    style Swift fill:#cb4b16,color:#fff,stroke:none
    style Kotlin fill:#b58900,color:#fff,stroke:none

Atelier interactif : Le Pipeline de Tokens

Modifiez les décisions de design ci-dessous pour voir comment Style Dictionary compile instantanément les tokens pour le Web (CSS, SCSS), iOS (Swift) et Android (Jetpack Compose).

Sélecteurs de Tokens
Pipeline Style Dictionary 
// En attente de compilation...
/* En attente de compilation... */
// En attente de compilation...
// En attente de compilation...
// En attente de compilation...