Que sont les jetons de conception et pourquoi sont-ils importants

Les jetons de conception sont les décisions élémentaires d’un système de conception, exprimées sous forme de valeurs nommées et réutilisables. Au lieu d’inscrire en dur #3b82f6 dans une feuille de style, vous définissez color-primary-500: #3b82f6 et utilisez ce nom partout. Le nom porte la signification ; la valeur peut changer sans qu’il soit nécessaire de mettre à jour chaque référence.

Les jetons couvrent toutes les propriétés visuelles : jetons de couleur (color-primary-500: #3b82f6), jetons d’espacement (spacing-4: 16px), jetons typographiques (font-size-lg: 18px, font-weight-bold: 700), jetons de rayon de bordure (radius-md: 8px), jetons d’ombre et jetons de durée d’animation. Ensemble, ils encodent le langage visuel complet.

Les jetons créent une source unique de vérité, partagée entre la conception et l’ingénierie. Les concepteurs définissent les valeurs dans Figma et les ingénieurs les utilisent dans le code. Lorsque la couleur de la marque change, vous mettez à jour la valeur d’un seul jeton et chaque composant qui l’utilise reflète automatiquement la modification — sans effectuer de recherche-remplacement dans des milliers de fichiers.

En l’absence de jetons, les valeurs de couleur et d’espacement sont codées en dur dans les feuilles de style, les fichiers de composants et les classes utilitaires. Une couleur bleue peut apparaître sous la forme de #3b82f6, rgb(59, 130, 246) et blue-500 dans différents fichiers. Modifier la couleur de la marque nécessite de rechercher et de remplacer chaque occurrence, avec un risque élevé d’en oublier certaines.

Les jetons de design constituent la base des systèmes prenant en charge plusieurs thèmes. En mode sombre, des jetons sémantiques tels que color-background et color-text font référence à différentes valeurs primitives selon le thème actif. Il suffit de modifier une seule correspondance, et non chaque composant. Les thèmes clair et sombre partagent le même code de composant, mais leurs valeurs de jetons diffèrent.

Pour une plateforme SaaS destinée à plusieurs marques, les jetons permettent de personnaliser chaque marque sans dupliquer le code. La marque A utilise le bleu comme couleur principale, tandis que la marque B utilise le vert : seules leurs correspondances de jetons sémantiques diffèrent. Le code du composant bouton est identique ; il lit color-action-primary, qui correspond à une couleur différente selon la marque.

Les jetons sont organisés par niveaux. Les jetons primitifs sont des valeurs brutes : color-blue-500: #3b82f6. Les jetons sémantiques expriment une signification : color-action-primary: {color-blue-500}. Les jetons de composant sont les plus spécifiques : button-primary-background: {color-action-primary}. Cette hiérarchie sépare le « quoi » de « l’endroit où il est utilisé ».

Les jetons sémantiques sont essentiels pour prendre en charge plusieurs thèmes. Dans le thème clair, color-background: {color-white}. Dans le thème sombre, color-background: {color-gray-900}. Les composants font référence à color-background, et non à une couleur précise. Changer de thème remplace les correspondances des jetons sémantiques : les composants n’ont pas besoin d’être modifiés.

Les variables Figma, introduites en 2023, sont des jetons de design intégrés à Figma. Les concepteurs définissent dans Figma la même hiérarchie de jetons que celle mise en œuvre par les ingénieurs dans le code. Des outils comme Tokens Studio for Figma ou le plugin officiel Figma Tokens exportent les variables Figma au format JSON, que Style Dictionary compile ensuite en variables CSS ou en objets JS.

Le groupe communautaire du W3C consacré aux jetons de design élabore un format JSON standard pour les jetons de design. L’objectif est l’interopérabilité : un fichier de jetons qui fonctionne avec n’importe quel outil de conception (Figma, Sketch) et n’importe quel outil de compilation (Style Dictionary, Theo, Panda CSS). Adopter ce format de spécification permet de pérenniser votre système de jetons.

Les jetons de design nécessitent des décisions de gouvernance : qui peut ajouter de nouveaux jetons (l’équipe de conception, l’équipe d’ingénierie ou les deux), comment les jetons sont versionnés, comment les jetons obsolètes sont retirés et comment les changements de jetons sont communiqués aux équipes utilisatrices. Sans gouvernance, les systèmes de jetons dérivent : de nouvelles valeurs codées en dur apparaissent à côté du système de jetons, ce qui contredit son objectif.

Les jetons de design sont des valeurs atomiques nommées (couleurs, espacements, typographie) qui constituent le vocabulaire d’un système de conception. Ils créent une source unique de vérité entre la conception et le code. La hiérarchie à trois niveaux — primitif (valeurs brutes), sémantique (signification), composant (utilisation spécifique) — permet de prendre en charge plusieurs thèmes et plusieurs marques. Les variables Figma et la spécification des jetons de design du W3C favorisent la synchronisation entre conception et ingénierie. La gouvernance des jetons garantit la cohérence du système au fil du temps.