Un design system bien pensé est le secret des équipes qui livrent vite sans sacrifier la cohérence. Après avoir implémenté des systèmes de composants sur plusieurs projets React, voici les patterns qui fonctionnent vraiment en production.
Pourquoi un Design System ?
Un design system n'est pas juste une bibliothèque de composants. C'est un langage commun entre designers et développeurs qui accélère le développement tout en garantissant une expérience utilisateur cohérente.
Sans système établi, chaque nouveau composant réinvente la roue : marges différentes, couleurs légèrement décalées, comportements incohérents. La dette UI s'accumule rapidement.
Les bénéfices sont mesurables : réduction du temps de développement de 30-50%, moins de bugs visuels, onboarding des nouveaux développeurs facilité, et une base de code plus maintenable.
Design Tokens : La fondation
Les tokens sont les valeurs primitives de votre système : couleurs, espacements, typographies, ombres, rayons de bordure. Ils constituent le vocabulaire de base.
Définissez-les dans un fichier centralisé (CSS variables ou fichier de configuration). Chaque composant référence ces tokens plutôt que des valeurs en dur.
Organisez les tokens en couches : primitifs (blue-500), sémantiques (primary, background), et composants (button-bg, card-shadow). Cette hiérarchie facilite le theming.
/* index.css - Design Tokens */
:root {
/* Primitives */
--color-ink-900: 222 47% 11%;
--color-cream-50: 45 29% 97%;
/* Semantic */
--background: var(--color-cream-50);
--foreground: var(--color-ink-900);
--primary: 222 47% 20%;
/* Component-level */
--button-bg: hsl(var(--primary));
--card-shadow: 0 4px 12px hsl(var(--foreground) / 0.1);
}Architecture des composants
Adoptez une structure atomique : atoms (Button, Input), molecules (SearchBar, Card), organisms (Header, ProductGrid). Chaque niveau compose les niveaux inférieurs.
Utilisez des variants plutôt que des props multiples. Un composant avec 10 props booléennes devient vite ingérable. CVA (Class Variance Authority) structure élégamment les variants.
Préférez la composition à l'héritage. Un composant Dialog qui contient DialogHeader, DialogBody, DialogFooter est plus flexible qu'un composant monolithique avec des props pour chaque section.
// Button avec variants CVA
import { cva, type VariantProps } from "class-variance-authority";
const buttonVariants = cva(
"inline-flex items-center justify-center font-medium transition-colors",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
outline: "border border-input bg-background hover:bg-accent",
ghost: "hover:bg-accent hover:text-accent-foreground",
},
size: {
sm: "h-9 px-3 text-sm",
md: "h-10 px-4",
lg: "h-11 px-8 text-lg",
},
},
defaultVariants: {
variant: "default",
size: "md",
},
}
);Tailwind CSS : Configuration avancée
Étendez tailwind.config.ts pour refléter vos tokens. Les utilitaires générés automatiquement (bg-primary, text-muted) s'intègrent naturellement au workflow.
Créez des plugins Tailwind pour des utilitaires récurrents. Un plugin 'sketch-shadow' évite de répéter les mêmes classes complexes sur chaque composant.
Utilisez @layer components pour les styles composés récurrents. Cela maintient la spécificité CSS sous contrôle tout en réduisant la duplication.
Documentation et adoption
Un design system sans documentation est inutile. Storybook est l'outil de référence : chaque composant documenté avec ses variants, ses props, et des exemples d'usage.
Incluez des guidelines d'usage, pas seulement une référence technique. Quand utiliser un Button 'outline' vs 'ghost' ? Dans quel contexte choisir une Card vs un simple conteneur ?
Mesurez l'adoption. Combien de composants custom vs composants système ? Les nouveaux développeurs utilisent-ils naturellement le système ? Itérez en fonction des retours.
Conclusion
Un design system efficace évolue avec votre produit. Commencez petit avec vos composants les plus utilisés, documentez-les correctement, et étendez progressivement. L'investissement initial se rentabilise rapidement en vélocité et en cohérence sur le long terme.