Comprendre le Design Token est relativement simple. Le jeton de conception, en français, est utilisé pour marquer et définir un élément atomique du Design afin qu’il soit réutilisable. Ce sont donc des données associées à un objet de design. De sa composition va dépendre l’ensemble d’une chaîne de décision à travers ses variables. Il faut donc bien saisir l’ensemble du concept.
Qu’est-ce qu’un Design Token ?
Mis au point initialement pour la cohérence d’une conception et faciliter les échanges entre designers et développeurs. Les Design Tokens sont aujourd’hui partie intégrante de tout système de conception (Design System) et sont les seuls garants sérieux de l’utilisation d’une marque dans l’espace numérique web ou applications.
Définition du Design Token
Voici les trois niveaux de définition :
Un Design Token est une valeur numérique qui exprime les données d’un atome de conception, c’est-à-dire d’un élément de Design réduit à son niveau atomique (lire à ce sujet : Atomic design, une nouvelle métaphore ?).
Le Design Token sert de référence unique pour tous les aspects visuels d’une interface utilisateur. C’est donc la source unique de vérité d’un Design System.
Le Design Token revient à utiliser une méthode de prise de décision dans un contexte précis et matérialisée par des variables (selon Jina Anne – spécialiste des Design Systems).
Évolution du Design Token dans le Design System
Il est important de comprendre l’évolution de ce matériau de conception pour comprendre sa place actuelle et future dans les systèmes de conception.
L’explosion d’internet au tout début des années 2000 a amené les concepteurs de sites à construire des ensembles cohérents pour représenter les marques à travers leurs diverses formes numériques. A l’époque, l’idée du Design System n’est pas encore là, mais le besoin s’en fait déjà sentir.
Dans les années 2010, des entreprises novatrices commencent à réutiliser des éléments au sein de leur système de conception que Brad Frost théorise sous la forme de l’Atomic Design. L’obligation de nommer ces entités fait apparaître les Design Tokens.
Au début des années 2020, nous assistons à la généralisation de leur utilisation à travers des acteurs majeurs d’Internet. Ces derniers ouvrent publiquement leur Design System, expliquent leurs guidelines et donnent accès à leurs bibliothèques de jetons de conception.
L’intervention de plus en plus importante de l’IA dans les systèmes de conception laisse entrevoir l’avenir des Design Tokens comme l’élément de base utilisable par les machines pour composer des produits définis par les Designers. La formation numérique d’un Token n’a pas de limites dans les précisions qu’on souhaite lui apporter. C’est donc un matériau de construction idéal pour une IA.
Design Tokens au sein d’un Design System
En tant qu’élément subatomique des atomes du Design, les jetons de conception sont les éléments de base du Design System. C’est à partir d’eux que se forme la lisibilité et la cohérence de la marque d’une entreprise sur ses produits et l’ensemble de ses expressions digitales : sites, blogs, plateformes e-commerces, écrans, vitrines, TV, réseaux sociaux, et ce pour tout support.
De l’atome du design à la page du site – source Brad Frost
Au sein du système de conception, le Design Token est le principal outil de l’expression d’une marque.
Dans quels cas utiliser les Design Tokens ?
Pour simplifier la réponse à cette question, nous pouvons commencer par : « dans quels cas les Tokens sont inutiles ? » Il n’y a que deux cas : Pour les interfaces codées en dur et pour les produits qui ne possèdent pas Design System.
Pour toutes les autres hypothèses, les jetons sont indissociables d’un travail cohérent et collaboratif, garant d’une bonne UX et de la marque.
Pourquoi ?
L’abstraction est productive. Par la séparation des valeurs visuelles de leur implémentation, les jetons donnent de la flexibilité et une meilleure maintenabilité du système.
La réutilisabilité comme gain de production. Les jetons de conception sont réutilisables à l’infini, ce qui réduit considérablement le temps de développement et la propension aux erreurs.
La base de l’adaptabilité du système de conception. Les Tokens peuvent être facilement mis à jour et modifiés pour répondre aux évolutions des besoins et des tendances.
Outils et matériaux collaboratifs. Les Tokens facilitent la communication entre les designers, les développeurs et d’autres parties prenantes, en offrant un langage commun pour discuter des aspects visuels du produit.
Les jetons de conception comme méthodologie
La rationalisation de l’ensemble des composants amène à des décisions éclairées et documentées en fonction de chaque contexte et cas d’usage. Et ceci de façon collaborative entre les équipes, puisque les Tokens proposent un langage commun.
L’expérience utilisateur se voit améliorée par l’architecture de décision des Tokens puisque chaque jeton peut être relié à d’autres (par exemple : bouton, forme, couleur, typo, animation). Cette structure décisionnelle apporte de la cohérence entre les différentes interfaces et produits d’une même marque.
Les cas où les Design Tokens font la différence
Dans le cas de la création d’un nouveau produit, de la refonte ou de la mise à jour d’un produit, il est indispensable de créer des jetons de design.
Lorsqu’un Design System s’applique à plusieurs plateformes et produits numériques, le recours aux Tokens est indispensable.
Pour les styles (et leur mise à jour) et le theming, mode sombre, clair, déclinaisons de marques, les Design Token permettent de traduire la totalité des composants en un seul clic.
Un rebranding sans jetons de conception nécessite de tout reprendre.
Comment utiliser les Design Tokens ?
Les Tokens doivent être créés au cours d’ateliers regroupant les parties prenantes du système de conception. Ils sont un matériau à partager et leur création se fait au fil de l’eau suivant les évolutions des produits et de la marque.
Écrire un Design Token
En tant que capsule d’informations associée à un objet, le jeton doit être composé d’une suite claire de propriétés telles que le nom du jeton, sa valeur, son type, une description et sa contextualisation (s’il y a lieu).
La valeur peut être en dur ou en alias, pointant vers une autre variable. Le type sert à l’usage. La description élargit le champ du type en laissant la possibilité aux designers de développer d’autres métadonnées. Le contexte indique dans quel cadre ce token est utilisé, plateforme, mobile, thème…
Ce qui donne :
Exemple d’un Design Token du material design de Google
Chaque designer a la possibilité d’entrer autant de métadonnées qu’il souhaite pour préciser des informations de description ou de contexte. Il est également envisageable d’y inscrire la “source de vérité” si différentes parties prenantes produisent des Tokens. Des outils comme Tokens Studio ou Supernova le permettent. Les formats de métadonnées sont libres. Attention toutefois à la surcharge.
Les types de Design Tokens
Les types de jetons de conception dépendent de la classification qui, elle-même, est un choix qui varie suivant les Design System. Deux principales catégories sont présentes partout :
- les Tokens simples (également nommés primitifs) ;
- les Tokens composites.
Les Tokens simples
Les Design Tokens simples représentent des valeurs de base des éléments suivant :
- Les couleurs généralement au format hexadécimal en RGB ou RGBA dans l’espace colorimétrique sRGB.
- La famille typographique.
- La graisse typographique donne l’épaisseur d’une typo en valeurs numériques de 100 à 900.
- Une dimension en « px » ou « rem » pour décrire une position, largeur, hauteur, rayon ou arrondi ou encore une épaisseur. La dimension peut être utilisée pour la taille des éléments de l’interface, la taille de la typo.
- La durée en millisecondes pour les durées d’animation ou de transition.
- La courbe de Bézier. Cette courbe décrit les variations de vitesse d’une animation, accélération et décélération et autres variations.
Les valeurs des jetons peuvent être nommées en JavaScript Object Notation (JSON) sous forme de :
- Nombres entiers, à virgule, positive, négative, en fraction et utilisés avec un multiplicateur (hauteur de ligne en rapport à la taille de la font ou pour des positions, L X l, etc.
- Chaîne de caractères qui servent à définir par exemple le style de trait ou la façon de terminer une ligne ;
Valeur booléenne, nommée par 0 ou 1 ou par vrai ou faux.
Design Tokens de couleurs — source Saleforces
Design Tokens de fonts— source Saleforces
Design Tokens d’espacements — source Saleforces
Les Tokens composites
Ces jetons de conception sont des agrégations de Tokens simples qui servent à définir des éléments plus complexes ou un ensemble d’éléments cohérents. Ce ne sont pas des groupes de Tokens qui eux, sont des ensembles de décision sans être nécessairement des objets liés.
Exemples de Tokens composites :
- Des bordures définissant les informations de couleur, épaisseur, taille, style de trait, angles, traits associés, ombres…
- Des transitions comprenant la durée, le délai avant déclenchement, la courbe de Bézier pour le comportement de vitesse.
- Des ombres incluant les données de couleur, d’opacité, de décalage avec l’axe de décalage (horizontal ou vertical), les effets de blur, d’étendue et de dégradé.
Design Tokens d’ombre — source Saleforces
La complexité des Tokens composites peut aller jusqu’à la définition de fiches de style détaillées pour des composants comme les formulaires, les boutons.
Token composite ou Token Module du material design de Google
Quelques autres types de Tokens
Voici quelques noms et classifications intéressants qui sont importants pour hiérarchiser les Tokens en fonction des décisions à prendre.
Tokens globaux et Tokens locaux
Les Tokens globaux s’appliquent à l’ensemble du Design System. Les Tokens locaux sont spécifiques à une partie ou à un composant.
Tokens de style
Les Tokens de style définissent l’apparence visuelle [couleurs, typographie, etc.].
Tokens de comportement
Ils définissent les comportements interactifs [animations, transitions, etc.].
Tokens de thème
Ils permettent de créer différents thèmes [clair, foncé, etc.] en modifiant un ensemble de Tokens spécifiques.
Tokens sémantiques
Ils donnent un sens aux Tokens primitifs en les associant à des concepts plus larges par exemple, « couleur-primaire », « espacement-large ». Ils permettent de créer des règles et des relations entre les différents éléments de l’interface.
Ordonner les options et les décisions à l’aide des alias
Le principe du Token est de stocker une valeur dans une variable ou de pouvoir pointer une variable sur une autre variable par les alias. Les alias donnent la possibilité d’abstraire des décisions en fonction des contextes d’utilisation en redirigeant ces décisions dans des contextes précis.
Construire un alias pour abstraire une décision
Par exemple, vous concevez une application de blog. Vous souhaitez définir une couleur principale pour les liens, mais vous voulez aussi pouvoir la modifier facilement si vous décidez de changer le thème du blog.
- Vous créez un Token nommé $ color-primary pour la couleur principale et vous lui attribuez une valeur initiale, par exemple : $color-primary: #007bff ;.
- Pour le thème sombre, vous créez un alias $ theme et lui attribuez la valeur light par défaut.
- Vous créez un autre Token pour la couleur primaire en mode sombre : $color-primary-dark: #ffffff;. C’est l’alias de la couleur pour le thème sombre.
- Vous utilisez une condition CSS [media query ou classe] pour changer la valeur de $ color-primary en fonction de la valeur de $ theme.
Donc :
$ color-primary est le Design Token qui stocke la valeur de la couleur principale.
$ theme est un alias qui permet de choisir entre différents thèmes et d’affecter différentes valeurs au token $ color-primary.
L’alias $ theme vous permet d’abstraire la décision de choisir entre le thème clair et le thème sombre. L’alias $ color-primary est utilisé partout où vous avez besoin de la couleur principale, ce qui garantit une cohérence visuelle.
Deux approches complémentaires pour la création d’alias
Approche par option et décision
Dans cette approche, les Tokens contenant des valeurs sont considérés comme des options et les alias sont considérés comme des prises de décision.
Prenons comme exemple la couleur principale du texte d’un blog.
Les options [Design Tokens] :
- Vous créez un token pour représenter la couleur principale du texte : nommé $color-text-primary.
- Vous créez d’autres Tokens pour différentes nuances ou couleurs : $ color-text-secondary, $ color-text-accent, etc.
Chaque token représente donc une option de couleur parmi lesquelles vous pouvez choisir.
Les décisions [alias] :
Vous créez un alias $ theme qui peut prendre différentes valeurs comme light ou dark. Vous utilisez cet alias pour prendre des décisions en fonction du contexte :
- Si $ theme est égal à light, vous définissez $ color-text-primary comme étant du noir.
- Si $ theme est égal à dark, vous définissez $ color-text-primary comme étant du blanc.
En résumé,
Les Tokens $ color-text-primary, $ color-text-secondary, et $ color-text-accent représentent des options de couleurs.
L’alias $ theme est une décision qui détermine quelle couleur utiliser pour le texte principal en fonction du contexte “mode clair ou sombre”.
En changeant la valeur de $ theme, vous modifiez la valeur de $ color-text-primary et donc l’apparence globale de votre application.
L’approche par la pyramide d’abstraction
C’est une organisation structurée en trois niveaux (proposée par Oscar Gonzalez et développée par Lukas Oppermann).
Au 1er Niveau, on trouve les Tokens simples, ou encore Tokens globaux, ce sont les Tokens de base, de la marque, Tokens d’option. Ils regroupent tous les jetons contenant des valeurs simples.
Au 2d Niveau, ce sont les Tokens sémantiques, ou jetons de décision, ce sont les premiers alias liés aux options des Tokens de base. Ils décrivent la fonction qui permet de prendre en compte un contexte d’utilisation.
Au 3e Niveau, il y a les Tokens composants ou Tokens cadrés qui représentent la décision finale. Cette décision s’applique le plus souvent à des contextes technologiques comme une appli IOS ou Android ou encore un site Web.
L’utilisation de ces deux approches offre une bonne granularité des variables en fonction des besoins de chaque produit.
Ce qu’il faut retenir
Les Design Tokens sont devenus aujourd’hui les particules élémentaires des atomes du Design System. Ils permettent de définir de manière précise et réutilisable les éléments visuels d’un produit (couleurs, typographies, espacements, etc.). En proposant un langage commun aux designers et développeurs, les Tokens facilitent la collaboration par la communication tout en assurant la cohérence visuelle à travers tous les supports numériques d’une marque.
Grâce à leur nature abstraite et à leur capacité à être combinés de manière flexible, les jetons de conception permettent de créer des interfaces facilement adaptables, tout en réduisant le temps de développement et les erreurs. Les Design Tokens sont indispensables pour construire des produits numériques cohérents et évolutifs.
Bibliographie
The Design Tokens Book: De la théorie à la pratique, le chaînon manquant entre design et développement – de Ismail Hamila et Adrien Gibrat
Destiné autant aux Design System Leads qu’aux Product Designers, Développeurs Front-end, et Managers, cet ouvrage met en lumière comment les Design Tokens servent de vecteur pour l’intégration d’une vision et démarche Design Ops dans les entreprises. En s’appuyant sur des cas pratiques, des ateliers, et des exercices, ainsi que les témoignages de professionnels reconnus comme Brad Frost, Ben Callahan, James Nash ou Louis Chénais, nous partageons des stratégies concrètes pour vous permettre d’expérimenter et de déployer les design Tokens efficacement.
Lire aussi :
- Qu’est-ce qu’un Design System ? Définition Design System UX
- 5 principes et 5 règles pour un excellent Design System
- https://www.usabilis.com/design-system-et-cycles-de-vie-du-produit-comment-optimiser
- Figma, un outil d’excellence pour vos Design Systems
- Atomic design, une nouvelle métaphore
Image à la UNE : Design Tokens Branding — Tim Van Damme — Dribbble