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, …
{{videotemplate=https://vz-84b90243-aaa.b-cdn.net/3c4432a5-ebb3-40fa-8059-bfbad2c74199/playlist.m3u8, halfwidth, noplay}}
{{videotemplate=https://vz-84b90243-aaa.b-cdn.net/3a36bdc5-616b-4d3d-88f7-67e34c0799a1/playlist.m3u8, halfwidth, noplay}}
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).
{{videotemplate=https://vz-84b90243-aaa.b-cdn.net/ebdc1403-1d79-49ca-ac29-7eeb52720ace/playlist.m3u8, fullwidth}}