En bref
Un design system est une bibliothèque de référence qui réunit en un seul endroit la charte graphique et la charte ergonomique d’une marque : composants UI (boutons, champs, cartes, modales), règles typographiques, palette de couleurs, icônes, patterns d’interaction et guidelines éditoriaux. Il sert de source de vérité unique pour les équipes design, développement et marketing, garantissant la cohérence visuelle et fonctionnelle sur tous les produits digitaux — site institutionnel, espace client, parcours de souscription, application mobile. Pour un assureur ou une mutuelle qui opère plusieurs interfaces en parallèle, le design system est un investissement structurant qui réduit le temps de production, limite les incohérences entre les canaux, facilite les évolutions futures et améliore l’accessibilité en centralisant les bonnes pratiques RGAA dans les composants eux-mêmes.
Véritable guide pour les designers et les développeurs, le design system regroupe tout un ensemble d’éléments permettant de faciliter le travail des équipes mais également d’améliorer l’expérience utilisateur. Qu’appelle-t-on alors un Design Système ? Comment le construire ? Quels sont ses avantages et inconvénients ? Les réponses à toutes vos questions sont dans cet article.
C’est quoi un design system ?
Le design system reprend à la fois la charte ergonomique et la charte graphique. Plus précisément, il s’agit d’un guide au service des développeurs et des designers dans le but de créer un site web ou tout autre produit digital.
Ce guide (ou bibliothèque) est à disposition de toutes les personnes participant au projet, que ce soit lors du design, de la conception, du prototypage, ou encore de la production. Les éléments de la bibliothèque peuvent être accessibles en ligne ou sur le cloud. Tous les départements peuvent ainsi y avoir accès afin de créer un nouveau produit ou pour le faire évoluer.
Définition : Le Design System est une bibliothèque de référence et un guide qui unifie chartes ergonomique et graphique digitales. Il fournit des composants prêts à l’emploi aux équipes UX, techniques et design, garantissant ainsi la cohérence de l’expression digitale de la marque dans tous ses produits et services.
En amont de la création du design system, il est primordial de réfléchir à l’image de marque de l’entreprise et de répertorier l’ensemble des éléments existants.
Les composants du design system
Le design system est souvent confondu avec les mots de bibliothèques, lignes directrices, styleguide ou encore langage visuel. En réalité, il reprend l’ensemble de ces éléments afin d’aider les développeurs et designers à créer un ensemble cohérent.
Chaque entreprise peut définir elle-même les composants de son design system. De manière générale, certains points communs réapparaissent :
- Composant UI (interface utilisateur)
- Patterns
- Typographie
- Couleur
- Icône et image
- Grid layout (principes déterminant la structure des éléments, les espaces, etc)
- Tonalité
- Éléments réutilisables de l’UI
Comment créer un Design System ?
Les étapes
Créer un design system nécessite l‘intervention d’une multitude de collaborateurs et surtout un développement dans le temps. En effet, ce système a pour vocation d’évoluer au même rythme que la marque. Ce n’est donc pas un outil linéaire. Néanmoins, quelques étapes doivent être intégrées dans la création du design system :
- Définir ses objectifs : quelles sont les problématiques de l’entreprise ? Pourquoi a-t-elle besoin d’un design system ? La création d’un design system peut intervenir dans le cadre d’une création ou refonte de site, d’un parcours ou d’un espace client.
- Mener des audits UI : l’audit doit porter au niveau du design, du front end, etc. Il faut parler à la fois avec les utilisateurs du système mais également les internautes qui représentent les utilisateurs finaux.
- Définir les solutions en fonction de son budget, de ses priorités, de ses délais, etc.
- Définir un langage compréhensible par tous les intervenants.
- Construire le design system.
- Faire évoluer le design system.
La différence entre Design System, Charte Digitale, UI toolkit et Atomic Design
Un design system est une collection complète et organisée d’éléments, principes et directives qui assurent la cohérence visuelle et fonctionnelle d’un produit numérique. Il sert de référence centralisée pour toutes les équipes impliquées dans le développement.
Une charte digitale, issue elle-même de la charte graphique, quant à elle, est un document plus restreint qui définit les règles visuelles fondamentales (couleurs, typographie, ton éditorial) sans nécessairement inclure les composants interactifs ou le code.
L’UI toolkit représente spécifiquement la bibliothèque de composants d’interface utilisateur réutilisables et prêts à l’emploi, souvent accompagnés de leur code.
L’atomic design, conceptualisé par Brad Frost est une méthodologie particulière de construction d’un design system qui décompose l’interface en cinq niveaux hiérarchiques (atomes, molécules, organismes, templates et pages) permettant une approche modulaire et évolutive. Alors que le design system englobe tous ces concepts, chacun joue un rôle distinct dans la création d’expériences numériques cohérentes.
Les outils pour créer un Design System
Figma
Un design system créé sous Figma offre de nombreux avantages stratégiques pour votre équipe et vos produits. Il garantit une cohérence visuelle à travers toutes vos interfaces, tout en accélérant considérablement les flux de travail grâce à des composants réutilisables et des mises à jour centralisées. La collaboration en temps réel de Figma permet à plusieurs designers de travailler simultanément, tandis que la documentation intégrée assure que chacun comprend et applique correctement les règles établies. La transition entre design et développement devient plus fluide grâce aux outils d’inspection avancés, et l’architecture évolutive du système s’adapte facilement à la croissance de votre entreprise. Enfin, le prototypage rapide avec des composants existants accélère les tests et validations, créant ainsi un cycle de développement plus agile et réactif.
C’est le standard de fait de l’industrie
Sketch, Adobe XD, Axure…
Sketch a longtemps été un outil de design populaire. À l’origine, il était plutôt utilisé dans l’esprit de Photoshop. Mais avec le développement du design system, Sketch permet de créer des guidelines pour les designers et développeurs. Adobe XD et Axure font aussi partie des outils assez utilisés en DS.
Différents exemples de Design System assurance
| Design System | Entreprise | Lien URL |
|---|---|---|
| MAIF Design System | MAIF | https://design.maif.fr/ |
| Harmonie Mutuelle Design System | Harmonie Mutuelle | https://zeroheight.com/2f2e0f521/p/28a30a-get-started/b/229045 |
| MSA Design System | MSA – Mutualité Sociale Agricole | https://design.msa.fr/ |
| BPCE Design System (NEO3) | Groupe BPCE | https://neo3.bpce.design/ |
| AXA Design System | AXA | https://designsystem.axa.com/ |
| Malakoff Humanis | Malakoff Humanis | https://design-system.malakoffhumanis.com/?path=/story/angular-components-upload-file–default-template-setup |
| L’Assurance Maladie | CPAM | https://digital-design-system.netlify.app/demarrer/introduction |
| Chroma | IAG (Assurance Australie) | https://chromadesignsystem.com/10.0.0/chroma/docs/getting-started/start-designing |
Quels sont les avantages et inconvénients d’un Design System ?
Avantages
Les avantages du design system sont multiples :
- Un design cohérent pour le site dans son intégralité, mais également pour tous les autres éléments web, comme une application mobile. Cela permet ainsi de diminuer la dette design (autrement dit, un manque de cohérence du site nécessitant un coût colossal pour rattraper ce retard).
- Une meilleure expérience utilisateur ; la cohérence permet d’éviter les frustrations des utilisateurs qui ne reconnaissent plus la marque. Et surtout, grâce au gain de temps gagné par le design system, les designers et développeurs ont plus de temps à consacrer à l’expérience utilisateur.
- La réutilisation des composants pour faire évoluer l’interface facilement.
- Une meilleure communication entre les différentes équipes grâce au langage partagé. Ainsi, la dette technique diminue davantage (cela correspond aux variations d’implémentation selon les équipes, des non-optimisations de codes, etc.).
- Une production plus efficace et des tests plus rapides.
- Une scalabilité : grâce à cette méthode, l’entreprise peut faire évoluer son site web, tout en économisant son temps et son argent.
En moyenne, les entreprises utilisant le design system constatent, en moyenne, des économies de l’ordre de 25 %. Et cette rentabilité est constatée dès le premier projet.
Inconvénients
Le design system est surtout adapté aux grandes entreprises mais pas seulement. En effet, si les équipes de designers et développeurs sont très restreintes, il ne sera pas nécessaire. Cependant, il ne faut pas attendre d’avoir une dette technique trop importante pour le mettre en place.
Il peut y avoir un risque d’appréhender ce système sous un angle trop professionnel. Or, dans la conception d’un site web, l’objectif final reste l’amélioration de l’expérience utilisateur.
Un site web regroupant tous les Design Systems Open Source en France
Pour téléchargez des Design Systems au format PDF ou Sketch, retrouvez le sur https://www.designsystems.fr/liste-des-designs-systems-francais
Questions fréquentes sur le Design System assurance
Quelle est la différence entre un design system, une charte graphique et un styleguide ?
Ces trois notions sont complémentaires mais distinctes. La charte graphique définit les règles visuelles de la marque (couleurs, typographie, logo, usages autorisés) — c’est le document de référence de l’identité de marque, souvent en format print. Le styleguide est l’adaptation de la charte graphique au web, avec les valeurs hexadécimales des couleurs, les tailles de polices en pixels et les règles de mise en page responsive. Le design system va plus loin : il inclut les composants UI codés et réutilisables, les patterns d’interaction définis, les tokens de design (variables partagées entre design et code), et la documentation associée. Un design system mature est vivant — il est mis à jour, versionné et gouverné par une équipe dédiée.
Pourquoi un assureur ou une mutuelle devrait-il investir dans un design system ?
Pour un acteur de l’assurance qui opère simultanément un site institutionnel, un ou plusieurs parcours de souscription, un espace adhérent et potentiellement une application mobile, l’absence de design system génère des incohérences visuelles et fonctionnelles qui nuisent à la confiance et augmentent les coûts de maintenance. Avec un design system, chaque nouveau composant ou interface est construit à partir de briques validées, ce qui réduit les temps de développement, facilite les tests d’accessibilité (les composants sont conformes RGAA par défaut) et assure une cohérence de l’expérience utilisateur quel que soit le point de contact. Le ROI se mesure sur plusieurs projets successifs — c’est un investissement dont les bénéfices s’accumulent dans le temps.
Quels sont les outils les plus utilisés pour construire et maintenir un design system en assurance ?
Sur la partie design, Figma s’est imposé comme l’outil de référence pour la création et la documentation des composants (libraries Figma partagées entre designers). Sur la partie code, Storybook permet de documenter et tester les composants UI dans un environnement isolé, quelle que soit la technologie front-end (React, Vue.js, Angular). La chaîne design-to-code peut être outillée avec des plugins de synchronisation Figma-Storybook pour garantir la cohérence entre les spécifications de design et les composants développés. Pour les tokens de design (couleurs, typographie, espacements), des outils comme Style Dictionary permettent de générer automatiquement les variables CSS ou JS à partir des sources Figma.
Comment intégrer les exigences d'accessibilité RGAA dans un design system assurance ?
Le design system est le meilleur endroit pour industrialiser la conformité RGAA : en définissant une fois pour toutes les ratios de contraste conformes au niveau AA pour chaque combinaison couleur/fond, les états de focus visibles pour la navigation clavier, les aria-labels et rôles ARIA des composants interactifs, et les comportements adaptés aux lecteurs d’écran. Chaque composant documenté peut inclure une checklist d’accessibilité et les critères RGAA couverts. Cette approche garantit que les nouvelles interfaces construites sur le design system héritent de la conformité par défaut, sans avoir à réauditer chaque page individuellement. C’est particulièrement précieux dans le contexte de la directive européenne sur l’accessibilité numérique, dont les obligations s’étendent au secteur privé à partir de 2025.
Design System : accélérez vos déploiements digitaux. Contactez-nous ?
Tous les détails sur notre page contact ou en visio ci-dessous
Échangeons sur vos enjeux
47 références dans l’assurance : ils nous font confiance
Mutuelles santé : VIASANTÉ (AG2R La Mondiale), MGEN, Harmonie Mutuelle, Mutuelle Bleue, LMDE, Intériale, CCMO Mutuelle, Mutualia, MCEN, Identités Mutuelle, Avenir Mutuelle, MCVPAP, Uneo, Identités Mutuelle, Aésio, Garance, La France Mutualiste. Assureurs : Covéa (MAAF, MMA, GMF), MACSF, Thélem Assurances, Garex, Markel. Bancassureurs : BNP Paribas Cardif, Crédit Agricole Assurances, Mobilize (Renault/DIAC). Institutions de prévoyance : KLESIA, CAPSSA, IPECA, Apicil, ADIS/AGIPI (AXA), IRCEM. Courtiers et écosystème : Planète CSCA, Collecteam, Solly Azar, Sodedif, Rambaud Labrosse, Expertises Galtier, EDI Courtage, Galian, Carco. Autres : La Médiation de l’Assurance, ALFA/France Assureurs, CCR, APREF.
