Architecture de jetons de conception sémantique : jetons globaux, sémantiques et composants
Comment structurer les jetons de conception en trois niveaux, prendre en charge des thèmes et plusieurs marques, et les expédier sur le Web, iOS et Android à l'aide du format DTCG du W3C.
À retenir
La plupart des systèmes de conception matures utilisent trois niveaux de jetons : global (valeurs brutes telles que blue-600), sémantique (objectif, tel que color.action.primary) et composant (utilisations spécifiques, telles que bouton.background). Les composants font référence à des jetons sémantiques, les jetons sémantiques font référence à des jetons globaux et les thèmes ou marques échangent uniquement la couche sémantique. Stockez-les au format W3C DTCG et générez le code de la plateforme avec un outil de build.
Les trois niveaux
Material Design décrit trois classes de jetons : référence, système et composant. De nombreuses équipes les appellent globales, sémantiques et composantes. Les noms diffèrent, mais l’idée est la même : séparer les valeurs brutes des décisions sur la manière dont elles sont utilisées.
- Global (référence) : chaque valeur brute du système, telle que blue-600, space-4, font-size-16, spring-gentle.
- Sémantique (système) : à quoi sert une valeur, telle que color.text.primary, color.action.primary, motion.enter.
- Composant : comment un composant utilise le système, tel que button.background ou dialog.motion.open.
Pourquoi les jetons sémantiques sont importants
Si un bouton utilise directement le bleu-600, chaque changement de thème signifie modifier chaque composant. S'il utilise color.action.primary, le mode sombre, un contraste élevé ou une nouvelle marque, modifiez uniquement ce vers quoi color.action.primary pointe. Material note que les jetons permettent d'appliquer une palette à contraste élevé ou de modifier l'échelle de caractères à l'échelle du système exactement de cette manière.
Thèmes et marques multiples
Pour les produits multimarques ou en marque blanche, conservez un ensemble de jetons sémantiques et de composants et une palette globale par marque. Chaque thème est un mappage de jetons sémantiques vers des valeurs globales. La première version stable de la spécification W3C Design Tokens (2025.10), publiée en octobre 2025, a ajouté une prise en charge de thèmes et multimarques, des espaces colorimétriques modernes tels que Display P3 et OKLCH, ainsi que des alias et des références au niveau des composants.
Les jetons de mouvement ont également leur place ici
Les durées, les courbes d'assouplissement et les ressorts suivent les mêmes niveaux. Un jeton global pourrait être doux comme un ressort grâce à sa rigidité et son amortissement ; un jeton sémantique motion.enter le pointe ; un jeton de composant sheet.motion.open pointe vers motion.enter. Ajoutez un thème à mouvement réduit qui remappe les jetons de mouvement en fondus courts.
Envoi de jetons sur toutes les plateformes
Conservez les jetons dans un référentiel sous le nom DTCG JSON, la source unique de vérité. Un outil de build tel que Style Dictionary les transforme en variables CSS, Swift, Kotlin, Flutter ou autres formats. Les outils de conception qui lisent le même format peuvent rester synchronisés et les outils de codage IA peuvent lire directement le JSON.
- Source de vérité : DTCG JSON dans Git, révisé comme le code
- Build : transformez-vous en chaque plateforme à chaque changement
- Synchronisation de l'outil de conception : importation ou plug-in, valeurs jamais copiées manuellement
- Linting : interdire les valeurs brutes dans les composants
Principes clés à retenir
- Trois niveaux : global (valeurs), sémantique (objectif), composant (utilisation)
- Les composants font référence à des jetons sémantiques, jamais à des valeurs brutes
- Les thèmes et les marques remapper la couche sémantique
- Le format DTCG du W3C a atteint sa première version stable (2025.10) en octobre 2025
- Incluez des jetons de mouvement et un thème à mouvement réduit
Questions fréquentes
Sources
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — Groupe communautaire des jetons de conception W3C
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com