Un langage commun. De Figma au produit.
Le point de départ
La croissance du produit avait laissé derrière elle des interfaces disparates : 35 nuances de bleu dans le code, des contrastes inégaux et des spécifications sujettes à interprétation. L’objectif était de poser une base commune, capable d’évoluer avec les applications.
Les fondations
J’ai organisé les tokens en trois niveaux : les valeurs primitives, leur rôle sémantique, puis leur usage dans les composants. Cette séparation permet de changer un thème sans reconstruire chaque écran. Tokens Studio structure la source ; Style Dictionary la transforme pour le code.
- Primitives
blue-600#3046FF - Sémantiques
color.action.primaryLa couleur d’une action - Composants
button.primary.backgroundSon usage dans le bouton
Une intention stable. Des valeurs adaptées au thème.
La bibliothèque
Auto Layout, propriétés et variantes donnent aux composants la souplesse nécessaire. Chaque élément prévoit ses états : repos, survol, focus, actif et désactivé. Les contrastes du texte sont travaillés dès la conception, avec un objectif de 4,5:1 pour le texte courant.
Du design au code
Les tokens exportés alimentent un pipeline GitHub. Les composants React / Tailwind suivent la bibliothèque Figma, et Storybook rapproche la documentation, les maquettes et leur rendu réel. Un changement peut ainsi être suivi du design à son implémentation.
- FigmaComposants & tokens
- Style DictionaryTransformation des valeurs
- React + StorybookCode & documentation
L’adoption
La bibliothèque seule ne suffisait pas. J’ai accompagné son adoption avec des règles d’usage, des exemples et des sessions d’échange avec les développeurs. Un comité mensuel permettait de faire évoluer les composants à partir des besoins du produit.
- Documenter
- Expliquer quand utiliser un composant, ses limites et ses règles d’accessibilité.
- Faire contribuer
- Examiner les demandes, éviter les doublons et partager les décisions.
- Accompagner
- Des formations et des permanences pour aider les équipes sur leurs cas concrets.
Les résultats
Au terme des six mois, le système était adopté par l’ensemble des équipes produit. Le socle commun a réduit les incohérences et libéré du temps pour la conception et la livraison des fonctionnalités.
- +45 %
- de vitesse de livraison front-end
- −60 %
- de dette UI
- 100 %
- d’adoption par les équipes produit