Le Journal d'UX
L'actualité UX,
au-dessus de la ligne de flottaison.
Wiki UX Design tokens

Design tokens

Livrable
Définition

Variables nommées qui stockent les décisions visuelles d'un design system : couleurs, espacements, typographies, ombres, rayons de bordure. Ils sont agnostiques de toute plateforme et se déclinent en CSS, iOS, Android ou tout autre format. Les tokens créent une source unique de vérité entre le design et le code. Ils se structurent en niveaux : primitifs (valeurs brutes), sémantiques (intentions) et composants (contexte d'usage). Modifier un token propage le changement partout.

En pratique

Les designers définissent les tokens dans Figma, les développeurs les consomment via un fichier JSON transformé par des outils comme Style Dictionary. Un token `color-primary` vaut `#0066FF` en mode clair et `#3399FF` en mode sombre. L'équipe doit s'accorder sur la convention de nommage dès le départ. Les tokens évitent les valeurs en dur disséminées dans le code. Sans gouvernance, ils deviennent vite aussi désordonnés que le problème qu'ils résolvaient.

Exemple

Salesforce a publié ses design tokens en open source dans le Lightning Design System. Chaque composant référence des tokens sémantiques, ce qui permet de gérer le thème global depuis un seul fichier.

Voir aussi
Atomic design
Cohérence (*Consistency*)
Design system
Guide de style (*Style Guide*)
Sources
Design Tokens W3C Community Group
Lightning Design System - Salesforce

Dans le flux

3
Note

Un outil open source pour visualiser et explorer les design tokens. Simple, sans friction, exactement ce qu'il manquait pour déboguer un système de tokens sans passer par du code ou des spreadsheets.

Le Journal d'UX est un média indépendant sur l'expérience utilisateur. Liens curatés, wiki UX en français, communauté.