Le design system pour les nuls (et pour les moins nuls aussi)
Mise en place et outillage d'un Design System avec Valentin Manceaux Panot lors des AperoWeb Nancy
Cette sketchnote résume une présentation sur les Design Systems par Valentin Manceaux Panot lors des AperoWeb Nancy, expliquant comment structurer et outiller efficacement un système de design.
Contenu
Valentin présente l'équation fondamentale d'un Design System : Composants réutilisables + Règles = cohérence. Il explique la stratégie de mise en place recommandée : partir d'une application existante pour identifier les cas d'usage, créer une documentation vivante, puis développer de nouvelles fonctionnalités en suivant le Design System établi.
La sketchnote détaille les outils essentiels : Atomic Design pour organiser les composants, React Aria pour l'accessibilité, Vanilla Extract pour le CSS typé, Storybook pour la documentation interactive, et ESLint pour la validation automatique.
Points clés à retenir
- Partir de l'existant : Analyser l'application actuelle avant de créer de nouveaux composants
- Documentation vivante : Présenter les cas d'usage concrets et maintenir à jour
- Outillage adapté : Atomic Design, React Aria, Vanilla Extract, Storybook et ESLint
- Évolution progressive : Développer les nouvelles fonctionnalités en suivant les règles établies
Cette sketchnote est disponible dans un carnet physique.