Créer un design system d’entreprise : gouvernance, tokens et composants

Un design system ne se limite pas à une bibliothèque de boutons et de formulaires dans Figma. C’est une infrastructure produit évolutive qui relie décisions de design, composants codés, tokens, normes d’accessibilité et règles d’utilisation.

Le défi est moins de créer les premiers composants que d’assurer leur utilisation cohérente par les équipes, des publications maîtrisées et la correspondance entre design et code.

Définir le périmètre du design system

Quels produits, marques et plateformes seront couverts ? Le web, iOS et Android peuvent partager les tokens tout en utilisant des implémentations de composants propres à chaque plateforme.

Structure des design tokens

Définissez couleurs, espacements, typographie, rayons et ombres sous forme de tokens sémantiques plutôt que de valeurs fixes, pour faciliter la gestion des thèmes et variantes de marque.

Conception d'API de composants

Définissez un contrat de composant clair pour les variantes visuelles, les états, la validation, les états désactivés et de chargement, et l’accessibilité.

Maintenir la correspondance entre Figma et le code

Maintenez autant que possible la correspondance entre noms et variantes de la bibliothèque de design et API des composants frontend.

Accessibilité

Traiter la navigation clavier, le focus, le contraste et le comportement des lecteurs d’écran au niveau des composants évite de répéter ce travail dans chaque produit.

Documentation

Quand devrait-il être utilisé?
Quand ne devrait-il pas être utilisé?
Props et variantes
Exemple d'utilisation
Notes d'accessibilité
Règles relatives au contenu

Gestion des versions

Les changements incompatibles des composants peuvent perturber les équipes. Utilisez le versionnement sémantique ou une politique de publication maîtrisée.

Modèle de gouvernance

Précisez qui évalue les nouveaux composants, comment contribuer et quelle équipe est responsable du design system.

Fonder les décisions UX sur des données

Dans ce travail UX, le périmètre du design system, les tokens et les API des composants ne doivent pas être traités comme de simples préférences de design. Identifiez le problème utilisateur auquel répond chaque décision d’interface critique et l’indicateur comportemental qui permettra de la valider. Changer la couleur d’un bouton ne constitue pas, à lui seul, une amélioration UX : reconnaître plus facilement une tâche, la terminer plus vite ou faire moins d’erreurs sont des résultats mesurables.

Combinez données quantitatives et recherche qualitative. L’analyse des entonnoirs ou des événements peut montrer à quelle étape les utilisateurs abandonnent ; les entretiens et les tests d’utilisabilité aident à comprendre pourquoi. Mesurer les mêmes indicateurs après une modification transforme une hypothèse en décision produit vérifiable. Une entrée du backlog UX doit donc réunir le problème, l’hypothèse, l’utilisateur cible, l’indicateur de réussite et les critères d’acceptation, pas seulement le nom d’un écran ou d’un composant.

Liste de contrôle de mise en œuvre et de mesure

La tâche utilisateur critique est-elle définie ?
Dispose-t-on de données de référence sur le comportement actuel ?
Les scénarios mobiles et sur ordinateur ont-ils été testés séparément ?
Les états d’erreur et les écrans sans données ont-ils été conçus ?
Les contrôles d’accessibilité ont-ils été effectués ?
Un indicateur de réussite a-t-il été défini pour évaluer la modification ?
Les retours des utilisateurs ont-ils été reliés au backlog produit ?

Les performances et le comportement technique des parcours critiques font partie de l’UX. Des réponses API lentes, un état de chargement ambigu après l’envoi d’un formulaire, une perte de données ou un clavier mobile masquant un champ dégradent l’expérience réelle, même si ces problèmes ne figurent pas dans le fichier de conception. Les équipes frontend, backend, analytique et design doivent donc examiner le même scénario de bout en bout.

Cycle de recherche, d’hypothèse et d’itération

Une modification UX doit partir d’une hypothèse aussi claire que possible. À la place de « l’utilisateur n’aime pas cet écran », formulez un problème vérifiable, par exemple : « les incertitudes concernant le périmètre du design system réduisent le taux de réussite des tâches ». Les données analytiques, entretiens, demandes d’assistance, tests d’utilisabilité ou problèmes opérationnels observés peuvent étayer l’hypothèse. L’équipe cherche ainsi à établir le problème avant de présumer la solution.

Définissez ensuite le comportement attendu pour les tokens et les API des composants. Selon le contexte, utilisez le taux de réussite des tâches, le temps nécessaire, le taux d’erreur, la progression dans l’entonnoir, l’abandon des formulaires ou le nombre de corrections des utilisateurs. Après publication du nouveau design, comparez les mêmes indicateurs à la situation de référence. Si les résultats n’évoluent pas comme prévu, réévaluez l’hypothèse plutôt que de défendre la décision de design.

Pour une optimisation UX durable, les résultats de recherche ne doivent pas rester dans des présentations ponctuelles. Réunir le problème, les preuves, la solution proposée, le segment utilisateur, l’indicateur de réussite et le résultat dans une même entrée du backlog permet de voir quelles décisions fonctionnent réellement dans le temps. L’UX devient ainsi un cycle de développement produit mesurable, plutôt qu’une simple révision esthétique.

L’approche UX/UI de B10 Digital Agency

B10 Digital Agency considère l’expérience utilisateur comme une discipline de développement produit associant recherche, parcours utilisateurs, analyse de données, prototypage, faisabilité technique et mesure, et pas seulement comme l’esthétique d’une interface.

Questions fréquentes

Un kit UI et un design system sont-ils la même chose ?

Non. Un kit UI est un ensemble de composants visuels ; un design system inclut aussi code, règles, tokens, documentation et gouvernance.

À quoi sert un design token ?

Il convertit les décisions visuelles en variables sémantiques et réutilisables.

Chaque équipe de produit devrait-elle ajouter son propre composant?

Les équipes peuvent contribuer, mais une revue centrale et la gouvernance évitent les composants en double.

Le système de conception est-il complet?

Habituellement pas. C'est un système vivant qui se développe avec des produits.

Articles associés

Rendre l’expérience utilisateur mesurable

Découvrez le service UX/UI de B10 Digital Agency pour améliorer les parcours dans les produits web, mobiles et d’entreprise grâce à la recherche, au prototypage et aux données comportementales.

Découvrir le design et l’expérience utilisateur →