Design Tokens : Optimiser le hand-off pour le front

L'introduction au Design Token

Lorsqu'il s'agit de créer des interfaces utilisateur (UI) fluides et cohérentes, le hand-off entre les designers et les développeurs Front-End est crucial.

Cependant, cette transition peut parfois être compliquée, avec des pertes de temps et de précision conséquentes. C'est là que les Design Tokens entrent sur le terrain.

Ces "fragments de code", définis par plusieurs niveaux, simplifient la communication mais aussi la collaboration entre les équipes de design et de développement.

Dans cet article, nous explorerons en détail les Design Tokens, leurs différents niveaux, leurs avantages, ainsi que leur mise en œuvre efficace à travers des outils tels que Figma.

‍

Qu'est-ce que les Design Token ? 🧩

Les Design Tokens sont des éléments de design abstraits qui représentent des propriétés visuelles telles que les couleurs, les typographies, les espacements, et bien plus encore.

Ils sont créés pour garantir une cohérence visuelle et hiérarchique sur toutes les plateformes et à travers toutes les applications.

C'est-à-dire qu'en décomposant les styles en éléments réutilisables, les Design Tokens permettent aux équipes de concevoir des interfaces utilisateur bien plus rapidement et plus efficacement, tout en facilitant la maintenance et les mises à jour ultérieures.

‍

Niveaux de Tokens

Les Design Tokens se déclinent en trois niveaux principaux : Primitifs, Sémantiques et de Composants. À savoir que la taxonomie (naming) des tokens est relative à chaque équipe et projet, il n'y a donc pas de nomenclature de référence.

À partir du moment où les équipes se comprennent et arrivent à collaborer de manière efficace, c'est que la méthodologie Design Token est respectée.

‍

1. Primitive

Les Tokens Primitifs sont les éléments de base, la base de données de nos variables.

Dans ce premier niveau, on y retrouve les couleurs, les typographies et les espacements, qui sont utilisés pour construire des composants et des styles plus complexes.

Ils sont souvent définis à un niveau global et représentent les valeurs brutes qui sont utilisées dans tout le système de conception.

Par exemple, on va nommer nos couleurs secondary-050 à secondary-900 dans ce niveau.

‍

‍

2. Semantic

Les Tokens Sémantiques ajoutent plus de contexte que le niveau primitif en associant des significations spécifiques à chacun des styles.

Par exemple, à ce niveau-là, on va définir les tokens de background, icon, text, link, border etc… On remarque alors qu'on assigne plus de contexte à chaque type d'élément.

Pour avoir ensuite background-secondary au lieu de secondary-500 si on utilisait le niveau primitif.

‍

‍

3. Component

Le niveau de token component est spécifique à chaque élément d'interface utilisateur, tels que les boutons, les tabs ou les navbars, etc.

Ils encapsulent tous les styles visuels et fonctionnels associés à chaque composant, ce qui facilite la réutilisation et la personnalisation des éléments.

‍

‍

Résumé des niveaux

Ces 3 niveaux sont essentiels au Design Token mais ne sont pas indispensables.

Il est possible de créer un multi-mode (un dark & light mode, par exemple) en utilisant seulement le niveau Primitive et Semantic. Et ça fonctionne très bien !

Les Tokens sont comme des Lego, modulaires et interconnectés. Ils facilitent la thématisation de nos interfaces.

‍

Qu'est-ce qu'un Design System ?

Un Design System est un ensemble cohérent de règles, de composants et de normes de conception qui garantit une expérience utilisateur (UX) uniforme à travers toutes les interactions avec un produit ou une marque.

‍

‍

1. Homogénéité visuelle

Cette méthodologie garantit une apparence et une convivialité cohérentes sur toutes les plateformes et appareils, renforçant ainsi l'expérience utilisateur des plateformes de la marque mais aussi la satisfaction des utilisateurs.

‍

2. Efficacité d'intégration

