Un design token est une petite unité de conception d’un design system qui permet de modifier les valeurs à la volée dans le projet : une couleur, une typographie pour les titres.
Un jeton de conception peut être représenté par des variables telles que primary-color, secondary-color etc.
Un Design Token est un pont de données entre le design et le code, transformant les décisions visuelles en un format que les systèmes peuvent comprendre et reproduire fidèlement.
Les Design Tokens sont des variables nommées qui stockent les valeurs de conception utilisées pour construire un système de design.
Ils représentent les décisions atomiques de design.
Rôle et utilisation
Au lieu d’utiliser des valeurs codées en dur (ex: #FFFFFF pour le blanc, 16px pour l’espacement), les tokens stockent ces valeurs sous des noms lisibles et sémantiques (ex: $color-brand-primary, $spacing-medium).
Dans Figma
Gérés via les Variables natives de Figma ou des plugins comme Tokens Studio, ils centralisent les styles.
Valeur stratégique
Ils sont la seule source de vérité pour les styles. Le fait d’utiliser des tokens garantit que les styles appliqués dans Figma sont exactement les mêmes que ceux utilisés par les développeurs dans le code (via theme.json pour WordPress FSE ou CSS variables), assurant une cohérence parfaite et facilitant les changements globaux (ex: passer d’un thème clair à un thème sombre).