Atomic Design System

Contexte :

• 3 produits à maintenir

• équipe design qui grandit

• besoin d’alignement fort avec l’équipe tech

Objectif principal :

👉 Harmoniser l’ensemble des produits via une source unique de vérité.

————————————————————————

Objectifs Design System

Nous avons défini 3 principes fondateurs :

• Explorer sans casser

  → permettre l’expérimentation tout en protégeant les composants validés.
  
  

• Construire un système modulable

  → capable d’évoluer avec différents produits et futurs besoins.
  
  

• Créer une source de vérité partagée

  → accessible aux designers, développeurs et équipes produit.

————————————————————————

Mon rôle

Projet mené sur 3 sprints avec :
- 3 Product Designers
- 1 Brand Designer
- collaboration continue avec Tech & Marketing

Mes responsabilités principales :
- Structuration et mise en place du Design System
- Organisation et répartition des tâches design
- Alignement Design ↔ Tech
- Définition des conventions de nommage et architecture
- Mise en place des process de collaboration
- Documentation et spécifications composants

————————————————————————

Approche & Méthodologie

1-Prise du besoin technique

Analyse de la librairie utilisée côté front (Chakra UI) afin d’aligner :
- structure des composants
- naming conventions
- tokens design
- logique d’implémentation dev

👉 Objectif : réduire le gap Design → Code.

2-Architecture du Design System

Nous avons conçu :
- Design tokens (colors, spacing, typography)
- composants modulaires
- variantes contrôlées
- règles d’usage documentées
- structure scalable inspirée du code

Le système permettait :
- exploration dans des zones sandbox
- protection des composants validésévolution progressive

————————————————————————

3-Communication Design × Tech

La collaboration continue était clé.

J’ai mis en place :

✅ Automatisations Slack

→ notifications des nouveautés et updates DS pour les développeurs

✅ Versioning sémantique

→ historique clair des changements :
- patch
- minor
- breaking changes (ex : changement de librairie d’icônes)

👉 Résultat : moins de friction et meilleure anticipation côté tech.

————————————————————————

4- Documentation & Delivery

• Mise en place des composants dans Storybook

• Rédaction de spécifications détaillées pour chaque composant

• Process clair pour la création et validation des nouveaux composants

👉 Chaque composant suivait un workflow défini avant intégration.👇

————————————————————————

Résultats & Impact

Ce Design System est devenu un véritable game changer :

✅ Design plus cohérent et scalable
✅ Réduction des incohérences entre produits
✅ Process de conception accéléré
✅ Collaboration Design–Tech fluidifiée via Storybook
✅ Meilleure autonomie des designers
✅ Équipe plus agile dans la livraison produit

————————————————————————

Impact Produit

Le Design System a permis de passer : d’une logique de production d’écrans à une logique de construction produit systémique.

————————————————————————

Learnings

• Un Design System est avant tout un projet d’alignement humain.

• L’adoption dépend plus du process que des composants.

• L’alignement avec la stack technique dès le départ accélère fortement l’implémentation.