Skip to content
Learni
Voir tous les tutoriels
Design Systems

Comment créer et utiliser les Design Tokens en 2026

12 minBEGINNER
Design TokensDesign SystemUI/UXFigma
Read in English

Introduction

En 2026, les Design Tokens sont devenus incontournables pour tout projet UI/UX scalable. Imaginez-les comme les atomes fondamentaux d'un design system : des valeurs primitives (couleurs, tailles, espacements) qui se propagent automatiquement à travers CSS, composants React ou Figma. Contrairement aux variables CSS classiques, les Design Tokens sont sémantiques et hiérarchiques, permettant une personnalisation multi-plateforme sans duplication.

Pourquoi sont-ils cruciaux ? Dans un monde multi-écrans (mobile, web, wearables), 70% des redesigns échouent par incohérence visuelle, selon des études de Nielsen Norman Group. Les Tokens résolvent cela en centralisant les décisions design : changez une couleur primaire, et tout s'adapte instantanément. Ce tutoriel beginner vous guide pas à pas de la théorie aux bonnes pratiques, avec des exemples concrets comme un token 'color-primary' utilisé pour boutons, liens et backgrounds. À la fin, vous saurez structurer un système prêt pour la production. (148 mots)

Prérequis

  • Connaissances de base en design web (couleurs, typographie, espacements).
  • Familiarité avec Figma ou Sketch pour la visualisation.
  • Notions élémentaires de CSS (sans code ici, juste pour contextualiser).
  • Accès à un outil gratuit comme Token Studio pour Figma (optionnel).

Qu'est-ce qu'un Design Token ?

Un Design Token est une paire nom-valeur sémantique, indépendante du medium. Exemple concret : au lieu de #FF5733 (valeur brute), on utilise $color-danger: #FF5733. Le nom 'danger' évoque instantanément un bouton d'annulation ou une alerte.

Analogie : Comme des variables en programmation, mais pour le design. Ils existent à 4 niveaux :

  • Alias : $color-primary (référence à une valeur).
  • Primitive : #007BFF (couleur de base).
  • Composé : $spacing-large: 2rem (basé sur primitives).
  • Dynamique : Valeurs calculées comme opacity-75: 0.75.

Dans un projet e-commerce, un token spacing-gutter: 1.5rem s'applique uniformément aux cards produits, évitant les ajustements manuels qui causent 40% des bugs visuels.

Les types de Design Tokens essentiels

Classons-les par catégorie pour une fondation solide :

1. Couleurs :

  • Primaires : color-primary, color-secondary.
  • Sémantiques : color-success (vert pour validations), color-error (rouge pour erreurs).
Exemple : Sur une app bancaire, color-neutral-high (#000) pour textes critiques.

2. Typographie :

  • font-family-base: 'Inter'.
  • font-size-h1: 3rem, font-weight-bold: 700.

3. Espacements :
  • Système 4px : spacing-xs: 0.25rem, spacing-s: 0.5rem, jusqu'à spacing-xl: 4rem.

4. Bordures et ombres :
  • border-radius-md: 0.5rem.
  • shadow-sm: 0 1px 3px rgba(0,0,0,0.1).

5. Icônes et breakpoints :
  • icon-size-m: 24px.
  • breakpoint-md: 768px.

Ces 5 types couvrent 90% des besoins UI, comme dans le design system de Shopify Polaris.

Hiérarchie et organisation des Tokens

Structure arborescente pour scalabilité :

``
Primitives/
colors/
blue-500.json
Aliases/
color/
primary.json → primitives.colors.blue-500
Composites/
spacing/
large.json → 3 * spacing.medium
`

Étapes de construction :

  1. Définir primitives (valeurs absolues, non modifiables).
  2. Créer aliases sémantiques (ex. brand-primary → blue-600).
  3. Générer composites (ex. button-height = spacing-m + font-size-base).

Exemple réel : Chez Airbnb, scale.0 = 0px, scale.100 = 4px, gutter = scale.400. Cette échelle logarithmique réduit les décisions : un designer choisit gutter sans calculer.

Avantage : Support multi-mode (light/dark). color-bg référence gray-50 en light, gray-900` en dark.

Flux de travail : De Figma à production

En 2026, le workflow est automatisé :

  1. Design : Créer Tokens dans Figma avec plugin Tokens Studio.
  2. Export : JSON ou YAML (ex. {"color-primary": {"value": "#007BFF"}}).
  3. Ingénierie : Importer en CSS-in-JS (Styled Components) ou Tailwind config.
  4. Tests : Vérifier cohérence via Storybook.
Cas d'étude : Une app SaaS migre vers Tokens et réduit les tickets design de 60% en 3 mois. Les designers ne touchent plus aux valeurs brutes ; tout est référencé.

Bonnes pratiques essentielles

  • Noms descriptifs et cohérents : Utilisez kebab-case (ex. radius-button), jamais btn-radius (trop spécifique).
  • Échelle cohérente : Espacements en multiples de 4px pour grille parfaite.
  • Documentation inline : Chaque token avec description ("Couleur pour actions positives").
  • Versioning : tokens-v2.json pour évolutions sans breakage.
  • Thèmes multiples : Un dossier themes/light/ et themes/dark/, avec overrides minimaux (20% max).

Erreurs courantes à éviter

  • Surcharge de primitives : Ne pas en créer 100 ; limitez à 20-30 bases.
  • Noms non-sémantiques : Évitez red-1 ; préférez alert-destructive.
  • Oubli des modes : Tester light/dark dès le début, pas en fin de projet.
  • Duplication : Jamais copier-coller ; toujours référencer via aliases.

Pour aller plus loin

Maîtrisez les Design Tokens avec nos ressources :