Construire un système de jetons de conception flexible et facile à utiliser

Que sont les jetons de conception et pourquoi sont-ils utiles à une organisation de produits ?

Les jetons de conception sont des principes de conception représentés sous forme de valeurs de données. Ils définissent et représentent des éléments de conception tels que la couleur, la typographie, l'espacement et d'autres attributs de conception visuels et fonctionnels d'une manière qui peut être appliquée et maintenue de manière cohérente dans un produit ou une marque. Elles constituent un outil puissant pour les organisations de produits, car elles aident à maintenir la cohérence et l'homogénéité de l'ensemble de leurs produits. Ces valeurs sont définies une seule fois et peuvent être réutilisées pour l'ensemble du produit, ce qui facilite l'application des changements à votre système de conception. Cette approche permet aux équipes de se concentrer sur la situation dans son ensemble, créant ainsi un flux de travail plus efficace.

Pourquoi en avions-nous besoin à Ondorse ?

Chez Ondorse, nous comprenons les avantages de la centralisation des valeurs et de la réduction des micro-décisions quotidiennes qui ralentissent la livraison des produits et ajoutent de la dette technique.

Une décision qui a beaucoup aidé notre équipe a été de s'appuyer sur un cadre CSS avec des composants prédéfinis. Nous avons opté pour Chakra UI. Les frameworks de ce type sont extrêmement utiles pour permettre aux équipes de se concentrer davantage sur l'UX et l'architecture de l'information que sur le développement de l'interface utilisateur proprement dite.

Chakra UI dispose non seulement d'un grand nombre de composants prédéfinis, mais aussi d'un grand nombre d'éléments, tels que les espaces, la typographie, les nuances de couleurs, les ombres, les rayons et les courbes de mouvement. Pratiquement tout ce dont vous avez besoin pour que votre interface utilisateur soit superbe !

Qu'est-ce qui répond actuellement aux exigences de notre kit d'interface utilisateur ?

Notre objectif n'était pas de construire un système de conception dès le premier jour. Au contraire, nous prévoyons de développer le système de conception d'Ondorse de manière itérative. Chakra a été un excellent point de départ, fournissant une base qualitative et complète sur laquelle s'appuyer.

Toutefois, l'utilisation d'un cadre CSS peut également présenter des inconvénients. Toutes les interfaces peuvent ressembler à des modèles, avec des composants standardisés et une palette de couleurs neutres. La personnalisation est nécessaire pour obtenir des interfaces qui reflètent fidèlement l'identité de votre marque.

Nous avons donc commencé par nous pencher sur le détail des polices et des couleurs. Nous avons remplacé les polices par défaut par nos propres polices et nous avons créé une nouvelle palette de couleurs inspirée de nos vibrations Ondorse. Notre palette contient des nuances de couleurs cohérentes, avec le même niveau de contraste pour chaque nuance. Il existe des tonnes d'outils géniaux pour vous aider à choisir des palettes cohérentes et accessibles. Dans notre cas, nous avons opté pour l'outil très utile qu'est la palette accessible.

Jetons multicouches ou niveaux de jetons

Nous voulions que notre jeu de jetons de couleur soit flexible, de manière à ce que nous puissions facilement revenir sur une décision et changer la couleur de nos boutons primaires, ou la couleur du trait d'entrée en une seconde. La meilleure solution que nous ayons trouvée pour relever ce défi a été d'introduire plusieurs couches de jetons.

La première couche est constituée de valeurs brutes telles que blue-50, blue-100 et blue-200, ainsi que des codes HEX qui leur sont associés. Nous les appelons "jetons d'option".

La deuxième couche est nommée en fonction de l'utilisation de ces valeurs, par exemple color-button-background. Nous avons basé ce modèle de jetons sur l'article perspicace de Lukas Opperman, Building better products with a design token pipeline (Construire de meilleurs produits avec un pipeline de jetons de conception). Nous les appelons "jetons de décision".

Nous avons beaucoup apprécié ce modèle parce qu'il guide le processus de conception par le biais d'un nommage orienté vers l'utilisation et qu'il offre une certaine flexibilité grâce aux jetons d'option et aux jetons de décision. Par exemple, si vous devez changer de marque ou améliorer l'accessibilité d'un composant spécifique, vous pouvez facilement apporter des modifications en réaffectant la valeur brute à un jeton d'option, ou le jeton d'option à un jeton de décision.

Pour maintenir un format cohérent, nous avons défini une structure sémantique de jetons qui couvre la plupart des cas.

racine - type - composante - (attribut) - (état)

par exemple -ond-color-secondary-button-border-hover

Limites des figurines et comment les contourner ?

Figma, l'outil de conception populaire, présente certaines limites lorsqu'il s'agit de créer et de gérer des jetons de conception. Cependant, il existe des solutions de contournement à ce problème. L'option que nous avons choisie pour l'instant est d'exporter régulièrement nos jetons d'option et nos jetons de décision dans un fichier JSON.

Quel est le prochain défi ?

Le prochain défi pour Ondorse est de continuer à développer et à affiner notre système de conception en construisant des niveaux de jetons plus avancés qui permettent une flexibilité et une personnalisation encore plus grandes. Nous prévoyons également d'explorer d'autres outils et cadres qui peuvent nous aider à rationaliser notre processus de conception et à assurer la cohérence de tous nos produits. En fin de compte, notre objectif est de créer un système de conception qui soit à la fois flexible et cohérent, nous permettant de construire des produits beaux et fonctionnels qui reflètent vraiment la marque Ondorse.

Oh, et au fait, n'oubliez pas de jeter un coup d'œil à cet autre article de Lukas Opperman pour d'autres conseils sur la façon de nommer vos jetons.

Rejoignez l'équipe d'Ondorse qui continue à affiner son système de conception et à construire un produit étonnant ! Consultez notre page carrière pour plus d'informations sur les opportunités disponibles.

‍

‍