Design system
Comment on structure les composants pour scaler.
Le design system
Un design system, c'est l'ensemble des règles, tokens et composants qui garantissent la cohérence d'un produit. Bien fait, ça accélère le développement et évite le chaos visuel.
Pourquoi c'est important
Sans design system :
- Chaque nouvelle page réinvente les boutons, les espacements, les couleurs
- Les incohérences s'accumulent
- Le développeur passe son temps à interpréter les maquettes
- Les mises à jour deviennent un cauchemar
Avec un design system :
- On réutilise au lieu de recréer
- Le design reste cohérent même quand l'équipe grandit
- Les développeurs ont des specs claires
- Les évolutions sont centralisées
Ce qu'on met dedans
Tokens (fondations)
Les valeurs de base qui définissent l'identité visuelle :
| Type | Exemples |
|---|---|
| Couleurs | Primaire, secondaire, neutres, états (success, error, warning) |
| Typographie | Familles, tailles, graisses, interlignes |
| Espacements | 4px, 8px, 16px, 24px, 32px, 48px... (échelle cohérente) |
| Ombres | Élévations pour cards, modals, dropdowns |
| Rayons | Arrondis des éléments (4px, 8px, full) |
Composants
Les éléments réutilisables :
- Boutons — primaire, secondaire, ghost, avec leurs états
- Formulaires — inputs, selects, checkboxes, validation
- Cards — structures pour contenus, produits, témoignages
- Navigation — header, footer, menus, breadcrumbs
- Modals & overlays — dialogs, drawers, tooltips
- Feedback — toasts, alertes, skeletons de chargement
Patterns
Les solutions récurrentes :
- Listings avec filtres et pagination
- Formulaires multi-étapes
- Pages produit / service
- Sections hero, features, témoignages
Gouvernance
Un design system qui n'évolue pas meurt. Un design system qui évolue n'importe comment devient le chaos.
Nos règles
- Un propriétaire par composant — quelqu'un est responsable de sa qualité
- Documentation intégrée — chaque composant a ses specs dans Figma et le code
- Évolutions validées — on ne change pas un composant sans review
- Versioning — on sait quelle version est en prod
Ce qu'on livre
- UI Kit Figma — tokens, composants, variants, auto-layout
- Documentation — usage, do/don't, exemples
- Bibliothèque de composants — code prêt à l'emploi (React/Tailwind)
- Guidelines d'accessibilité — contrastes, focus, ARIA
Le design system est livré en même temps que le site. Pas en fin de projet, pas "plus tard".