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.