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.
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.
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.
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.