Système de design
Définition courte
Un système de design est un ensemble réutilisable de couleurs, typographie, boutons et composants d'une marque, réunis dans un même corpus de règles.
La palette de couleurs, les polices, les styles de boutons, les champs de formulaire et les composants de carte sont chacun définis une fois, et chaque nouvelle page est assemblée à partir de ces composants prêts plutôt que redessinée de zéro. Il vit sous forme de bibliothèque dans Figma et de jeu de composants partagé dans le code.
Vous le rencontrez dès que plusieurs pages ou produits doivent porter la même marque, ou dès que les équipes design et développement ont besoin d'un langage commun.
On le confond souvent avec une charte graphique. Une charte graphique est un document décrivant comment utiliser un logo et des couleurs ; un système de design va plus loin et inclut des composants de code et de design réellement prêts à l'emploi.
L'erreur la plus courante consiste à construire le système de design comme une belle bibliothèque Figma sans jamais mettre à jour les composants dans le code, et le fichier de conception finit par diverger de ce qui apparaît sur le site. La bonne approche consiste à traiter les composants de code comme la seule source de vérité, avec un processus clair pour que vous répercutiez aussi chaque changement de design.
Pourquoi c'est important
Concevoir et coder chaque page depuis zéro fait perdre du temps et produit des boutons et des couleurs incohérents sur le site. Un système de design accélère la création de nouvelles pages et garde la marque identique partout.
Exemple illustratif
Les pages produits, services et campagnes d'un fabricant de revêtements de sol sont toutes construites à partir des mêmes composants de boutons et de cartes, si bien qu'une nouvelle page se met en place en quelques heures plutôt qu'en plusieurs jours.
