Française des Jeux× Devoteam
De designer à responsable du design system de l’appli mobile. J’ai refait la bibliothèque Figma, automatisé les variants et livré les modes light & dark.
L’appli mobile de jeux de la Française des Jeux (FDJ) reposait sur une bibliothèque Figma éparpillée. Les variants étaient refaits à la main, écran par écran. Aucune règle ne reliait couleurs, espacements et textes. Impossible, dans ces conditions, d’ajouter un dark mode.
Comprendre et améliorer les parcours de l’appli avant de toucher au design system.
Je n’ai pas travaillé sur le design system dans mon coin. En parallèle, j’ai conçu et amélioré les parcours de l’appli. J’ai passé chaque écran en revue et repéré les points de blocage qui revenaient. Puis j’ai corrigé, avec l’équipe produit et les développeurs.
Cette connaissance du produit a servi de base à toute la refonte. On ne crée pas de bons tokens pour un produit qu’on ne comprend pas.
Je suis devenu responsable en montrant ce que ça apportait, pas en demandant un titre.
J’ai d’abord contribué comme designer. Puis je suis devenu l’interlocuteur unique pour toutes les questions sur le design system de l’appli. Mon rôle : garder un style cohérent, outiller le travail entre designers et développeurs, vérifier la qualité des composants.
Une équipe qui sait enfin à qui s’adresser pour faire évoluer un composant.
Plus de composants sans responsable, plus d’écarts qui s’accumulent sans que personne ne les voie. Le design system est devenu un outil d’équipe, pas un fichier qu’on ouvre à contrecœur.
J’ai refait toute la bibliothèque : variants automatiques, tokens, light & dark.
Chaque composant existait en autant de copies que d’états, de tailles et de thèmes. Tout se mettait à jour à la main. Ajouter une couleur voulait dire modifier des dizaines de fichiers.
- 01Variants automatiques grâce aux variables Figma
- 02Tokens de couleur, de taille, de typographie et de radius
- 03Passage de light à dark en un seul changement de mode
- 04Composants refaits avec des slots
- 05Documentation écrite avec les développeurs
100 % des variants sont automatiques. Une seule bibliothèque remplace les copies en parallèle. Les nouveaux écrans se conçoivent 3 fois plus vite.
Un design system ne tient pas grâce aux seuls fichiers Figma.
Il tient grâce au dialogue entre les designers qui le construisent, les développeurs qui le codent et les chefs de produit qui fixent les priorités. Designers et développeurs faisaient une review commune de chaque composant avant sa mise en ligne. Un point hebdomadaire réunissait les responsables technique et produit. La documentation était partagée entre Figma et le code.
Résultat : les composants arrivaient dans le code sans mauvaise surprise, avec moins de corrections après la mise en ligne.
17 mois, les modes light & dark en ligne et des écrans conçus 3 fois plus vite.
Travaillons ensemble.
Idéal : un poste de Lead Design System en CDI et en télétravail. Ou une mission freelance ciblée : audit de l’existant, mise en place et accompagnement des équipes, organisation du travail de design.