Un design system ne se résume pas à une bibliothèque Figma. C’est l’ensemble des règles, des fondations et des composants qui permettent à vos équipes de construire un produit cohérent sans tout redessiner. Bien conçu, il fait gagner du temps à chaque sprint. Mal conçu, il devient un fichier que plus personne n’ouvre.
Ce guide rassemble ce qu’il faut savoir pour lancer, reprendre ou faire vivre un design system : à quel moment le structurer, ce qu’il contient, comment le construire, ce qu’il coûte, comment le rendre accessible et lisible par les outils d’IA. Chaque partie renvoie vers un article qui approfondit le sujet.
Un design system est une source de vérité partagée entre le design et le développement. Il réunit trois couches :
La différence avec un UI kit tient à cette troisième couche, et à l’alignement avec le code. Un UI kit montre à quoi ressemblent les éléments. Un design system dit comment s’en servir, et ce qui est livré en production correspond à ce qui est dessiné.
Tant qu’un seul designer travaille sur un seul produit, on peut s’en passer. Le besoin apparaît dès que le produit se multiplie : plusieurs interfaces (site, application, back-office), plusieurs équipes ou prestataires, des versions successives. Trois signaux reviennent souvent : on passe plus de temps à chercher un composant qu’à le créer, deux éléments identiques ont des réglages différents, et chaque nouvelle fonctionnalité réintroduit des incohérences.
Nous détaillons ces signaux dans Design system : à quel moment faut-il vraiment le structurer ?. Les gains attendus sont présentés dans Pourquoi le design system est l’investissement n°1 pour votre produit.
Si un design system existe déjà mais n’est plus utilisé, le point de départ est différent : il faut d’abord un diagnostic. Notre grille d’audit de design system détaille les points à vérifier.
Le coût dépend surtout du périmètre : nombre de produits et de plateformes couverts, part de l’existant à reprendre, nombre de composants, niveau d’accessibilité visé, profondeur de la documentation et accompagnement du déploiement. Il faut aussi prévoir le coût de la maintenance, souvent oublié.
Nous détaillons ces postes, et la façon de juger si l’investissement est rentable, dans Combien coûte un design system ?.
Les SaaS B2B, les outils métier et les plateformes data posent des problèmes spécifiques : tableaux denses, filtres, exports, états vides, permissions, messages d’erreur métier. Un design system pensé pour un site vitrine n’y suffit pas. Nous avons rencontré ces enjeux sur des interfaces comme celle de Dédale, et nous les détaillons dans Design system pour SaaS B2B : composants, tableaux, états.
Le design system est le meilleur levier pour l’accessibilité numérique. Un contraste, un état de focus ou un libellé corrigé dans un composant est corrigé partout où il est utilisé. À l’inverse, un composant inaccessible diffuse le défaut dans tout le produit.
C’est particulièrement utile pour les organisations soumises au RGAA ou à l’European Accessibility Act. Voir Design system et accessibilité RGAA.
Les équipes produit utilisent de plus en plus des outils d’IA pour générer des maquettes, des prototypes et du code front. Ces outils lisent vos fichiers et votre documentation. Si les règles restent implicites, ils les devinent, et se trompent.
Rendre un design system exploitable par l’IA, ce n’est pas en créer un nouveau. C’est rendre explicite ce qu’un designer senior sait sans l’écrire, avec un nommage identique partout et une documentation courte. Nous avons détaillé la méthode dans Design system exploitable par Claude : les 10 règles à connaître et Design system sobre : pourquoi une documentation concise rend Claude meilleur. Pour situer votre design system, vous pouvez faire notre autodiagnostic en 20 questions.
La plupart des design systems ne meurent pas d’un mauvais départ, mais d’un manque de suivi. Sans responsable, sans règle de contribution et sans versions, les équipes recommencent à créer leurs propres composants. Il faut donc décider dès le départ qui maintient le système, comment on propose un nouveau composant et comment on annonce les changements. Voir Gouvernance du design system : qui le maintient après la livraison ?.
Nous intervenons sur quatre situations : la création d’un design system, l’audit et la refonte d’un design system existant, la mise en conformité pour l’IA, et la maintenance en régie par un designer intégré à vos équipes. Le design system d’Ooinvestir, créé après le pivot du produit, illustre la démarche : audit des maquettes, nouvelle palette accessible, composants construits avec le développeur front.
Vous partez de zéro, votre design system a perdu ses utilisateurs ou vous voulez le rendre lisible par l’IA ? Nous commençons par un échange pour comprendre votre produit et vos équipes.
👉 Découvrir l’offre design system de Wolfox
