Design tokens

Ce que sont les design tokens

Les design tokens sont les plus petites unités d'un design system : des variables nommées qui stockent une seule décision visuelle. Au lieu d'écrire une valeur brute comme le code hexadécimal d'un bleu ou une valeur en pixels pour un espacement, vous la stockez une fois sous un nom porteur de sens, par exemple color-primary ou space-4, puis vous référencez ce nom partout. Un token est la garantie que cette décision vit à un seul endroit.

L'idée vient d'une frustration simple. Dans une interface qui grandit, le même bleu peut apparaître dans cinquante fichiers, et le même espacement être saisi à la main des centaines de fois. Quand la couleur de marque change, il faut traquer chaque occurrence. Les tokens suppriment ce problème en transformant des valeurs éparpillées en une référence nommée unique, si bien qu'une seule modification met à jour tout le produit.

Comment fonctionnent les design tokens

Un token est essentiellement une clé et une valeur. La clé est un nom stable et lisible, la valeur est la décision concrète qu'il représente. Les tokens sont regroupés par ce qu'ils contrôlent, et les familles les plus courantes sont faciles à reconnaître.

• Couleur : couleurs de marque, de texte, de fond et de bordure.
• Espacement : une échelle de marges et de paddings, souvent fondée sur une unité de base.
• Typographie : tailles de police, hauteurs de ligne, graisses et familles.
• Rayon et ombre : arrondi des angles et élévation utilisés dans les composants.

Un token peut aussi référencer un autre token. Un token sémantique comme button-background peut pointer vers color-primary, qui détient la valeur réelle. Cette superposition permet de changer une fois le sens de primary et de voir chaque usage sémantique suivre.

Tokens globaux et tokens sémantiques

Les systèmes matures séparent deux couches. Les tokens globaux (parfois appelés tokens primitifs) sont la palette brute : chaque couleur, chaque pas de l'échelle d'espacement, nommés de façon neutre. Les tokens sémantiques se placent au-dessus et décrivent l'intention : text-default, surface-muted, action-primary. Les composants référencent les tokens sémantiques, jamais les valeurs brutes.

Cette séparation rend le theming possible. Pour construire un mode sombre, vous faites pointer la couche sémantique vers d'autres globaux, et les composants ne changent pas du tout. Le même procédé permet de gérer plusieurs marques depuis une seule base, car seule la correspondance change tandis que la structure reste fixe.

Pourquoi les design tokens comptent

Le premier bénéfice est la cohérence. Quand chaque composant puise dans les mêmes tokens, le rythme des espacements, la couleur et la typographie paraissent intentionnels sur tout le produit plutôt que légèrement différents à chaque écran. La cohérence n'est pas un détail cosmétique : c'est ce qui rend une interface fiable et facile à apprendre.

Le deuxième bénéfice est la rapidité de changement. Un changement de marque, une correction de contraste ou un nouveau rythme d'espacement devient une poignée de modifications au lieu d'un balayage manuel du code. Parce qu'ils sont nommés, les tokens documentent aussi l'intention : un nouveau membre qui lit action-primary comprend le rôle d'une valeur mieux qu'un code hexadécimal ne le dira jamais.

Les tokens sont aussi le pont entre design et code. Les outils de design modernes exposent des variables qui correspondent directement aux tokens, si bien que la valeur choisie par un designer dans Figma peut devenir la valeur exacte livrée par un développeur. Ce vocabulaire partagé élimine toute une catégorie d'erreurs de traduction, où une couleur dérive légèrement entre la maquette et le site en ligne.

Les design tokens dans les outils no-code

Nul besoin d'une chaîne de build pour profiter des tokens. Webflow expose des variables de couleur, d'espacement et de typographie qui se comportent exactement comme des tokens : définissez-les une fois, appliquez-les sur tout le site, et changez-les globalement depuis un seul panneau. Framer propose un modèle similaire. Comprendre les tokens vous rend donc bien plus efficace dans les outils visuels, car vous cessez de coder des valeurs en dur pour gérer des décisions.

La discipline compte plus que l'outil. Même un petit site profite d'une poignée de variables bien nommées pour ses couleurs et espacements de base, car cela garde le design cohérent à mesure que les pages se multiplient. L'erreur à éviter est de créer des centaines de tokens que personne ne réutilise, ce qui ajoute de la lourdeur sans clarté. Les bons jeux de tokens sont petits, intentionnels, et nommés pour leur rôle plutôt que pour leur apparence.

Les design tokens chez BeBranded

Chez BeBranded, nous traitons les tokens comme la fondation de chaque projet. Nous définissons des variables globales de couleurs, d'espacement et de typographie dès le début d'un build, puis nous les référençons via des composants Webflow pour qu'une seule modification se propage sur tout le site. C'est ce qui nous permet de livrer un changement de marque ou un ajustement de contraste en quelques minutes plutôt qu'en plusieurs jours, et de garder un site client cohérent longtemps après la mise en ligne. Parce que nos variables Webflow reflètent les tokens définis dans Figma, le design qu'un client valide est le design qui part en production, sans dérive entre les deux. Pour nous, les tokens ne sont pas une bonne pratique abstraite, ils sont la raison concrète pour laquelle un site BeBranded reste cohérent et facile à maintenir en grandissant.