Les design tokens, pour les nuls

Que vous soyez freelance (designer, développeur ou product manager), en agence/ESN ou chez un éditeur, vous avez sans doute déjà été confronté au problème de mise à jour d’éléments graphiques qui concernent une multitude d’applications. Par exemple, suite à une mise à jour de la charte graphique du client, plusieurs sites et applications mobiles 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.

‍

Mais Jamy, comment ça marche ?

‍

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 :

• une valeur de couleur : exprimée en code (hexadécimal, rgb, rgba, …), avec un nom équivoque qui anticipe au maximum

• une valeur numérique : exprimée sans unité (ex : line-height 1.2), en pixel (ex : 8px) ou en multiple d’une valeur de base (ex : font-size-xs*2). Elle peut concerner tout type de référence de taille (taille de typographie, hauteur de ligne, espacement, arrondis de bloc, épaisseur de contour, taille de bloc, opacité…)

• une valeur de typographie : il faut prendre en compte ici une référence de typographie combinée entre la famille définie (ex : Roboto) et la graisse (ex : 800)

• une valeur d’animation : un réglage de transition utilisé sur plusieurs effets ou animations

• Une animation complète, avec les propriétés et les réglages de transition

‍

Cette référence se compose :

• d’un nom de code, tel que md.ref.palette.scondary90 (cf material design)
• d’une valeur associée, comme un code couleur #E8DEF8

‍

Il existe trois types de design token :

• Token global : valeur primitive de votre design system, référencée par un nom décorrélé de son contexte d’utilisation (ex : brand-color-100)
• Token alias : référence à l’usage spécifique du token global (ex : cta-background-color)
• Token relatif : référence à une variante d’utilisation, en fonction du contexte et de l’imbrication de l’élément concerné (ex : card-cta-background-color)

‍

‍

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.

‍

Qui est concerné par les design tokens ?

‍

Les designers :

• Vous souhaitez maîtriser l’implémentation de vos designs auprès des développeurs
• Vous voulez gérer une décision de conception de sa définition à son déploiement
• Vous voulez gagner du temps lors de la mise à jour de vos maquettes UI, tout au long de la phase de conception
• Vous voulez que l’ensemble des interfaces d’un service ou une application soit cohérence et que l’ensemble de ses composants aient la même apparence

‍

Les développeurs :

• Vous souhaitez arrêter la mise à jour manuelle des valeurs d’un design system
• Vous cherchez à construire une feuille de style moderne et compilable (less, sass…)
• Vous voulez mettre en place des produits multi-marques et/ou des thèmes sombres/clairs cohérents

‍

Pour les managers produit :

• Vous souhaitez réduire les tickets qui concernent les bugs de style
• Vous souhaitez améliorer la communication entre les designers et les développeurs
• Vous avez besoin d’anticiper la mise à l’échelle de vos produits ou de vos équipes

‍

Les design tokens servent à la fois aux designers, aux développeurs et aux product managers. 

‍

‍

Dans quelles situations utiliser des design tokens ?

‍

Les jetons sont plus utiles et efficaces dans ces situations :

• Vous envisagez de mettre à jour la conception de votre produit ou de créer un nouveau produit
• Votre système de conception est appliqué à plusieurs produits ou plateformes
• Vous souhaitez maintenir ou mettre à jour facilement les styles à l'avenir
• Vous souhaitez maîtriser les déclinaisons de thèmes qui partagent des références communes (multi-thème, ecosystème, variantes de thèmes…)

‍

Les jetons peuvent être moins utiles si :

• Votre application existante utilise des valeurs codées en dur qui ne changeront pas au cours des 1 à 2 prochaines années
• Votre produit n'a pas de design system

‍

Pour quels projets utiliser les designs tokens ?

‍

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 lesquels les design tokens sont particulièrement utiles :

• Un brand book digital
• Un site web multipage
• Une application web
• Une application mobile (iOS / Android)
• Un écosystème global (site + applications web + applications mobiles…)

‍

‍

Merci Jamy, mais comment fait-on maintenant ?

‍

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 !