Où ? Agence web, PME et Start-up
Quand ? En génération
Comment ? Avec Figma (où tout autre logiciel de prototypage qui utilise les composants)
Qui ? UX Architect
Pourquoi ? Travaillez en cohésion avec l’équipe des développeurs
Vous vous rappelez quand je vous ai parlé d’Atomic design ? L’approche introduite par Brad Frost en 2013. Si vous avez bien assimilé son fonctionnement, il est temps d’approfondir le sujet. La méthode que je vais vous apprendre est complémentaire à cette dernière c’est pourquoi, je vous conseille de lire notre article sur ce sujet avant de commencer celui-là.
Les ions : Une étape oubliée à ne pas négliger
Comme vous l’avez remarqué, nous avons repris le modèle d’Atomic Design et nous avons introduit une étape préliminaire, à savoir celle de l’ion.
En chimie : Un ion est un atome qui a une charge électrique. Il peut être chargé positivement ou négativement en fonction du nombre d’électrons qu’il a gagné ou perdu.
Dans les interfaces : Les ions composent les atomes de notre interface. On les appelle les tokens. L’objectif des design token est de donner une dénomination aux éléments de conception (couleurs, polices, taille d’espacement…). C’est-à-dire qu’au lieu d’utiliser, des codes “durs” comme des codes hexadécimaux de couleur nous leur donnons des noms.
Qu’est-ce qu’un design token et quels avantages offre-t-il ?
Les Design Tokens, tels que définis par leur créatrice Jina Anne en 2014, sont
“Des surnoms utilisés pour définir la palette de couleurs, les typographies, les espacements et autres aspects visuels d’un design. Ils permettent de maintenir une cohérence visuelle en centralisant ces éléments dans un ensemble de valeurs facilement modifiables. Cela facilite la mise à jour d’une application ou d’un site web.”
Les principaux avantages de cette démarche sont
- Organiser et présenter les décisions de conception
- Une meilleure communication et une réduction des erreurs
- Les tokens ne dépendent pas de connaissance en développement
- Une documentation en constante évolution
- Permettre aux non-développeurs d’interagir avec le code avec un langage plus lisible.
- La possibilité de synchroniser et d’étendre le système dans des outils de prototypage (Figma)
Éclaircissons le contexte d’utilisation des design token.
Premier contexte : l’adaptation
Comme on l’avait vu dans l’article sur l’Atomic design, dans notre quotidien on trouve de plus en plus d’écrans différents. On a également divers contextes comme l’accessibilité, l’écoresponsabilité ou encore les points de contact d’une journée (voir expérience journey) à prendre en compte. Cela signifie que nos interfaces doivent s’ajuster pour éviter que les utilisateurs ne se sentent frustrés.
De temps en temps, la charte graphique que nous avons mise en place est très vite limitée et ne prend pas en compte ces différents critères. C’est pourquoi, on va créer des options. Cependant, cela ne signifie pas nécessairement qu’on va les utiliser dans l’immédiat.
Exemple : Le design system des sites du gouvernement (https://www.systeme-de-design.gouv.fr/)
Regardons ensemble comment faire des design token.
- Des options : ils constituent une bibliothèque de couleurs (ou de choix de conception) autorisée à être employée. Veuillez noter qu’il n’est pas obligatoire d’utiliser une option qui est dans notre design système.
- Des décisions : Ce sont les options que l’on a mises en place dans une interface.
Analyse approfondie des Options des design token
Dans les exemples qui suivent, ces tokens n’ont pas de contexte. On appelle ces options des « Global tokens » ou encore « Core tokens ».
Exemple n°1 : Ici nous avons l’intégralité des couleurs violettes de notre librairie. Chaque valeur de ton comprise entre 0 et 100 exprime la quantité de lumière présente dans la couleur. Le ton 100 est le plus clair de la gamme alors que le ton 900 est le plus sombre de la gamme.
Exemple n°2 : Voici un deuxième exemple pour définir les différentes tailles possibles sur nos interfaces.
Analyse approfondie des Décisions des design token
Exemple n°3: Ici notre couleur “purple-500” est associée aux liens, au fond des boutons principaux et aux bordures de nos cases à cocher.
Cela signifie que
- link.text = purple-500 = #6200EE
- button.background = purple-500= #6200EE
- checkbox.border = purple-500 = #6200EE
Note – Les catégories peuvent comprendre :
Font-Family, Border-Color, Grid, Border Radius, Line-Height,Box-Shadow,Grid, Duration/Transition, Shadows, Elevation, Size, Font-Size, Space, Font-Weight,
Allons encore plus loin avec les « Component-specific tokens »
Derrière ce terme complexe se dissimule une idée simple : un « Component specific token » est essentiellement un « alias token » avec plusieurs niveaux de précision. On peut aller jusqu’à 4 niveaux. Si vous souhaitez obtenir des détails supplémentaires sur la manière de nommer ces tokens, je vous encourage à consulter l’article de Nathan Curtis
Exemple : Component-specific tokens
Conclusion sur les design token
- Pour faire des designs tokens de qualité, il faut donner un nom : Court, Significatif, Facile à comprendre, Modulaire et Cohérent.
- L’objectif reste le même : “Travaillez en cohésion avec l’équipe des développeurs”
- Si vous aviez des doutes quant à l’utilité des design tokens et que vous avez du mal à comprendre comment ils renforcent la collaboration entre les développeurs et les designers, je vous encourage à regarder cette vidéo de démonstration. Elle devrait vous convaincre de l’importance de les intégrer dans la conception de vos prototypes.
La mise à jour de Figma permet de concevoir des design token
