Société Générale× Devoteam

Simplifier les échanges entre l’équipe du design system et les 40+ designers.

Les demandes arrivaient en direct, sans tri. Chaque question interrompait le travail en cours. L’équipe DS passait plus de temps à répondre qu’à faire avancer le design system.

Avec l’équipe, j’ai mis en place des canaux dédiés, des rendez-vous hebdomadaires et des tickets Jira. Chaque demande suit désormais un circuit clair.

Les open hours hebdomadaires sont devenues un lieu d’échange entre designers, chefs de produit et développeurs. Des designers expérimentés sont peu à peu devenus ambassadeurs du design system. Une vraie communauté s’est formée autour de l’outil.

Ranger la bibliothèque Figma pour que chacun s’y retrouve du premier coup.

Les composants étaient rangés par famille. Pour les retrouver, il fallait connaître ce classement interne. Les nouveaux arrivants s’y perdaient, et tout le monde perdait du temps chaque jour.

J’ai rangé la bibliothèque par ordre alphabétique, comme la sidebar du Storybook des développeurs. Chaque composant a sa page, avec des séparateurs clairs. Designers et développeurs parlent enfin la même langue.

280+ tokens de taille pour que tout le monde utilise les mêmes mesures.

À mon arrivée, il n’existait presque aucun token de taille. Espacements, grilles, arrondis et tailles de texte étaient fixés à la main, écran par écran. Chaque version mobile ou desktop se refaisait à la main.

Avec les bons tokens, un même écran passe du mobile au desktop en quelques secondes. Décliner un écran est devenu 4 fois plus rapide.

• 280+Tokens créés : tailles d’écran, espacements, grilles, radius, typographie
• 1Seule référence pour les espacements, avec les mêmes tokens sur mobile et desktop
• 4×Plus rapide pour décliner un écran, une fois les tokens en place

230+ tokens de couleur pour passer de deux bibliothèques à une seule, avec deux thèmes.

Aucune règle ne disait quelle couleur utiliser, ni où. N’importe quelle couleur pouvait aller n’importe où. Résultat : deux bibliothèques identiques à entretenir en parallèle, une pour les clients, une pour les conseillers.

J’ai tout réorganisé. Chaque couleur a désormais un rôle précis : message d’état, couleur de la marque ou interface. Chaque token sémantique renvoie vers une couleur primitive, et Figma passe du mode client au mode conseiller en un clic.

185+ composants refaits ou créés, plus simples à assembler.

Chaque composant refait suit la même logique. Il fait une seule chose, bien définie. Il a des slots pour s’adapter. Et il s’ajuste seul à la taille de l’écran. Voici trois exemples.

L’en-tête et le pied de page formaient un seul composant. Leurs propriétés se mélangeaient avec celles de la sidebar et provoquaient des erreurs d’affichage. Je les ai séparés : chacun est devenu simple à lire et à entretenir.

L’ancien composant Layout devait prévoir chaque combinaison possible. Avec les slots, un seul composant couvre tous les cas. Les designers y glissent ce dont ils ont besoin, sans créer de nouveau variant. L’adaptation à la taille de l’écran se fait toute seule.

• EX.01Header et footer séparés : des propriétés claires, sans conflit
• EX.02Layout à slots : un composant pour tous les cas, avec onglets, étapes ou vide
• EX.03Patterns automatisés : les variants se font en un clic, sans copies à entretenir

Un design system ne sert que si les équipes s’en servent. J’ai formé 40+ designers.

Chaque nouvelle version était présentée lors d’une démonstration en direct. Chaque composant est documenté à trois endroits : Figma pour les designers, Storybook pour les développeurs, Zeroheight pour la lecture détaillée.

Les designers ne venaient plus seulement copier des composants. Ils s’appuyaient sur le design system pour réfléchir à leurs écrans.