Ce benchmark presente les Design Systems de 6 startups francaises a différents stades de maturite. Chaque section couvre l'architecture du système, la gouvernance, les outils utilises et le process de contribution. Des retours concrets d'équipes qui construisent et maintiennent ces systèmes au quotidien.
1. Les contributeurs
Clarisse Faure
Product Designer @ Garantme
Sarah Bellaiche
Product Designer @ Garantme
Mathieu Lajoinie
Product Designer @ PlayPlay
Enea de Toledo
Product Designer @ Captain Contrat
Flora Vidal
Product Designer @ Captain Contrat
Matthias Holler
Product Designer @ Partoo
Thibaud Vichard
Product Designer @ Weezevent
Martin Boisrame
Product Designer @ Jobteaser
Julien Boucry
Product Designer @ Jobteaser
Marie-Eve Journet
Product Designer @ Jobteaser
2. Du rebranding au Design System
Garantme est une plateforme digitale d'assurance pour les professionnels de l'immobilier. L'équipe a construit son Design System a partir d'un chantier de rebranding en 2020.
1. Inventaire des composants
Repertorier et automatiser les elements de branding via les styles et variants Figma (logos, typographie, couleurs).
Product Designer
Outils : Figma.
2. Echelle typographique
Creer l'echelle typographique et les règles responsive.
Product Designer
Outils : Figma.
3. Librairie UI
Développer la bibliotheque de composants complexes : navigation, formulaires, patterns récurrents.
Product Designer
Outils : Figma.
4. Librairie d'icones
Creer une librairie d'icones coherente avec l'identite visuelle.
Product Designer
Outils : Figma.
5. Iterations
Mener des iterations régulières pour maintenir le Design System a jour.
Product Designer + Dev
Outils : Figma.
Outils recommandés : Figma.
3. Design System d'une scale-up B2B SaaS
PlayPlay est la solution de création video leader en Europe, avec plus de 1500 entreprises clientes. L'équipe Design a structure un Design System pour supporter la croissance rapide du produit.
1. Composants partages
Librairie de composants Figma accessible a l'ensemble de l'équipe produit et engineering.
2. Tokens de design
Couleurs, typographies et espacements centralises pour garantir la cohérence visuelle.
3. Documentation
Guidelines et bonnes pratiques documentees pour faciliter l'onboarding des nouveaux designers.
Outils recommandés : Figma.
4. Outils, impact et challenges
Captain Contrat est une plateforme juridique qui facilite la vie des entrepreneurs. L'équipe Design a mis en place un Design System avec une documentation sur Zeroheight.
1. Limiter les coûts
Eviter de multiplier les templates et composants pour reduire les coûts de développement et de maintenance.
2. Onboarding facilite
Faciliter l'intégration de nouveaux designers grâce à une conception encadrée par le Design System.
3. Autonomie des équipes
Augmenter l'autonomie des équipes non-design (présentations, illustrations, icones). Formations Figma en interne.
4. Communication
Faciliter les echanges entre designers et développeurs. Homogeneiser les interfaces.
1. Temps dédié
Chaque designer dispose d'un temps dédié par mois pour travailler sur le Design System.
Product Designer
Outils : Figma.
2. Backlog composants
Backlog des mises a jour et ajouts de composants repertorie dans Trello.
Product Designer + Dev
Outils : Trello.
3. Quick-wins days
Les développeurs creent ou mettent a jour les composants lors de quick-wins days.
Dev
Outils : Github.
4. Documentation
Documentation du Design System dans Zeroheight. Specs des composants dans Github.
Product Designer
Outils : Zeroheight, Github.
"Maintenir deux sources de documentation sans decalage n'est pas évident pour une petite équipe. On se concentre sur Figma et on garde Zeroheight en reference."
Outils recommandés : Figma, Trello, Github, Zeroheight.
5. Migration vers Figma et adoption progressive
Partoo est une scale-up SaaS B2B qui aide les commerces locaux a se rapprocher de leurs clients. L'équipe a migre d'InVision vers Figma pour construire son Design System.
1. Gain de temps
Acceleration de la création et mise a jour des prototypes.
2. Tests paralleles
Facilite pour tester plusieurs versions en parallele.
3. Communication
Amelioration de la communication entre les équipes produit, design et engineering.
Outils recommandés : Figma.
6. Le Design System Nacre
Weezevent équipe plus de 300 000 organisateurs d'événements avec 4 produits SaaS (billetterie, cashless, controle d'acces, CRM). Le Design System Nacre est une librairie de composants React.
1. Co-création
Le Design System est co-construit par Product Design, Product Management et Engineering.
2. Atomic Design
Architecture inspiree du Modular Design de Brad Frost. Atomes, molecules, organismes, templates, pages.
3. Fonctionnalités
Penser fonctionnalités et non pas écrans. Composants generiques et adaptables aux 4 produits.
| Concept | Description |
|---|---|
| Reconnaissable | Identite visuelle forte, attachement emotionnel |
| Reutilisable | Composants generiques |
| Persistant | Maintenable dans le temps |
| Accessible | Co-création, utilisable par toutes les équipes |
| Personnalisable | Adaptable aux 4 produits, declinaisons |
Reconnaissable
Identite visuelle forte, attachement emotionnel
Reutilisable
Composants generiques
Persistant
Maintenable dans le temps
Accessible
Co-création, utilisable par toutes les équipes
Personnalisable
Adaptable aux 4 produits, declinaisons
| Role | Responsabilite |
|---|---|
| Product Design | Gardien du DS, co-responsable, initie les composants, documentation |
| Product Manager | Co-responsable, a l'initiative des besoins fonctionnels |
| Engineers | Co-responsable, documentation Nacre, operateur des composants |
Product Design
Gardien du DS, co-responsable, initie les composants, documentation
Product Manager
Co-responsable, a l'initiative des besoins fonctionnels
Engineers
Co-responsable, documentation Nacre, operateur des composants
Outils recommandés : Confluence, Sketch, Zeplin, Nacre (React).
7. Design System pour l'insertion professionnelle
Jobteaser aide les jeunes dans leur orientation et insertion professionnelle. L'équipe Product Design a construit un Design System pour accompagner la croissance du produit.
1. Multi-plateforme
Design System adapté aux différentes interfaces : espace etudiant, espace ecole, espace entreprise.
2. Design tokens
Systeme de tokens pour les couleurs, typographies et espacements, partage entre design et code.
3. Gouvernance
Équipe tripartite (Martin Boisrame, Julien Boucry, Marie-Eve Journet) pour piloter l'evolution du système.
Outils recommandés : Figma.
8. Le déploiement du DS de Mirakl
Mirakl partage son retour d'expérience sur le déploiement de son Design System dans cette video.