Design token

Qu'est-ce qu'un design token ?

Un design token est une valeur nommée, indépendante de la plateforme, qui stocke une seule décision de design : une couleur, un palier d'espacement, une taille de police, un rayon ou une ombre. Au lieu d'écrire #1A56DB à cinquante endroits, l'équipe définit color-brand-primary une fois et la référence partout. On modifie le token, et chaque bouton, lien et bannière qui l'utilise se met à jour en même temps.

Les tokens sont les plus petites briques d'un design system. Ils relient les fichiers de design et le code, pour que les deux restent synchronisés.

Fonctionnement des design tokens

Un token a un nom et une valeur, souvent stockés dans un fichier JSON puis transformés dans le format de chaque plateforme, comme CSS, iOS ou Android. Sur le web, les tokens deviennent le plus souvent des variables CSS :

:root {
  --color-brand-primary: #1a56db;
  --space-m: 1rem;
  --radius-s: 4px;
}
.button {
  background: var(--color-brand-primary);
  padding: var(--space-m);
  border-radius: var(--radius-s);
}

Types de design tokens

• Couleur : couleurs de marque, de texte, de fond et d'état, comme dans une palette de couleurs.
• Typographie : familles, tailles, graisses et interlignes, comme dans une échelle typographique.
• Espacement et dimensions : marges, remplissages, écarts et points de rupture.
• Forme et profondeur : rayons, bordures et ombres.
• Mouvement : durées et courbes d'accélération.

Tokens globaux, alias et composants

Bonnes pratiques et erreurs courantes

• Nommez les tokens selon leur usage, pas leur apparence : color-danger plutôt que color-red.
• Utilisez les trois niveaux pour qu'un rebranding ne modifie que la couche globale.
• Gardez la liste courte. Trop de tokens sont aussi difficiles à maintenir que des valeurs codées en dur.
• Utilisez les alias pour gérer le mode sombre et les thèmes en réassignant les valeurs.
• Stockez les tokens dans une source de vérité unique et automatisez leur export vers le design et le code.
• Documentez chaque token pour que designers et développeurs partagent le même vocabulaire.

Design tokens, cohérence et rapidité

Les tokens suppriment les approximations entre le design d'interface et le développement. Ils rendent les refontes moins coûteuses, gardent cohérents les produits multi-marques et accélèrent la création de nouvelles pages, car les décisions sont déjà prises.

Les design tokens chez BeBranded

Chez BeBranded, nous définissons les tokens au début d'un projet de design system, dans Figma et dans la construction Webflow, pour que couleur, typographie et espacement restent identiques de la maquette au site en ligne. Quand la marque évolue, nous modifions la couche de tokens au lieu de retoucher les pages une à une. Cela fait partie de notre service design.