Optimiser la cohérence et l'efficacité dans le design avec les Design Tokens et les variables Figma

En décembre 2023, nous avons dévoilé publiquement notre bibliothèque de composants, accompagnée du fichier Figma correspondant, ainsi que d’un plugin permettant d’exporter efficacement les variables Figma vers des variables CSS, offrant ainsi un gain de temps considérable.

Pourquoi cette démarche ? Parce que nous sommes convaincus que notre solution a le potentiel de faire gagner un temps précieux, et nous souhaitons partager ces avantages avec la communauté.

Tout a commencé il y a 1 an, intéressés par la promesse d’un design system headless (c’est-à-dire compatible avec l’ensembles des écosystèmes WEB, que se soit en HTML, ReactJS, Vue, Svelte ou même Angular) et intrigués par les design tokens, nous avons formé une équipe de choc pour étudier le sujet.

C’est lors d’un webinar Figma, intitulé “In the file – Building a headless design system » et animé par Esther Cheran (créatrice du Plugin Tokens Studio), que l’étincelle a pris vie ✨.

Ce webinar nous a amené à la question suivante :

Et si les design tokens pouvaient transformer notre collaboration créa-dev, nous faisant gagner du temps et accroître notre efficacité ?

Introduction au design tokens

Les design tokens, quésaco ?

Pour répondre à cette question, notre exploration a commencé par une étape cruciale : la compréhension des Design Tokens.

Pas facile de donner une définition unique des design tokens 🤯, pour faire simple, il s’agit des plus petits éléments d’un design system, souvent qualifiés de “nucléons”. Pour rappel, les design tokens s’inscrivent dans le cadre du principe de l’atomic design, où les interfaces sont décomposées en éléments de plus en plus petits, des atomes aux molécules jusqu’aux organismes, favorisant ainsi une approche modulaire et cohérente de la conception.

Il existe plusieurs catégories de design tokens, comprenant les tokens primitifs, les tokens secondaires et les tokens de composants. Ils sont utilisés pour définir des propriétés visuelles comme les couleurs, les typographies, les espacements, etc.

En les centralisant, les équipes de design et de développement peuvent :

Collaborer à 100% en parlant le même langage (enfin 😆)
Maintenir une cohérence visuelle sur l’ensemble du projet
Gagner du temps en assurant une gestion efficace des styles dans un projet

Maintenant, intéressons-nous à la façon dont nous avons mis en place ces tokens chez Adeliom (un accès rapide dans votre boite mail, ça vous dit ?)

On vous partage notre méthode

Mise en place des Design Tokens chez Adeliom

Avant de passer à la mise en place des variables dans Figma, nous nous sommes réunis autour d’une table pour dégrossir tout ça et nous avons (beaucoup) fait chauffer nos cerveaux. 🧠

Notre première tâche consistait à élaborer ensemble une nomenclature claire et partagée entre les développeurs et les designers, illustrée par quelques exemples concrets afin d’assurer une compréhension commune. À cet effet, nous nous sommes inspirés de divers systèmes de conception publics tels que Atlassian et Spectrum.

Suite à ce travail préliminaire, nous avons co-conçus une bibliothèque de Design Tokens associée à une bibliothèque de composants Web en HTML et compatible avec de nombreux framework Javascript tels que React JS, Vue JS, Svelte ou encore Angular 🔥. Nos composants sont minutieusement optimisés par nos designers UX/UI pour garantir accessibilité, efficacité et ergonomie, témoignant d’un véritable esprit d’équipe 💪.

Une fois les tokens établis, nous avons étendu notre approche à l’utilisation de variables Figma.

Intégration des variables dans Figma

Récemment, Figma a fait disparaître les styles traditionnels au profit des variables, et ce n’est pas pour nous déplaire 😍 Ces variables offrent la possibilité de rendre flexibles des éléments tels que les espacements et les rayons de bordure, chose qui n’était pas envisageable précédemment.

Explorons maintenant quelques exemples concrets de ces variables, accompagnés de leurs avantages spécifiques :

