Que vous soyez freelance, en agence/ESM ou en entreprise éditeur, de nombreux designers, développeurs ou product managers… vous avez sans doute déjà été confronté au problème de mise à jour d’éléments graphiques qui concernent une multitude de d’applications. Par exemple, suite à une mise à jour de la charte graphique du client, plusieurs sites et applications mobile doivent hériter d’une nouvelle variante de couleur appliquée à de multiples éléments d’interface (boutons, liens, borders, …).
Auparavant, la mise à jour se faisait “manuellement”, via une communication maladroite du type :
Hello Raph,
La couleur principale de l’identité du client XXX a été mise à jour.
L’ancienne couleur était rgb(237, 200, 078).
La nouvelle couleur est rgb(187, 45, 23).
Le client voudrait la mise à jour d’ici demain…
Peux-tu transmettre au développeur en charge stp ?
À ta dispo si besoin.
Julien
Suite à ce message, vous recevez la réponse suivante :
Hello Julien,
Merci pour l’info, j’ai transmis au développeur concerné.
Par contre, il voudrait la couleur hexadécimale… Tu peux me transmettre ça stp ?
Et il me dit que la couleur est utilisée un peu partout sur les sites, avec des nuances différentes ici et là.
Tu peux mettre à jour toutes les maquettes plutôt ?
Merci !
Raph
Bref, une discussion interminable et un process de mise à jour de plusieurs semaines (voir mois, en fonction de la taille de l'écosystème concerné).
Vous l’aurez compris, les design tokens permettent de moderniser et de simplifier ce process, du client au designer et du designer aux développeurs.
Un “design token” est un “jeton de conception” (en français), à savoir une référence unique et réutilisable dans un design system. Il représente une décision de conception, représentée sous forme de donnée. Les design tokens sont les atoms dans l’approche atomic design. Elles remplacent la plupart des valeurs écrites “en dur” (comme des valeurs hexadécimales pour les couleurs ou des pixels pour les espacements). Le but est de maîtriser la mise à jour et la mise à l’échelle d’un design system pour une identité produit unifiée et cohérente.
Il peut être utilisé pour référencer plusieurs types d’éléments :
Cette référence se compose :
Il existe trois types de design token :
Un design token peut aussi être une référence d’alias qui fait référence au token global, c’est à dire qu’une fois le token global défini (ex : brand-color), d’autres tokens peuvent être créés pour répondre à une récurrence d’utilisation (ex : ds-app-cta-primary-background). Ce token fera ainsi référence au premier, ce qui permet d’anticiper toute évolution possible dans le temps et d’augmenter la maintenabilité globale de votre design system. Evidemment, ce principe est extensible à l’infini, toujours dans la perspective de faciliter la mise à jour et la maintenabilité des vos projets et design systems.
Les design tokens servent à la fois aux designers, aux développeurs et aux product managers.
Les jetons sont plus utiles et efficaces dans ces situations :
Les jetons peuvent être moins utiles si :
La mise en place des design tokens pouvant être chronophage, il est essentiel de mesurer l’impact du temps nécessaire et de leur utilité avant de se lancer dans leur conception. Malgré tout, leur intérêt peut concerner tout type de projet, même petit, dans la mesure où ils peuvent accélerer la mise à jour des maquettes tout au long de la phase de conception.
Exemples de projets pour lequel les design tokens sont particulièrement utiles :
Bonne question Fred ! Pour commencer, la plupart des outils de design disposent d’un système de variables proche du concept des design tokens (couleurs, typographies, composants…). C’est une première étape pour constituer un socle de design system cohérent. Ces variables peuvent être exportées facilement depuis les outils de design et utilisées ensuite dans l’environnement de développement.
Mais désormais, certains outils comme Figma intègrent des solutions qui permettent d’automatiser l’export des design tokens (API Figma, plugins dédiés, …). Nous ferons un focus spécifique à ce sujet dans un prochain article !