Design System Ecole 42
42 est une école d’informatique internationale, gratuite et ouverte à tous, fondée à Paris en 2013 par Xavier Niel. Elle propose une pédagogie innovante, sans professeurs ni cours magistraux, basée sur l’apprentissage par projets et le travail collaboratif. Le modèle s’est décliné en un réseau de dizaines de campus dans le monde, offrant le même environnement intensif 24/7 pour former des développeurs et profils tech autonomes, créatifs et opérationnels.
42 disposait seulement d’un début de UI Kit, insuffisant pour soutenir la conception de nouveaux écrans et parcours sur ses différents produits digitaux. Aussi, les équipes rencontraient des difficultés à maintenir les interfaces dans le temps : absence de synchronisation design / développement, composants dupliqués pour un même usage, incohérences visuelles d’un produit à l’autre et manque de vision globale sur l’écosystème d’interfaces.
En tant que UI Designer et Design System Designer, ma mission consistait à concevoir dans Figma un nouveau UI Kit complet, robuste et pérenne, incluant la définition des Design Tokens (primitives, sémantiques et parfois alias), toutes les fondations d’un Design System (couleurs, typographies, espacements, radius, effets, grilles, iconographie, …), un ensemble de composants de base et d’autres spécifiques aux besoins des différents produits de 42, ainsi qu’une gestion du dark mode prioritaire et la création d’un light mode pour offrir aux utilisateurs le choix de leur thème.
J’ai commencé par cartographier l’existant (écrans, composants, usages, ...) afin d’identifier les redondances, les incohérences et les patterns réellement utilisés. Sur cette base, j’ai défini une architecture pour les Design Tokens permettant de piloter facilement les thèmes dark et light, tout en garantissant la cohérence sur l’ensemble des produits. Les fondations ont été conçues pour être simples à maintenir et rapidement compréhensibles par les designers et développeurs. Enfin, j’ai rationalisé et reconstruit les composants : boutons, formulaires, modales, navigation, tableaux, cartes, …
En quelques mois, j’ai livré un Design System complet dans Figma, incluant un UI Kit structuré, documenté et décliné en dark et light mode, un set de Design Tokens centralisés (couleurs, typographies, espacements, états, etc.), des composants couvrant la majorité des cas d’usage des produits de 42, ainsi qu’une synchronisation avec le développeur front-end du projet (design tokens exportables, conversion avec Style Dictionary et mise en place d’un Storybook).
Ce nouveau Design System permet désormais une meilleure cohérence visuelle et fonctionnelle sur l’ensemble des interfaces de 42, une collaboration plus fluide entre designers et développeurs grâce à un langage commun (tokens, composants, nomenclature), un gain de temps significatif sur la conception d’écrans, la déclinaison des parcours et la maintenance des produits, ainsi qu’une meilleure accessibilité, notamment grâce à un travail sur les contrastes et les couleurs conforme aux recommandations WCAG pour les deux thèmes (dark et light).