En fournissant des composants et des tokens réutilisables, un Design System accélère drastiquement le processus de développement Front-End, réduisant ainsi les efforts et les coûts.

Grâce à cette méthodologie, il est alors plus facile de budgétiser le coût de développement des nouvelles fonctionnalités par les équipes produit.

‍

3. Facilité de maintenance

Les Design Tokens dans un design system permettent une gestion centralisée des styles, facilitant les mises à jour et la maintenance en continu par les équipes de designers et de développeurs. Suite à cela, il est possible de versionner le Design System pour avoir une meilleure visibilité sur chaque version et évolution de celui-ci.

‍

‍

Les Tokens dans Figma

Figma est l'outil indispensable pour les designers. Il offre des fonctionnalités avancées pour la création et la gestion des Design Tokens (variables).

Grâce à des fonctionnalités telles que les variables de couleurs, de nombres et des plugins dédiés au Design System, le logiciel simplifie tout le processus de création et d'utilisation des Tokens dans les maquettes.

Le dev mode devient alors une suite logique pour les équipes tech qui intègrent ces tokens et ces interfaces utilisateur. Grâce à cette nouvelle fonctionnalité, la delivery to dev est simplifiée et facilitée.

‍

‍

Le plugin Token Studio

Ce Plugin Figma offre une interface assez similaire au Local Variable. Il permet de créer et de gérer des Tokens directement dans Figma.

Il aide les équipes à collaborer de manière transparente sur la définition et l'utilisation des Tokens, simplifiant ainsi le hand-off vers les développeurs Front-End.

Similaire à la fonctionnalité Variable de Figma, le plugin Token Studio offre néanmoins quelques exclusivités telles que les tokens-font mais aussi un nombre illimité de modes (limité à 4 sur Figma pour le moment, hors forfait entreprise).

‍

‍

Les références Design Systems

Plusieurs entreprises de premier plan ont développé des Design Systems exemplaires, démontrant l'impact positif de la mise en œuvre des Design Tokens.

On y retrouve le langage propre à leur équipe technique et leurs différentes méthodologies.

‍

Vitamin by Decathlon

Le Design System conçu par les équipes de Decathlon offre une suite d'outils cohérents et dynamiques reflétant l'optimisation des composants créés.  une référence française !

Vitamin dispose du multi-theming pour faciliter l'intégration des différents modes sur les plateformes liées aux projets Decathlon.

‍

‍

Material Design by Google

Une des meilleures références sur le marché du Design System, Material Design continue d'innover de manière pertinente, offrant une flexibilité et une accessibilité sans précédent !

Personnellement, je l'ai énormément utilisée pour améliorer mes compétences en Design Token.

‍

‍

Atlassian

Le Design system d'Atlassian, conçu pour l'agilité, encourage la collaboration interfonctionnelle et accélère l'intégration. Il fournit des composants et des directives de conception claires pour ses produits tels que Jira et Confluence, offrant ainsi une expérience unifiée à ses utilisateurs.

‍

‍

Spectrum By Adobe

L'empire Adobe règne sur les logiciels de conception depuis maintenant 20 ans, avec comme force l'intuitivité et la cohérence visuelle entre ses différents logiciels. Une grande force pour Adobe qui, grâce à leur Design System, a su capitaliser sur le marché des designers.

‍

‍

Quelle est la suite pour les variables ?

En conclusion, les Design Tokens jouent un rôle essentiel dans le processus de création d'un Design System, en facilitant la collaboration entre les designers et les développeurs Front-End.

Grâce à des outils comme Figma et des exemples inspirants, les équipes peuvent maximiser l'efficacité du hand-off et offrir une expérience améliorée à leurs utilisateurs.

Figma a su capitaliser avec sa fonctionnalité Variable, facilitant ainsi le hand-off et la delivery-to-dev des interfaces utilisateur. Chez The Cacatoès Theory, nous sommes experts dans la conception et le suivi de Design System.