Title/color et paragraph/color : Ces variables offrent la possibilité d’adopter une approche souple et homogène pour gérer les couleurs des titres et des paragraphes, simplifiant ainsi l’harmonisation visuelle.
Spacing/text-image : En ajustant dynamiquement et uniformément l’espacement entre le texte et les images, cette variable garantit une mise en page équilibrée pour une présentation visuelle optimale.
Card/padding : Cette variable permet un contrôle précis et uniforme du padding des cards, assurant une apparence visuelle harmonieuse et cohérente.

Pour gagner en efficacité notre équipe de développeurs s’est chargée d’intégrer l’ensemble des variables dans Figma. De leur côté les UX.UI Designers se sont concentrés sur la mise à jour de l’ensemble des composants de notre librairie Figma. La structure était enfin posée !

L’utilisation des « modes » a ensuite permis la création d’un dark mode autogéré, ajoutant une fonctionnalité pratique. Car oui, on est très fan de dark mode chez Adeliom, et pour cause ! Son esthétique moderne et reposante, ainsi que son aspect pratique offrent une expérience visuelle agréable surtout dans des environnements faiblement éclairés 🌚

Parallèlement, l’ajout de spécifications fonctionnelles directement dans Figma a simplifié la communication au sein de l’équipe, assurant une compréhension commune des composants et de leurs comportements.

Les collaborations ont été facilitées grâce à un plugin public, méticuleusement développé par Arnaud Ritti, Architecte Solutions et tête pensante du projet 🧠.

Ce plugin transforme les variables en tokens directement utilisables par les développeurs, renforçant l’efficacité de notre collaboration.

Nous avons continué à approfondir nos efforts dans ce domaine, en mettant particulièrement l’accent sur la gestion des contenus au sein de nos tokens. Dans cette optique, notre UX Writer, Claire Tourdot, a élaboré et mis en place une bibliothèque Figma regroupant des libellés récurrents, ce qui a grandement simplifié notre processus de conception. Cette bibliothèque comprend une variété d’éléments de formulaire, tels que les placeholders, les libellés et les messages d’erreur, ainsi que des libellés spécifiques à certaines pages fréquemment utilisées.

En valorisant la gestion des contenus au sein de nos tokens, nous avons pu :

Réduire le temps passé sur des tâches répétitives liées à la gestion des contenus.
Améliorer la cohérence dans l’expérience utilisateur grâce à une utilisation cohérente des tokens.
Encourager une collaboration plus fluide entre les membres de l’équipe.

Cette nouvelle ressource vient compléter notre approche en permettant une gestion optimale des éléments textuels fréquemment utilisés toujours dans le but d’améliorer l’UX !

Bien que ces nouveautés soient récentes dans nos processus, nous pouvons d’ores et déjà affirmer qu’elles ont considérablement boosté notre productivité et renforcé la cohérence visuelle de nos projets.

Ce qu’il faut retenir

Avantages et bénéfices

Chez Adeliom, l’arrivée des design tokens et des variables Figma a été un véritable game-changer pour notre équipe UX ! Voici comment ces nouveautés ont boosté notre quotidien :

Meilleure cohérence : fini les variations de border radius, de couleurs de texte qui nous rendaient chèvre ! Les design tokens ont assuré une cohérence ultime, offrant une expérience utilisateur améliorée et optimisée.
Gains de temps : grâce aux valeurs prédéfinies, la phase de conception comme de développement est plus rapide et plus efficace !
Collaboration renforcée : grâce à la mise en place de composants web et de variables, la communication est améliorée entre les équipes de conception et de développement.

Autre avantage non négligeable, en réduisant la saisie manuelle et en minimisant les risques d’erreurs humaines, les Design Tokens contribuent à accélérer et améliorer la phase de recette ce qui par conséquent favorise une collaboration harmonieuse entre les designers et les devs. De plus, en partageant un langage commun , la communication entre les deux parties ne peut qu’être améliorée. 🚀

Avant de tester de votre côté…

Conclusion et prochaines étapes

En ce qui concerne les développements futurs, nous avons déjà mis en place de nombreux tokens et variables pour aller plus loin, notamment des tokens typographiques et des variables permettant de régler l’interligne.

Nous attendons avec impatience la possibilité de les gérer directement dans Figma (Figma, si tu nous entends 😇).

Nous espérons sincèrement que nos ressources vous seront utiles dans la mise en place de vos design tokens, vous permettant ainsi de gagner un temps précieux.

Que la force des tokens soit avec vous ! ☄️🪐