Design system
Définition
Bibliothèque cohérente de composants visuels réutilisables (boutons, formulaires, cards, typographie). Évite de redessiner les mêmes éléments à chaque écran et garantit la cohérence du produit.
Qu'est-ce qu'un design system
Un design system est une bibliothèque cohérente d'éléments réutilisables couvrant à la fois le design et le code. Côté design : palette de couleurs, typographies, espacements, radius, boutons, formulaires, cards, modales, navigation, illustrations. Côté code : composants React (ou Vue, Angular) qui implémentent ces éléments avec leurs variants, états et règles d'accessibilité. Il garantit que tout l'écosystème (site, produit, e-mails transactionnels, présentations commerciales) parle le même langage visuel. C'est l'inverse du chaos où chaque écran réinvente ses propres choix.
À quoi ça sert
Côté design, le système évite de redessiner les mêmes éléments à chaque écran et accélère drastiquement le maquettage. Côté dev, il sert de bibliothèque de composants prêts à l'emploi qui économisent des semaines de travail. Côté produit, il rend la marque visuellement cohérente sur tous les points de contact. Côté maintenance, modifier une couleur ou un espacement à un seul endroit propage partout. Sur un projet à plusieurs développeurs, c'est aussi un outil de communication : on parle de "Button/Primary/Large" plutôt que d'argumenter sur les couleurs à chaque réunion.
Les briques fondamentales
Un design system se structure en couches. Les tokens (atomes) : couleurs, espacements, typographies, radius, ombres, durées d'animation. Les composants primitifs (molécules) : bouton, input, checkbox, label, badge, divider. Les composants composés (organismes) : formulaire complet, card produit, modal, navigation. Les patterns (templates) : layouts de page, flux d'onboarding, page de paramètres. On construit dans cet ordre, des plus petits aux plus grands. Sauter les tokens et attaquer directement par les composants composés mène à un système incohérent qu'il faut refaire dans six mois.
Construire progressivement
Un design system se construit progressivement, en commençant par les briques les plus utilisées (boutons, inputs, cards, typographies, espacements). Trop ambitieux dès le départ, il devient un projet en lui-même qui consomme tout le temps disponible et finit oublié quand le produit doit avancer. On préfère démarrer minimal sur le MVP, et enrichir au fil des écrans en factorisant ce qui revient. Au bout de six mois, on a un système complet, ancré dans les vrais besoins du produit, et utilisé par tout le monde au quotidien.
Les outils en 2026
Côté design : Figma reste l'outil dominant pour le design system, avec ses Components, Variants et Variables. Côté code : shadcn/ui s'est imposé comme la base de référence pour Next.js, avec des composants accessibles basés sur Radix et stylés via Tailwind. On copie les composants dans son projet plutôt qu'on importe une dépendance, ce qui permet de les modifier librement. Pour des projets plus exigeants, Material UI, Mantine ou Ant Design proposent des systèmes complets. Storybook documente et teste visuellement les composants en isolation.
Les pièges à éviter
Trois pièges classiques. Le perfectionnisme initial : passer trois mois à construire un système avant la première feature livrée, ce qui retarde le produit et démoralise l'équipe. La rigidité : refuser toute exception au système, ce qui force les designers à contourner et crée des incohérences cachées. L'abandon : construire un système puis ne plus le maintenir, ce qui le fait diverger du produit en six mois. La discipline réelle : avoir un owner identifié, des règles d'évolution claires, et un effort continu modeste plutôt qu'un sprint ponctuel.