Une introduction simple aux design tokens

Si vous avez déjà mis à jour une couleur de marque et passé l’heure suivante à traquer chaque #3B82F6 codé en dur dispersé dans votre feuille de style, vous comprenez déjà le problème que résolvent les design tokens. Cet article explique ce que sont les design tokens, en quoi ils diffèrent des simples variables CSS et comment commencer à les utiliser dans votre workflow de stylisation frontend.

Qu’est-ce qu’un design token ?

Les design tokens sont des valeurs nommées et réutilisables qui représentent vos décisions de design — des éléments tels que les couleurs, les espacements, la typographie, les rayons de bordure et les ombres. Au lieu d’écrire padding: 16px directement dans un composant, vous référencez un token comme space-4 qui contient cette valeur.

Fondamentalement, chaque design token n’est qu’un nom associé à une valeur. Mais en tant que méthodologie, ils vont plus loin que cela. Le Design Tokens Community Group (DTCG), un groupe communautaire du W3C travaillant à une spécification partagée, les décrit comme un moyen d’exprimer les décisions de design dans un format indépendant de la plateforme afin qu’elles puissent être partagées entre différentes disciplines, outils et technologies.

Cette indépendance vis-à-vis de la plateforme est essentielle. Les mêmes définitions de tokens peuvent être transformées en propriétés personnalisées CSS pour le web, en constantes Swift pour iOS ou en valeurs XML pour Android — le tout à partir d’une source unique de vérité.

Catégories courantes de design tokens

La plupart des design systems organisent leurs tokens dans les catégories suivantes :

• Couleur — palette de marque, couleurs de texte, arrière-plans, bordures
• Espacement — valeurs de padding, margin, gap
• Typographie — famille de police, taille, graisse, hauteur de ligne
• Rayon de bordure — arrondi des coins pour les composants
• Ombre — effets d’élévation et de profondeur

Tokens primitifs vs tokens sémantiques

Cette distinction est l’un des concepts les plus utiles lorsqu’on travaille avec les tokens d’un design system.

Les tokens primitifs (également appelés tokens de base ou globaux) sont des valeurs brutes sans usage implicite :

{
  "color-blue-500": { "$value": "#3B82F6", "$type": "color" },
  "space-4": { "$value": "16px", "$type": "dimension" }
}

Les tokens sémantiques référencent les primitifs et ajoutent une intention. Ils vous indiquent où utiliser une valeur, pas seulement ce qu’elle est :

{
  "color-action-primary": { "$value": "{color-blue-500}", "$type": "color" },
  "spacing-component-padding": { "$value": "{space-4}", "$type": "dimension" }
}

Lorsque vous modifiez color-blue-500, chaque token sémantique qui le référence est automatiquement mis à jour. C’est là toute la puissance du système.

Design tokens vs variables CSS

Les variables CSS et les design tokens sont liés, mais ce n’est pas la même chose.

Les design tokens sont la source. Les variables CSS en sont souvent la sortie. Un outil comme Style Dictionary prend vos définitions de tokens et les transforme dans le format requis par chaque plateforme.

Un exemple pratique simple

Voici un petit ensemble de tokens définis avec la syntaxe DTCG :

{
  "color-blue-500": { "$value": "#3B82F6", "$type": "color" },
  "color-text-primary": { "$value": "{color-blue-500}", "$type": "color" },
  "space-4": { "$value": "16px", "$type": "dimension" }
}

Après les avoir passés dans Style Dictionary, votre sortie CSS ressemble à ceci :

:root {
  --color-blue-500: #3B82F6;
  --color-text-primary: var(--color-blue-500);
  --space-4: 16px;
}

Désormais, vos composants utilisent var(--color-text-primary) au lieu d’une valeur hexadécimale codée en dur. Modifiez le token une fois, et la mise à jour se propage partout.

Du côté du design, les variables Figma suivent le même modèle primitif-vers-sémantique, ce qui facilite l’alignement entre design et code.

Commencez petit, montez en charge intentionnellement

Vous n’avez pas besoin d’un système de tokens complet dès le premier jour. Commencez avec des primitifs de couleur et d’espacement, ajoutez une couche sémantique à mesure que des patterns émergent, et introduisez de l’outillage lorsque le processus manuel devient un goulot d’étranglement.

Conclusion

Les design tokens ne sont pas qu’un moyen d’organiser le CSS — ils constituent un langage partagé entre designers et développeurs. Une fois ce langage en place, la cohérence à travers votre produit cesse d’être quelque chose que vous imposez manuellement et devient quelque chose dont votre système se charge pour vous.

FAQ

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..