Un design system, c'est souvent l'investissement le plus rentable d'une PME tech. Bien fait, il divise par 3 le temps de design et par 2 le temps de dev. Mal fait, c'est un cimetière de composants Figma jamais réutilisés.
Voici la méthode RYADESIGN pour construire un design system PME — appliquée chez NovaBank (120 composants en 6 mois), MAAF (espace client 4M users), AFPA (50 000 utilisateurs).
Qu'est-ce qu'un design system ?
Un design system, c'est 3 couches :
- Foundation : tokens (colors, typo, spacing, radius, shadow, motion).
- Components : briques UI réutilisables (boutons, inputs, cards, modals).
- Patterns : assemblages récurrents (form de contact, header, dashboard layout).
Plus un guide d'usage (do/don't, accessibility, code snippets) qui rend le système autonome.
Étape 1 : audit de l'existant (1-2 sem)
Avant de construire, on photographie ce qui existe. Méthode : capture de 50+ écrans existants, extraction de tous les composants (manuelle ou via plugin Figma type Design Lint).
Sortie : un inventaire qui dit "on a 14 variantes de boutons, 9 inputs, 6 modals — il faut converger".
Étape 2 : tokens (1 sem)
On fixe les fondations avant de toucher aux composants :
- Colors : 6 couleurs primaires max + 3 sémantiques (success, warning, error) + 6 niveaux de gris. Pas 47 couleurs (vrai cas chez un client en 2023).
- Typo : 2 familles max (1 sans-serif principale + 1 serif d'accent). 5-7 niveaux de tailles. 3-4 graisses.
- Spacing : 4, 8, 12, 16, 24, 32, 48, 64, 96 (échelle 4/8). Pas de 13 px, 17 px, 21 px.
- Radius : 4, 8, 14, 18, 24 + pill (99). Pas plus.
- Shadow : 4-5 niveaux (xs, sm, md, lg, xl).
- Motion : 2-3 easings + 4 durées.
Tokens stockés en JSON (Style Dictionary, Tokens Studio) pour génération auto en CSS/Tailwind/iOS/Android.
Étape 3 : composants core (4-8 sem)
Pas tous les composants d'un coup. 10-15 composants core couvrent 80 % des écrans :
- Button (5 variantes : primary, secondary, ghost, danger, link).
- Input + Label + Error message.
- Select / Combobox.
- Checkbox + Radio + Switch.
- Card.
- Badge / Tag.
- Avatar.
- Modal / Dialog.
- Dropdown menu.
- Toast / Snackbar.
- Tooltip.
- Tabs.
- Table / Datatable.
- Pagination.
- Loader / Skeleton.
Pour chaque : anatomy + props + 6 états (default, hover, focus, active, disabled, loading) + a11y + do/don't.
Étape 4 : patterns (2-4 sem)
Les patterns sont les assemblages récurrents. Ils utilisent les composants core :
- Header / Nav.
- Footer.
- Form de contact / signup / login.
- Card produit / projet.
- Dashboard layout.
- Empty state.
- Error pages (404, 500).
- Loading state.
- Confirmation flow (suppression).
- Onboarding screens.
Étape 5 : gouvernance (continu)
Un design system sans gouvernance meurt en 6 mois. 4 règles :
- 1 owner dédié (50 % temps minimum). Pas 5 personnes 10 %, sinon ça flotte.
- Process d'évolution : RFC (Request For Component) pour proposer un nouveau composant. Review hebdo. Décision en 7 jours max.
- Versioning sémantique (semver). Breaking changes annoncés 30 jours avant.
- Office hours : 1h/sem où les équipes peuvent poser des questions sur le système.
Le ROI mesurable
Mesures réelles chez NovaBank après 6 mois de design system :
- Temps de design d'un nouvel écran : 3,5 jours → 1 jour (−71 %).
- Temps de dev d'un nouvel écran : 5 jours → 2 jours (−60 %).
- Incohérences UI rapportées : 47 → 6 par sprint (−87 %).
- Onboarding nouveau designer : 3 semaines → 5 jours (−76 %).
- Coût total système (6 mois) : ~ 65 000 €. ROI atteint en 4 mois.
Combien ça coûte
Design system PME :
- Petit système (15-25 composants, 1 produit) : 9 900-24 900 €, 6-12 sem.
- Moyen système (40-70 composants, 2-3 produits) : 25 000-45 000 €, 3-5 mois.
- Système complet (100+ composants, multi-produits, multi-plateformes) : 45 000-90 000 €, 5-8 mois.
Si tu veux qu'on évalue ce dont tu as besoin pour ton produit (souvent moins qu'on ne croit), 30 min d'appel gratuit. Et notre Playbook PM contient 4 prompts spécifiques design system pour accélérer la doc.