Design system : définition, contenu, coût et exemples

Design system : la définition simple

Un design system est une source unique de vérité pour l'interface. Il dit quelles couleurs, quelles tailles et quels composants existent, comment on les combine, et pourquoi.

La différence avec un simple dossier de maquettes tient en un mot : réutilisation. Un bouton est dessiné une fois, codé une fois, documenté une fois. Ensuite, chaque page l'utilise tel quel.

Un design system bien fait répond à trois questions qu'une équipe se pose tous les jours :

• Quoi utiliser. La liste des composants disponibles et leurs variantes.
• Comment l'utiliser. Les règles d'usage, les cas interdits, les exemples.
• Pourquoi c'est comme ça. Les principes qui permettent de trancher un cas que la documentation n'a pas prévu.

Le terme vient du produit numérique. Il s'applique aussi à un site marketing dès qu'il dépasse quelques pages et que plusieurs personnes le font évoluer.

Ce que contient un design system

On peut découper un design system en quatre briques. Les trois premières se voient. La quatrième fait la différence entre un système vivant et un fichier Figma oublié.

Les design tokens

Les tokens sont les plus petites décisions de design, stockées sous forme de variables : une couleur, un espacement, une taille de police, un rayon d'angle, une ombre. Ils sont lus à la fois par l'outil de design et par le code.

Le format progresse vers un standard commun. Le W3C Design Tokens Community Group a publié la première version stable de sa spécification de format, la 2025.10, pour que Figma, les outils et le code parlent la même langue.

Les composants

Ce sont les briques d'interface réutilisables : bouton, champ de formulaire, carte, menu, onglets, modale. Chaque composant a ses états (survol, désactivé, erreur) et ses variantes (primaire, secondaire). Si vous voulez la logique d'emboîtement, notre article sur l'atomic design et ses cinq niveaux la détaille.

Les règles d'usage

Un composant sans règle finit détourné. Les règles disent quand utiliser un bouton primaire (une fois par écran), quelle longueur de libellé tenir, quel contraste respecter, comment se comporte la grille en mobile.

La documentation et la gouvernance

C'est le site ou la page qui rassemble tout, avec un responsable, un circuit de demande de nouveau composant et un historique des versions. Sans gouvernance, chaque équipe recrée son propre bouton en six mois.

Design system, charte graphique, UI kit : les différences

C'est la confusion la plus fréquente. La charte graphique dit à quoi ressemble la marque, sur tous les supports. Le design system dit comment l'interface se construit, écran par écran. L'UI kit n'est qu'une partie du design system : la bibliothèque de composants dessinés, sans les règles ni le code.

Le design system ne remplace pas la charte. Il en hérite. Les couleurs et la typographie de l'identité visuelle deviennent des tokens, puis des composants.

Un exemple concret : les tokens de la charte Synqro

Plutôt qu'un exemple théorique, voici comment notre propre charte devient un design system. Elle tient en peu de décisions, et c'est volontaire.

• Couleurs. Bleu #285EFF, nuit #051A2A, gris clair #F4F4F4. Un seul accent, le bleu.
• Typographie. PP Neue Montreal, en Regular 400 pour les titres et en Medium 500 pour les boutons.
• Formes. Des angles de 2 px, pas d'arrondi large.

Transformées en tokens, ces décisions ne sont pas nommées par leur valeur mais par leur rôle. On n'écrit pas « bleu-285 », on écrit « couleur-action ». Le jour où l'accent change, une seule variable bouge et tout le site suit.

Chez Synqro, on pense qu'un design system se juge à ce qu'il interdit. Un seul accent et un rayon unique de 2 px empêchent la dérive classique, où chaque nouvelle page ajoute sa nuance de bleu et son arrondi. Moins de tokens, c'est moins de décisions à refaire.

Quand une PME ou une scale-up B2B en a besoin

Un design system coûte du temps à créer et du temps à maintenir. Il se rentabilise quand le nombre de personnes et de pages qui le consomment dépasse un seuil.

Vous en avez besoin si :

• Plusieurs équipes touchent l'interface. Marketing sur le site, produit sur l'application, une agence en renfort.
• Le site grossit vite. Nouvelles landing pages chaque mois, pages produit, versions FR et EN.
• Vous avez un produit SaaS et un site. Les deux doivent parler la même langue visuelle.
• Les incohérences coûtent déjà. Trois styles de boutons, des formulaires différents, des allers-retours en recette.

C'est trop tôt si :

• Vous avez un site vitrine de dix pages géré par une seule personne.
• La marque n'est pas stabilisée. Construire un système sur une identité qui va changer, c'est payer deux fois.
• Il n'y a pas de produit numérique et peu de nouvelles pages prévues.

