Au mois de juin dernier, Kitten, le design system de KissKissBankBank (GitHub) a célébré ses six ans, avec une onzième release majeure. Cet anniversaire est d’abord passé inaperçu dans l’équipe, mais on a pu fêter ça avec un verre de champagne 🥂.
Étant donnés les changements prochains dans les équipes de KissKissBankBank & Co., l’équipe derrière Kitten a voulu présenter le projet aux autres équipes du groupe, pour les inviter à l’adopter. Cet article récapitule l’histoire et la philosophie du Design System, et divers choix techniques d’intégration.
Kitten, en tant que design system, a été conçu pour résoudre le problème de la dette de design présente sur les plate-formes KissKissBankBank, Lendopolis et HelloMerci.
L’acte de fondation de Kitten avait ces trois objectifs :
Vous pouvez découvrir ces objectifs et le tout début du projet dans Les dessous du Kit UI de KissKissBankBank, par Solène Maître, responsable Produit à cette époque.
Les processus mis en place partent de maquettes de pages complètes, à partir desquelles l’équipe de développement décortique et isole chaque composant. Il n’y a donc pas le même systématisme entre le design, qui travaille en pages complètes, et le code, qui travaille en composants isolés. Ces choix sont faits à cause du manque de maturité des design systems en 2016-2017, de la faible expérience de l’équipe sur le sujet et surtout du besoin d’avancer et d’itérer rapidement pour résorber la dette design.
Kitten a émergé sous la houlette de Fanny Cheung, Bastien Maillard et Sunny Ripert en 2016. Le projet a été très vite rejoint par Camille Delbove qui a pu suivre l'intégralité de sa conception, et coordonne maintenant l’intersection du design et du code. En 2019, Joachim Robert est arrivé dans l'équipe tandis que Fanny et Sunny s'en retiraient. Bastien l’a quittée plus tard, en 2021.
Côté design, Kévin Lagier a conçu et fait progresser l’identité du site jusqu’en 2020, puis Marie Boegly a pris le relais pour faire évoluer le design et décomposer les maquettes vers des composants et leurs variantes, sur l’outil de conception graphique Figma : Design System Kitten.
Au début, Kitten a été conçu autour de composants HTML / SCSS. Le premier composant était le simple Button. Très vite, les composants demandent de l'interactivité, comme le nouveau Header commun aux trois plate-formes. Pour ça, le choix est fait d’utiliser React ponctuellement. Pour présenter le design system, une app Rails est accrochée, elle s’appelle Karl (on peut encore la voir sur styleguide.kisskissbankbank.com, figée dans le temps), elle sera remplacée en 2019 par Storybook hébergé sur Vercel : kitten.vercel.app.
En 2018, le choix est fait de ne développer qu’en React, et de ne plus avoir de composants basés sur du HTML / SCSS. Le choix du moteur CSS-in-JS se porte d’abord sur Radium, puis en 2019 la migration se fait vers Styled Components, qui permet d’écrire les styles comme du CSS, et non comme des objets JS inadaptés. La transition de Radium vers Styled Components se termine en 2020 avec la migration des plus vieux composants de Kitten.
Les derniers composants HTML / SCSS sont migrés en 2021, pour Kitten v3. La v2 avait été publiée deux ans auparavant, cette version majeure a permis de se débarrasser d’une grande partie du code legacy et de la dette technique, et de profiter pleinement de React pour nos composants.
Les versions majeures se suivent beaucoup plus rapidement, ce qui permet de faire passer des Breaking Changes conséquents, comme le nouveau design, introduit fin 2020.
À partir de 2021, les maquettes sont élaborées avec l’outil Figma, Kitten devient un design system complet. Il faut trouver un langage commun entre le design et le code, c’est pourquoi en 2022 on fait évoluer l’arborescence pour avoir la même architecture des deux côtés. Le déploiement des design tokens permet en outre de faciliter la transmission de données de style du design system entre les maquettes et le code.
Détail des déclinaisons du composant Button, dans les maquettes Figma