Système de design Carsparency — une bibliothèque sous quatre produits

01Contexte

Quatre produits, un langage visuel

Carsparency exploitait quatre surfaces produit : un site pour les vendeurs, une application terrain pour les inspecteurs, un back-office pour les équipes internes et une plateforme pour les concessionnaires. Chacune a son propre fichier Figma, et toutes les quatre reposent sur une même bibliothèque partagée.

Le fichier du système de design documente cette bibliothèque sur onze planches (couleur, typographie, boutons, champs de formulaire, interrupteurs, fils d’Ariane, pagination, toasts, modales, en-tête et pied de page, petits composants) et une page d’icônes.

Système de design Carsparency — la planche des couleurs : vert primaire, gris et autres gammes de 900 à 50, avec 500 marqué comme palier principal — Figure 02La planche des couleurs : douze gammes de 900 à 50, la gamme grise se prolongeant jusqu’au blanc, et le palier 500 de chacune marqué comme valeur principale.

02Problème

Quatre publics, deux thèmes, un seul jeu de pièces

Les quatre produits ne se ressemblent pas, et c’est voulu. Le site vendeur est clair et aéré, tandis que l’application d’inspection, le back-office et la plateforme concessionnaires sont sombres et denses. Un vendeur comme un concessionnaire doit pourtant reconnaître la même entreprise.

Sans bibliothèque partagée, chaque fichier redessinerait ses propres boutons et champs, et les quatre produits divergeraient, écran après écran.

03Structure

Des gammes aux composants, des composants aux produits

La couleur s’organise en douze gammes (vert primaire, gris, bleu, vert, rouge, orange, violet, corail, bleu-violet, jaune-orangé, marine et un bleu cyan). Chacune va de 900 à 50, la gamme grise se prolonge jusqu’au blanc, et le palier 500 est marqué comme valeur principale. Le primaire de marque, #00B86B, est le 500 de la gamme verte.

Les composants sont construits en jeux dont les variantes couvrent à la fois le type, la taille et l’état. Le jeu de boutons compte à lui seul 90 variantes : plein et contour, primaire et gris, trois tailles, et les états par défaut, survol, pressé, désactivé et chargement.

Comment la bibliothèque s’organise en couches

01
CouleurDouze gammes, de 900 à 50, publiées comme styles de couleur partagés.
02
TypographieCinq graisses sur un même exemple, du Black au Semibold oblique.

Système de design Carsparency — la matrice des boutons : pleins et contour, primaires et gris, en trois tailles et cinq états — Figure 03La matrice des boutons. Les lignes sont le type et la taille, les colonnes l’état : une combinaison manquante apparaîtrait comme un vide.

Système de design Carsparency — la planche typographique : cinq graisses, du Black au Semibold oblique — Figure 04La planche typographique : cinq graisses, du Black à 900 jusqu’à un Semibold oblique, chacune sur la même phrase d’exemple.

04Décisions clés

Quatre décisions qui font tenir la bibliothèque

Tirées des planches et de la façon dont les fichiers produit les utilisent.

01
Des gammes, pas une palette
Chaque couleur se décline en dix paliers avec une valeur principale marquée. Les écrans sombres et denses ont besoin de plusieurs nuances proches pour les surfaces, les bordures et le texte, et les gammes les fournissent sans inventer de nouvelles couleurs.
Compromis
Douze gammes, c’est plus de couleur que quatre produits n’en exigent strictement.
02
Dessiner chaque état
Boutons et champs sont documentés comme des matrices de type, de taille et d’état. Survol, pressé, désactivé, chargement et erreur sont conçus, au lieu d’être laissés à l’appréciation de qui les implémente.
03
Publier, pas copier
Couleurs et composants arrivent dans les fichiers produit sous forme de styles et d’instances de la bibliothèque, non de copies collées : une modification de la bibliothèque peut ainsi atteindre les quatre produits.
04
Un seul jeu de gammes pour deux thèmes

05Solution

Un état pour chaque contrôle, un thème pour chaque produit

