Design Tokens : l’élément clé d’un bon Design System
La notion de design token est un élément assez flou chez la plus part des designers, c’est pourtant un incontournable d’un Design System… et pourtant il y a 9 chances sur 10 pour que vous en ayez déjà vu.
Un design token, qu’est-ce que c’est ?
Dans la vie de tous les jours, c’est comme donner un surnom pour simplifier une appellation.
Prenons l’exemple de Lady Gaga, c’est plus simple à utiliser que Stefani Joanne Angelina Germanotta…
Pour faire simple, un design token, ça revient à donner un alias à un élément.
Mais pas de panique, dans un Design System on n’aura pas besoin de Lady Gaga.
Par contre, on va retrouver les design tokens sur d’autres éléments comme les couleurs, typographies, espacements…
L’exemple avec les couleurs du Design System
Retenir le code hexadécimal des couleurs d’un Design System, ça peux vite devenir compliqué, voir impossible. Pour pallier à ça on va définir des alias à ces couleurs, qui sera bien plus simple à mémoriser.
C’est exactement le même principe que des variables. Le but étant de stocker une donnée design.
Il sera bien plus simple de retenir un nom commun comme “purple-500” que la valeur qui se cache derrière. Il s’agit d’un premier niveau de design token.
Par exemple, pour des composants on retiendra plus facilement que la couleur primaire correspond à purple-500.
Le monde réel n’est pas si simple
Avoir un niveau de design token pour 3 couleurs, c’est simple à utiliser.
Mais dans un Design System, on aura forcément plus de cas et quand on a plusieurs palettes de couleurs et des dizaines de composants ça devient plus compliqué à gérer.
Pour se rappeler la couleur de bordure d’un input, d’un texte disabled ou encore d’un placeholder, ça devient complexe.
Pour rendre ça plus accessible on va encore descendre d’un niveau et définir des design tokens par besoin.
Ce principe fonctionne très bien les couleurs, mais on retrouvera également des tokens pour :
- Les espacements
- Les typographies
- Les styles de caractère
- Les borders-radius
- etc…
Pourquoi mettre en place des design tokens
Maintenant que l’on a vu à quoi servait les designs tokens, autre la simplification de savoir quel token est appliqué à tel élément il y a de nombreux avantages à mettre en place les design tokens dans un design system.
Des design tokens, pas seulement fait pour le design
On parle de design tokens, mais ces règles s’appliquent aussi bien pour le design d’interface que le développement. En effet, les développeurs et les designers doivent disposer des mêmes design tokens. Ainsi, on parle le même langage.
Un système pour les gouverner tous
Si on conçoit une application qui sera déployée sur le web, iOS, Android, TV… les règles de conception ne seront pas forcément les mêmes.
Par exemple, entre iOS et Android, le langage de programmation n’est pas le même, alors rien d’étonnant à se dire que les règles pour définir une simple couleur varient d’un langage à l’autre. Les designs tokens vont permettre de simplifier la mise à jour de ces valeurs, quel que ce soit le système.
Le Wallstreet Journal a mis 2 ans pour mettre à jour sa typographie sur l’ensemble de ses supports avant d’utiliser un design system & des design tokens
L’arrivée des variables et des design tokens permet donc de gagner du temps, et donc de gagner de l’argent sur un projet.
Lorsque l’on va mettre à jour un design tokens, la mise à jour s’effectuera pour tous les systèmes et ainsi la modification sera effectuée en un claquement de doigts.
Prochaine étape
Dans un prochain article, nous verrons quelles sont les bonnes pratiques pour nommer ses designs tokens. N’hésitez pas à réagir si ça vous intéresse ! 👋