Notre règle maison : tant que l'interface n'est utilisée que par une équipe et un support, on livre une librairie de composants propre, pas un design system complet avec gouvernance. Le système vient quand un deuxième consommateur arrive.

Comment construire un design system, de Figma à Webflow ou au code

Voici la méthode que l'on suit chez Synqro, dans cet ordre. Chaque étape produit un livrable utilisable, même si le projet s'arrête là.

1. Faire l'inventaire. Capturer tous les boutons, champs, cartes et titres existants. On découvre souvent quatre à cinq versions du même élément.
2. Poser les tokens. Couleurs, espacements, typographies, rayons, nommés par rôle. Dans Figma, on les crée en variables.
3. Dessiner les composants. D'abord les plus utilisés : bouton, champ, carte, en-tête de section. Un motif devient composant quand il revient au moins trois fois.
4. Construire dans l'outil final. Dans Webflow, les tokens deviennent des variables, les classes suivent une convention comme la méthode Client-First, et les blocs deviennent des composants Webflow avec propriétés et variantes. En code, les tokens alimentent les variables CSS et une librairie de composants.
5. Documenter. Une page par composant : à quoi il sert, ses variantes, les erreurs à éviter, un exemple.
6. Gouverner. Un responsable, un circuit de demande, une revue régulière. Chez Synqro, on reprend ce point lors des revues trimestrielles avec les clients que l'on accompagne sur la durée.

Le cas Freelance Republik

Pour la refonte du site de Freelance Republik, le design avait été mené avec l'agence Bruno. Le site comptait vingt pages, chacune avec des mises en page propres à la marque, et une exigence : l'équipe marketing devait pouvoir le faire évoluer en autonomie. Notre travail a consisté à transformer ce design singulier en un système de composants, de sections et de modèles de page réutilisables sur Webflow, sans perdre les mises en page sur mesure qui font la marque.

C'est exactement le rôle d'un design system sur un site marketing : garder la singularité, retirer la dépendance au développeur pour chaque nouvelle page.

Webflow ou code : où vit votre design system

Le choix de l'outil change la façon dont le système est appliqué, pas sa logique.

Pour un site B2B que le marketing doit faire vivre, Webflow est souvent le bon endroit. Quand le même système doit servir une application et un site, on part du code et on garde Webflow aligné sur les mêmes tokens. Si vous partez d'une maquette, notre guide pour créer une maquette de site web sur Figma pose la base.

Combien coûte un design system et en combien de temps

Le budget dépend de ce qu'on appelle design system. Il faut distinguer deux projets très différents.

• Le système d'un site marketing. Tokens, composants et modèles de page livrés avec le site. Chez Synqro, il est compris dans le projet : un site complet coûte de 5 000 à 20 000 € HT et se livre en 8 à 12 semaines.
• Le design system d'un produit. Il couvre l'application, plusieurs équipes, une documentation dédiée et une gouvernance. Son prix dépend du nombre de composants et d'écrans, et il s'étale sur plusieurs mois avec une maintenance continue.

Le coût caché, c'est la maintenance. Un design system qui n'a pas de responsable perd sa valeur en quelques mois, parce que les équipes recommencent à créer en dehors du cadre.

Exemples de design systems publics

Les grands design systems publics sont une bonne école, à condition de ne pas les copier tels quels. Ils répondent à des organisations bien plus grandes que la vôtre.

• DSFR, le Système de Design de l'État. Développé depuis 2020 par le Service d'Information du Gouvernement, il est présenté comme un standard obligatoire pour les sites de l'État au titre de la circulaire n°6411-SG. Le site officiel du DSFR annonce 50 composants et gabarits de pages.
• Carbon, d'IBM. Carbon est le design system open source d'IBM pour ses produits et expériences numériques, avec du code, des outils de design et des règles d'interface.
• Material Design, de Google. La référence la plus connue, très complète, pensée d'abord pour les applications Android et Google.

Ce qu'on retient chez Synqro : tous ces systèmes ont commencé petit, avec des tokens et une poignée de composants. Pour une PME, s'inspirer de leur structure est utile. Copier leur ampleur est une erreur.

Les erreurs qui tuent un design system

• Commencer par les composants rares. Le tableau de données complexe avant le bouton.
• Nommer les tokens par valeur. « Gris-F4 » devient faux dès que la couleur change.
• Garder le système dans Figma seulement. Sans lien avec Webflow ou le code, il diverge en une semaine.
• Oublier la documentation. Un composant non documenté est utilisé de travers.
• Ne nommer aucun responsable. Personne ne dit non, tout le monde ajoute.

Si vous voulez savoir si votre site a besoin d'un système ou d'une simple librairie bien rangée, notre équipe développe des sites Webflow structurés en composants et peut regarder votre interface actuelle. Vous pouvez aussi nous écrire directement.