Design tokens

Les Design tokens sont des unités atomiques de design exprimées sous forme de paires clé/valeur, utilisées pour décrire de façon sémantique les choix visuels d’un système de design.

Contrairement à des valeurs brutes (ex. #FF0049 ou 16px), les tokens portent du sens métier :

• --color-primary-action au lieu de #FF0049
• --space-md au lieu de 16px

Les Design Tokens sont des valeurs nommées qui représentent les éléments visuels fondamentaux d’un design system, comme les couleurs, les typographies, les espacements, etc

Exemple :

{
  "color": {
    "primary": "#0066cc",
    "secondary": "#ff9900",
    "text": "#333333",
    "background": "#ffffff"
  },
  "typography": {
    "fontFamily": "'Roboto', sans-serif",
    "fontSize": {
      "small": "12px",
      "medium": "16px",
      "large": "24px"
    }
  },
  "spacing": {
    "small": "8px",
    "medium": "16px",
    "large": "24px"
  }
}

Caractéristiques principales

1. Abstraction sémantique
   • Ils définissent ce que représente une valeur (ex. --color-background-primary) plutôt que ce qu’elle est.
2. Indépendance outil
   • Stockés souvent en JSON, YAML ou via des outils comme Tokens Studio, ils peuvent alimenter Figma, React, iOS, Android, etc.
3. Hiérarchie et modes
   • Supportent les thèmes (light/dark), les plateformes (web/mobile), ou les contextes d’usage (marketing/produit).
4. Interopérabilité design-dev
   • Grâce à des outils comme Tokens Studio, Theo (Salesforce) ou Style Dictionary (Amazon), les tokens se synchronisent entre Figma (Variables) et le code source.

Pourquoi c’est un concept clé ?

• Évite la duplication et les incohérences.
• Accélère l’évolution du design system (un changement de token : mise à jour globale).
• Réduit le « mapping » manuel entre maquettes et code.
• Facilite l’accessibilité et la personnalisation (ex. switch thème).
• Standard industriel : utilisé chez Airbnb, Shopify, IBM, Salesforce, etc.