Chaque composant interactif est dessiné dans tous les états qu’il peut prendre, pas seulement au repos. La planche des champs de formulaire décline les états par défaut, avec icône, coché, erreur, survol et liste déroulante, sélectionnés ou non, en clair et en sombre, pour qu’un développeur n’ait jamais à deviner l’aspect d’une erreur en thème sombre.

Les mêmes gammes servent les deux thèmes. Le site utilise les extrémités claires de la gamme grise pour les surfaces, les produits sombres son extrémité sombre, et le vert primaire reste la couleur d’action constante dans les deux.

Boutons : 90 variantes
Champ de texte : 42 variantes
Interrupteurs et sélecteurs : 30 variantes
Segments, pagination, fils d’Ariane, en-tête, pied de page, toasts et modales

Application d’inspection Carsparency en thème sombre, construite avec la bibliothèque partagée

Assistant vendeur du site Carsparency en thème clair, construit avec la même bibliothèque

06Écosystème

La preuve qu’il a servi, pas seulement été dessiné

La preuve la plus solide d’un système de design se trouve dans les fichiers qui le consomment. Les frames des fichiers Pro, Back-office, Inspection et Web tirent toutes leurs couleurs des mêmes styles publiés (les gammes du vert primaire et du gris) plutôt que de copies locales.

Leurs composants viennent aussi de la même bibliothèque. Champs de texte, modales, pagination, fils d’Ariane, boutons et icônes système des fichiers produit sont des instances de composants de la bibliothèque, jusqu’à un jeu d’interrupteurs dont le nom mal orthographié est identique dans la bibliothèque et dans l’application d’inspection.

07Mon rôle

La part de Sina

Établi à partir du fichier du système de design. Les fichiers n’indiquent pas qui d’autre a travaillé sur la bibliothèque, et ses styles de couleur sont publiés depuis un fichier de bibliothèque extérieur à cet ensemble : il ne s’agit donc pas d’une revendication de paternité exclusive.

Responsable

Les gammes de couleur et leur planche de documentation
La planche typographique
Les jeux de composants et leurs matrices d’états : boutons, champs, interrupteurs, segments, pagination et fils d’Ariane
Les modèles : toasts, modales, en-tête et pied de page
L’application de la bibliothèque dans les quatre fichiers produit

Coresponsable

Collaboration

Des collègues de l’ingénierie, non nommés dans les fichiers

Les planches portent la mention Version 0.0.1 : une version précoce de la bibliothèque, pas une version aboutie.

08Résultats

Ce que livre le fichier

Des décomptes de travail conçu, pas des résultats. Rien n’indique si l’ingénierie a repris la bibliothèque dans le code.

variantes de composants: 265; Réparties sur 15 jeux de composants; Livrable
gammes de couleur: 12; Chacune de 900 à 50, avec un palier principal marqué; Livrable
fichiers produit qui la consomment: 4; Pro, Back-office, Inspection et Web; Livrable

Ce qui a été livré

Gammes de couleur
Échelle typographique
Boutons et champs avec matrices d’états
Interrupteurs, segments, pagination et fils d’Ariane
Toasts, modales, en-tête et pied de page
Page d’icônes

09Ce que j’ai appris

Ce que ce travail a appris

01
L’adoption est la seule preuve qui compte
Une bibliothèque mérite son nom quand d’autres fichiers la consomment. Ici, la preuve se trouve dans les calques mêmes des fichiers produit, pas dans les planches.
02
Les états sont la partie coûteuse
Les composants au repos se dessinent vite. Les 265 variantes sont surtout des états, et c’est là que se joue réellement la cohérence entre quatre produits.
03
Les noms voyagent avec les composants
Un nom de composant mal orthographié survit dans chaque produit qui l’utilise : mieux vaut soigner le nommage avant de publier.

Système de design Carsparency — une bibliothèque sous quatre produits | Sina Oshaghi

Système de design Carsparency — une bibliothèque sous quatre produits

Quatre produits, un langage visuel

Quatre publics, deux thèmes, un seul jeu de pièces

Des gammes aux composants, des composants aux produits

Comment la bibliothèque s’organise en couches

Quatre décisions qui font tenir la bibliothèque

Des gammes, pas une palette

Dessiner chaque état

Publier, pas copier

Un seul jeu de gammes pour deux thèmes