Design tokens : 5 arguments pour les implémenter

Designer dans une startup ou dans une agence, vous avez sûrement déjà vécu l’évolution de l’identité graphique d’un produit. Si tel est le cas, vous avez déjà été confronté au problème de mise à jour des styles d’un site web et/ou d’une application 🔥 et même plus la mise à jour des styles sur plusieurs plateformes (site web, et application iOS et/ou Android) 😱
Une refonte graphique amène plusieurs questions :
👉 Côté design : comment assurer la cohérence de l’image de marque à travers l’application et/ou plusieurs plateformes ?
👉 Côté dev : comment mettre à jour rapidement et facilement l’ensemble des valeurs dans les fichiers CSS ?
C’est là que les design token entrent en jeu ! Nous allons passer en revue 5 arguments qui vous permettront d’appuyer la problématique de la cohérence des styles 🚀

Qu’est-ce qu’un design token ?

Un design token ou un “jeton de conception” en français peut être défini comme une donnée de référence utilisée pour définir des éléments graphiques tels que les couleurs, les différents niveaux de texte, les ombres, les bordures, les espacements etc.
Si vous êtes familier de l’approche atomic design théorisée par Brad Frost, les design token traduisent les atomes ​​⚛️. Ce sont les plus petites entités du design d’une interface. Ces valeurs sont à la base de l’ensemble des composants d’une interface.

Qu’est-ce qu’un design token sur le plan technique ?

Un design token est constitué d’un nom et d’une valeur. Les tokens sont stockés dans un fichier .json ou .yml. Ce type de fichier est un format standard pour représenter des données de manière structurée. Ils sont beaucoup utiliser en développement pour favoriser l’échange de données entre différentes entités : site web, serveur, applications etc.

Quels sont les bénéfices des design tokens ?

Bien plus que des variables, les design token sont une architecture qui permet de développer rapidement un design de qualité à grande échelle 🚀

Argument #1 – Interopérabilité

💥 Point de friction : je constate des incohérences de styles entre le site web et l’application mobile, on me dit que techniquement ça prendra du temps de mettre à jour les styles

✅ Les design token favorisent l’interopérabilité des styles. Grâce à leur format standard (.json), ils peuvent être interprétés et utilisés par différentes plateformes sans problème de compatibilité 🙌 Les décisions design peuvent ainsi circuler plus librement et surtout plus rapidement grâce à la centralisation des valeurs ! Lorsque vous mettrez à jour une couleur, vos collègues devs ne seront plus en sueur puisqu’ils pourront déployer rapidement et sans effort cette modification 🚀

Argument #2 – Cohérence visuelle

💥 Point de friction : je constate beaucoup d’incohérences de couleurs à travers l’application

✅ Les design token répondent à cette problématique business : comment garantir l’identité graphique de ma marque facilement et rapidement ? Lors d’une refonte graphique, les design token permettent de déployer rapidement ces changements visuels. Les styles sont unifiés à travers l’ensemble de l’application et à travers toutes les plateformes puisque les tokens sont appelés et utilisés par les différentes plateformes.

Argument #3 – Réutilisation

💥 Point de friction : on ne peut pas changer les couleurs car les valeurs sont codées en dur sans variables, ça risque de prendre beaucoup de temps

✅ Les design tokens peuvent être réutilisés sur l’ensemble d’une application ou à travers plusieurs applications ce qui permet d’économiser du temps et des ressources en développement. Les dev piochent directement dans les fichiers .json qui contiennent 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.

Argument #4 – Maintenabilité

💥 Points de friction :
– j’ai mis à jour mes styles dans Figma mais leur implémentation est repoussée car techniquement ça demande du temps aux devs d’appliquer tous les changements dans l’application
– je constate des incohérences de styles entre les différentes plateformes mais les fix ne sont pas prioritaires, ça traîne dans le temps

✅ 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 dans un fichier .json.

En modifiant simplement la valeur d’un token, celui de la couleur d’un bouton principal vous impacterait tous les boutons de l’application en une seule intervention ! Les développeurs peuvent maintenir plus facilement les styles du projet même lorsque les choix design évoluent. Vous pouvez même dans certains cas vous-même mettre à jour ce fichier à condition de maîtriser la syntaxe .json ou .yaml.

Argument #5 – Collaboration

💥 Point de friction : il est difficile d’échanger efficacement sur les styles car je n’ai pas de langage commun avec les devs concernant les couleurs, les niveaux typographiques etc.

✅ Les design tokens favorisent la collaboration entre les designers et les devs car ils fournissent un ensemble commun de valeurs dans Figma et les fichiers CSS. Mettre en place ces tokens contribue à faciliter le hand off design / dev en limitant la déperdition d’informations, plus une information est centralisée moins il y a de chances que des erreurs se glissent dans le code. Les design tokens permettent ainsi aux designers de mieux maîtriser l’implémentation des styles sur le plan technique. Vous l’aurez compris, ils sont un point de convergence important entre le design et le développement front 🙌

Conclusion

Être UI designer, ce n’est pas seulement définir des styles dans Figma, c’est aussi veiller et contribuer à leur implémentation pour garantir la qualité des interfaces 💎 L’adoption des design tokens par une équipe est bien plus qu’un simple enjeu graphique. Leur mise en place impacte positivement plusieurs parties prenantes et facilitent leur collaboration : 

• le design : en garantissant la cohérence à grande échelle
• le développement : en facilitant l’implémentation et la mise à jour des styles
• et aussi le marketing, le branding : en assurant la cohérence de l’image de marque

Maintenant vous aurez 5 arguments solides pour sensibiliser à la question des styles dans votre entreprise 💪