Le Journal d'UX
L'actualité UX,
au-dessus de la ligne de flottaison.
Wiki UX Design system

Design system

Concept
Définition

Ensemble de composants réutilisables, de patterns et de règles qui permettent de construire des interfaces cohérentes à grande échelle. Un design system inclut une bibliothèque de composants, des tokens de design (couleurs, typographies, espacements), des guidelines d'utilisation et une documentation vivante. Ce n'est pas un kit UI statique : c'est un produit en soi, avec une équipe dédiée, des versions et une roadmap. Il sert de langage commun entre designers et développeurs.

En pratique

Commencer petit : documenter les composants qui existent déjà dans le produit avant d'en créer de nouveaux. Aligner la bibliothèque Figma avec le code. Versionner les composants comme du logiciel. Mesurer l'adoption : un design system que personne n'utilise est un coût sans bénéfice. Prévoir de la gouvernance : qui décide d'ajouter un composant, qui valide les modifications.

Exemple

Le DSFR (Design System de l'État français) fournit des composants accessibles conformes au RGAA pour toutes les administrations. Chaque ministère l'utilise comme base et contribue aux évolutions.

Voir aussi
Atomic design
Cohérence
Design tokens
Guide de style
Sources
Brad Frost, Atomic Design, 2016
Nathan Curtis, Modular Web Design, 2010

Dans le flux

3
Huei-Hsin Wang · il y a 1 j · 0 commentaire0 com. · #design
Note

Casser le mythe de l'équipe design system XXL permet de repenser les ressources réelles. L'article renverse l'intuition : une petite équipe structurée invente de meilleurs contraintes qu'une grosse qui dilue les décisions.

Le Journal d'UX : veille UX et design au quotidien, wiki UX de référence en français. Ouvert aux contributions de la communauté.