Le monde du design numérique est en constante évolution, et pour rester compétitif, il est essentiel de maintenir une cohérence visuelle à travers toutes les plateformes et tous les dispositifs. C’est là que les “design tokens” entrent en jeu. Ces petites unités de conception, bien que souvent méconnues, jouent un rôle essentiel dans la création d’expériences utilisateur harmonieuses et efficaces.

Qu’est ce qu’un design token ?

Les design tokens sont des valeurs standardisées qui représentent les éléments de base d’un design system.
Pour rappel, un design system est un référentiel qui regroupe tous les composants d’un projet digital. Ces derniers permettent de concevoir une logique cohérente tout au long de la réalisation et guident l’ensemble des équipes intervenants dans la conception d’une interface.
Les design Tokens peuvent être utilisés pour définir les couleurs, les polices, les tailles, les marges, les espaces et autres éléments de conception. Ce sont des outils puissants qui peuvent aider à améliorer la cohérence et la qualité du design, ainsi que la collaboration entre les designers et les développeurs.
À la place de faire appel à une valeur, on fait appel au token. Cela permet ensuite de n’avoir qu’une seule page avec tous les tokens renseignés et de pouvoir se fier à une unique source.

Exemple pour un token d’une couleur :

À ce niveau, un design token est un peu l’équivalent des styles sur Figma ou Sketch (couleurs, fonts, shadows…) mais avec beaucoup plus de possibilités et bien plus flexible. Un design token est le plus souvent utilisé pour les couleurs, la taille, les marges, l’opacité, les bordures…

Ainsi, plutôt que d’avoir :

Nous aurions:

Le design token nous permet de modifier la valeur à la volée de “{primary}” si nécessaire, sans avoir à retourner sur les différentes lignes.
De plus, en cas de Design System multi-brand, cela permet également de n’avoir qu’une seule et unique page à éditer pour modifier le style.
L’idéal est d’avoir le même nom dans les styles sur notre logiciel de design pour plus de cohérence et plus de simplicité lors du handoff entre les designers et les développeurs.
L’utilisation des design tokens en tant que partie intégrante d’un design system sont pourtant bien plus que ça. Ils permettent également une scalabilité accrue, une meilleure communication entre les équipes et donc de meilleures prises de décisions.

Les deux types de Design Tokens

• Primitives tokens
  Les primitives tokens sont les valeurs de base du design system. Ils comprennent les couleurs, les polices, les tailles de police, les marges, les espaces et autres éléments de conception. Les primitives tokens sont généralement stockés dans un format de données standardisé, tel que JSON, CSS ou YAML. Cela permet aux designers et aux développeurs de les partager et de les utiliser facilement.
• Semantics tokens
  Les semantics tokens sont des combinaisons de primitives tokens qui ont une signification spécifique dans le design system. Par exemple, un semantics token peut être une couleur spécifique utilisée pour un bouton de commande, ou une police spécifique utilisée pour un titre de page. Les semantics tokens permettent de créer un design cohérent et homogène, et de simplifier la collaboration entre les designers et les développeurs.

Les primitives et les semantics sont deux éléments essentiels d’un design system. Ils permettent de définir les éléments de base du design, et de les organiser de manière à ce qu’ils soient faciles à trouver et à utiliser. En utilisant des tokens, les designers et les développeurs peuvent créer des interfaces cohérentes et de haute qualité, plus rapidement et facilement.

Les bénéfices des Design Tokens

• Cohérence
  Les design tokens répondent entre autres à une problématique business : comment garantir l’identité graphique de la marque avec un minimum de frictions ?
  En cas de changement dans les fondations (un rebranding par exemple), les design tokens permettent de déployer rapidement ces modifications.
  Les styles sont unifiés à travers l’ensemble des produits et des plateformes.
• Réutilisabilité
  Les design tokens peuvent être réutilisés sur l’ensemble d’un ou plusieurs produits ce qui permet d’économiser du temps et des ressources en développement. Les développeurs récupèrent directement les tokens plutôt que de devoir créer de nouveaux styles à chaque fois.
  Les design tokens évitent d’écrire en dur les valeurs dans le code.
• Maintenabilité
  Les design tokens facilitent la maintenance des projets car ils permettent une mise à jour rapide des styles. Comment ? Les tokens sont des données qui contiennent un nom et une valeur qui sont centralisés.
  En modifiant simplement la valeur d’un token, tel que celui de la couleur d’un bouton principal, cela impactera tous les boutons de l’application/site en une seule intervention ! Les développeurs peuvent ainsi maintenir plus facilement les styles du projet même lorsque les choix design évoluent.

Les limites des Design Tokens

• Les outils ne sont pas prêt
  Le format des design tokens n’étant pas gravé dans le marbre, personne ne s’est encore accordé sur comment les utiliser. Chaque équipe et entreprise a son propre fonctionnement et son propre langage. Actuellement, le W3C travaille actuellement sur un format qui justement viendrait régler ce problème. Mais pour le moment il convient de faire avec les outils à disposition et leurs limitations. Figma a indiqué travailler sur ce sujet, mais cette feature ne sortira probablement pas avant la fin de l’année.
• Un ralentissement du workflow
  Trouver une nomenclature comprise par tout le monde est une véritable quête du Saint Graal. En plus de cela, comme tout système, elle sera amenée à évoluer en fonction d’un bon nombre de paramètres. À cela s’ajoute la complexité de la documentation et le temps nécessaire à l’écrire. Les équipes spécialisées en Design System sont encore trop peu répandues, et c’est d’autant plus vrai pour les personnes dédiées à l’écriture de la documentation.
  La moindre modification d’une de ces primitives peut engendrer de nombreuses mises à jour qu’il faut prendre en compte.
  Avoir une vue d’ensemble du système est primordiale pour implémenter les design tokens.
  L’implémentation est complexe et demande un effort de base significatif, mais je suis persuadé qu’une telle approche est largement compensée par les avantages exponentiels qu’elle peut apporter.

Conclusion

Les Design Tokens sont des entités avec un nom et une nomenclature bien précis qui stockent des données indivisibles (comme un espacement ou une couleur par exemple). Ils sont toutes les valeurs nécessaires à la construction et la maintenance de système. On utilise ces valeurs plutôt que de les “coder en dur” dans le code afin d’assurer un maximum de flexibilité, homogénéité et de scalabilité à travers les différents produits et l’expérience… Ils sont également agnostiques et doivent fonctionner sur n’importe quelle plateforme.
Mais ils représentent avant tout une méthodologie et non pas seulement des “variables”. Ils permettent de faire grandir n’importe quel Design System à travers toutes les plateformes, appareils et produits qu’une marque peut avoir. La partie variable n’est qu’une goutte dans l’océan.

Take away

• Les design tokens ne stockent pas uniquement une information, mais transmettent également des informations.
• Ils servent à indiquer les valeurs primitives, mais leur véritable potentiel se révèle quand ils sont utilisés dans la documentation des composants UI.
• Ils s’apparentent à une méthodologie et une manière de construire un système complexe.

Ressources pour aller plus loin

• Tokens in Design Systems : 10 Tips to Architect & Implement Design Decisions for Everyone : À lire ici 
• Design Tokens beyond colors, typography, and spacing : À lire ici

 

 

 

Alexandre Caillé, UI & Design System Lead chez UX-Republic