Design system
Définition
Que veut dire
Design system
?
La définition technique
Un design system est une documentation vivante qui centralise l'ensemble des décisions de design d'une marque : palette de couleurs, typographies, espacements, grilles, composants UI (boutons, cartes, formulaires, alertes) et règles d'usage. C'est à la fois un outil de production — on réutilise les composants au lieu de les recréer — et une référence de cohérence — chaque décision visuelle est documentée et partagée.
Dans Webflow, le design system prend la forme de styles globaux (couleurs, typographies, effets) et de composants réutilisables. Modifier la couleur principale ou le style d'un bouton dans le design system met automatiquement à jour toutes les instances sur le site. C'est ce qui rend un site scalable et maintenable sur le long terme.
En clair
Sans design system, chaque nouvelle page est une négociation — le développeur recréé un bouton légèrement différent, le designer utilise une nuance de bleu qui dérive de 10 %, le client ajout un texte avec la mauvaise police. Avec un design system, tout le monde parle le même langage visuel. C'est un investissement en début de projet qui se rembourse dès la deuxième page créée.
Design system vs charte graphique : la nuance
- Une charte graphique est un document (PDF, Figma) qui décrit les règles visuelles d'une marque : logo, couleurs, typos. C'est une référence statique.
- Un design system est un outil vivant et interactif — des composants réutilisables, des règles implémentées dans le code ou l'outil de design, qui évoluent avec le produit. C'est une charte graphique que le site applique lui-même.
Une charte sans design system reste théorique. Un design system sans charte est incomplet. Les deux sont complémentaires.
La réalité web : ce qu'un design system change sur un projet
Sur un projet Webflow bien structuré, le design system permet de :
- Créer de nouvelles pages 3x plus vite : les composants existent déjà, il suffit de les assembler.
- Modifier l'identité visuelle sans refonte : changer la couleur principale se fait en un clic dans les styles globaux.
- Maintenir la cohérence sans effort : il est impossible d'utiliser le "mauvais" bouton si le bon est le seul disponible dans la bibliothèque.
Les questions en lien avec ce terme.
Tous les sites ont-ils besoin d'un design system ?
Pas forcément pour un one-pager ou une landing page simple. En revanche, dès qu'un site dépasse 5 à 10 pages et que plusieurs personnes travaillent dessus, un design system devient indispensable. C'est l'assurance qualité de l'identité visuelle sur le long terme.
Où est construit le design system dans un projet Webflow ?
Dans les styles globaux Webflow (couleurs, typographies, effets), dans les composants réutilisables, et idéalement documenté dans une page de style guide intégrée au projet. Cette page liste tous les composants disponibles avec leurs états (hover, focus, disabled) pour référence.
Un design system Webflow est-il lié à Figma ?
Idéalement oui. On conçoit d'abord le design system dans Figma — avec des variables, des composants et des styles — puis on le transpose dans Webflow. Les deux doivent rester synchronisés pour que la collaboration designer/développeur soit fluide.
Peut-on modifier un design system en production ?
Oui — et c'est justement son intérêt. Une modification dans le design system se propage automatiquement à toutes les pages. Mais une modification mal réfléchie peut créer des incohérences à grande échelle. Tout changement doit être testé et validé avant d'être publié.
