Cas 05 · Industrialisation
Design System, faire converger deux applications
Studio et l'application d'administration avaient grandi séparément. Le design system leur donne un socle commun, sans réécriture complète.
Contexte
Studio et l'application d'administration avaient progressivement accumulé des composants proches, des variantes visuelles et des comportements différents pour des besoins souvent similaires. Cela ralentissait les nouveaux développements et créait des incohérences entre les applications.
Les enjeux
Il fallait éviter de maintenir plusieurs versions des mêmes composants et donner aux développeurs un socle commun, sans lancer une réécriture complète ni bloquer les évolutions en cours.
Ce qu'on a fait
Nous avons commencé par les composants les plus utilisés : boutons, panneaux, tableaux, grilles, menus et éléments de formulaire. Nous les avons regroupés dans une bibliothèque partagée, distribuée sous forme de packages privés versionnés. Nous avons défini des tokens pour les couleurs, les espacements et les typographies, avec une palette exprimée en OKLCH. Les composants s'appuient sur ces tokens via styled-components. Leur documentation, leurs variantes et leurs états sont centralisés dans Storybook, où les composants peuvent être développés et testés isolément avant leur intégration. Pour certains comportements, nous nous sommes appuyés sur Radix UI afin de disposer de primitives accessibles et robustes. La migration s'est faite par étapes, composant par composant.
Mon rôle
J'ai participé à la conception et au développement des composants partagés, à la définition des tokens, à la mise en place des styles avec styled-components, à l'intégration de Radix UI et à la structuration de la bibliothèque. J'ai aussi contribué à sa documentation dans Storybook et à son adoption progressive dans les deux applications. Une part importante du travail consistait à échanger avec les autres développeurs pour garder un socle simple à utiliser et adapté aux besoins réels.
Ce que cela a permis
Le design system fournit aujourd'hui une base commune aux deux applications. Il améliore leur cohérence, facilite le développement de nouvelles interfaces et simplifie l'arrivée de nouveaux développeurs grâce à une base documentée et directement utilisable. Initialement centré sur les composants les plus courants, le socle couvre aujourd'hui les fondations visuelles du système, comme les couleurs, les espacements, les typographies et les icônes, ainsi que plusieurs dizaines de composants, jusqu'à des briques plus spécialisées comme un éditeur de code, des graphiques ou un composant d'import de fichiers.