11 février 2025

Design system 104 : l'importance des indicateurs

Carly AyresWriter

Une illustration numérique abstraite présentant des formes géométriques interconnectées dans une palette de couleurs vives. La composition est constituée de hautes structures bleues en trois dimensions, ressemblant à des colonnes ou à des poutres, disposées en motif décalé. Ces structures présentent des prolongements angulaires reliés entre eux par de fines tiges orange, créant un effet de toile. Deux grandes formes circulaires et rectangulaires jaunes sont présentes en arrière-plan ; elles pourraient représenter le soleil et une porte, sur fond vert texturé. L’œuvre dégage une impression à la fois mécanique et architecturale, empreinte d’une énergie surréaliste, presque cinétique.

Derrière chaque design system réussi se cache un secret surprenant : les chiffres. Découvrez comment le suivi des indicateurs pertinents peut transformer votre design system, d'une simple ressource utile en un puissant moteur d'efficacité.

Partager Design system 104 : l'importance des indicateurs

Illustrations de Cynthia Alfonso

Au-delà du gain de temps considérable, l'expérience a révélé un avantage qualitatif : les participants ont déclaré avoir davantage confiance en leurs créations lorsqu'ils utilisaient un design system, sachant que celles-ci s'inscrivaient dans un cadre cohérent pour l'ensemble du produit.

Les données parlent d'elles-mêmes : l'équipe de science des données de Figma a constaté que les designers qui ont accès à un design system réalisent les tâches 34 % plus rapidement que ceux qui n'en ont pas. Pour mieux comprendre, imaginez une équipe de sept product designers, chacun disposant de 20 heures par semaine consacrées exclusivement au design. « Un gain d'efficacité de 34 % grâce à un design system revient à ajouter 3,5 designers à l'équipe chaque semaine. » Dans des entreprises comme Vanguard, où les mises à jour de design sont 50 % plus rapides grâce à la mise en place de systèmes adaptés, les gains cumulés sont considérables.

Un gain d'efficacité de 34 % grâce à un design system revient à ajouter 3,5 designers à l'équipe chaque semaine.

Bien que les équipes se concentrent souvent sur la création de composants et de documentation lors de la construction initiale d'un design system, mesurer l'adoption et l'utilisation révèle le véritable impact commercial. Des entreprises comme Headspace ont constaté un gain de temps de 20%–30% sur les tâches simples et jusqu'à 50 % sur les projets complexes grâce à l'utilisation de tokens et de variables, tandis que Swiggy a réduit de moitié le temps de déploiement des fonctionnalités après avoir mis en place un suivi robuste. Ces indicateurs mettent en lumière des pistes claires pour améliorer la cohérence, l'efficacité et l'évolutivité.

Une illustration numérique abstraite présentant une composition géométrique constituée de structures superposées, semblables à des livres. Une grande forme rectangulaire bleue domine le centre, qui semble se déplier ou s'ouvrir en se déroulant. En dessous et autour, de multiples calques empilés en vert, orange et jaune s'étendent vers l'extérieur dans un motif en escalier, ressemblant à des pages déployées ou à des formes architecturales. Certains calques contiennent des marques abstraites noires, évoquant un sentiment d'informations encodées ou de texte numérique. Le fond est d'un orange vif, renforçant le contraste entre les éléments structurés et leur environnement.

Bienvenue à la quatrième partie de notre introduction aux design systems. Si vous avez manqué nos articles précédents, consultez Qu'est-ce qu'un design system ?, Comment construire votre design system et Documentation qui favorise l'adoption.

Interpréter les signes

Dans les design systems, on trouve des indicateurs d'utilisation, des taux d'adoption, des scores de cohérence et d'autres indicateurs de performance. Mais, quels sont ceux qui conviennent le mieux à votre organisation ? Le nombre d'utilisations des composants ou d'applications des design tokens peut vous aider à déterminer les éléments de votre design system qui sont véritablement les plus sollicités. Sans oublier le temps : ce temps précieux économisé grâce à la réutilisation des composants, un avantage quantifiable qui séduit aussi bien les parties prenantes que les équipes.

Voici les principaux indicateurs à prendre en compte pour le suivi :

Utilisation des bibliothèques et des composants : Observez les composants, les variables et les styles les plus utilisés — et ceux qui ne le sont pas. Ces données aident à identifier les opportunités d'amélioration ou de suppression des éléments sous-utilisés.
Efficacité de la documentation : Suivez les interactions des équipes avec votre documentation. Les pages populaires et les requêtes de recherche courantes peuvent révéler les domaines dans lesquels les équipes ont le plus besoin de conseils.
Mesures de cohérence : recherchez des tendances de détachement de composants ou des dérogations au style qui pourraient signaler des domaines dans lesquels le design system ne répond pas aux besoins de l'équipe.

Pour Veronica Agne, Senior UX Designer chez athenahealth, les taux de détachement des composants offrent des informations particulièrement précieuses : « Si quelqu'un dans notre organisation détache un composant, je veux savoir pourquoi », explique-t-elle. « Cela peut signifier l'une des trois choses suivantes : il y a un bug, les équipes veulent une amélioration de la fonctionnalité qui n'existe pas, ou elles associent des éléments existants de manière inattendue. Ces trois réponses ont toutes de l’importance pour moi. »

Ce travail d'enquête a récemment porté ses fruits lorsque Veronica a remarqué une augmentation des détachements pour un composant de conteneur. « Nous avons rencontré un problème de mise en page automatique où le retour à la ligne ne s'effectuait pas correctement, se souvient-elle. J'ai vu un certain nombre de personnes détacher le composant concerné et j'ai immédiatement compris d'où venait le problème. Je n'ai pas eu à attendre que quelqu'un me dise qu'il y avait un problème pour pouvoir le résoudre. » Après avoir travaillé dans la science des données et l'analytique, et maintenant à la tête du design system Forge d'athenahealth, Veronica possède une perspective unique pour mesurer le succès d'un design system à grande échelle, qu'utilisent des centaines de designers, de développeurs et de responsables produit, avec environ 100 000 insertions de composants par mois.

Exploiter les outils et l'automatisation

Les scores de cohérence et la conformité en matière d'accessibilité sont des indicateurs essentiels de la santé d'un design system. En intégrant la surveillance à votre routine plutôt qu'en la considérant comme un contrôle périodique, vous avez plus de chances de détecter les éventuels problèmes avant qu'ils ne s'aggravent. L'automatisation peut libérer les équipes pour qu'elles se consacrent à ce qu'elles font de mieux, concevoir et innover, plutôt que de se perdre dans les détails du suivi des données. Grâce aux plugins, aux scripts de version et aux frameworks de test, les tâches manuelles sont remplacées par l'efficacité et la précision.

Depuis le 11 février 2025, l'analyse de données de la bibliothèque actualisée par Figma offrent aux clients Organisation et Entreprise des informations plus approfondies sur la façon dont leurs bibliothèques publiées sont utilisées, sans quitter leur environnement de conception. Les équipes peuvent désormais suivre l'adoption des variables et des styles, en plus des analyses de composants existantes, directement dans Figma, facilitant ainsi plus que jamais la compréhension de l'utilisation du design system au sein de leur organisation. L'analyse de données de la bibliothèque comprend les éléments suivants :

Les composants : surveillez les tendances d'utilisation et identifiez les éléments les plus utilisés par les équipes
Les styles : suivez comment les styles de couleur, de police et d'effet sont appliqués dans les fichiers
Les variables : examinez comment les tokens et les propriétés dynamiques sont utilisés

Pour les clients Enterprise, la nouvelle API pour l'analyse des données de la bibliothèque offre encore plus de flexibilité pour personnaliser les vues analytiques. Les équipes peuvent voir les modèles d'utilisation sur des périodes spécifiques, combiner différents types de données et intégrer les indicateurs du design system avec leurs outils et workflows existants.

Rendre les données exploitables

Chez athenahealth, Veronica et son équipe ont été parmi les premiers à tester les dernières fonctionnalités d'analyse de données de la bibliothèque ajoutées par Figma, qu’elles ont mises à profit dans le cadre de leur processus visant à transformer les indicateurs en améliorations. « J’utilise les nouvelles fonctionnalités de l’analyse de données de la bibliothèque de Figma pour mieux comprendre comment les utilisateurs détachent des composants, à quel moment et pour quelle raison », explique-t-elle. Son équipe utilise des scripts personnalisés pour transformer les données de l'API en rapports détaillés, en y ajoutant des informations contextuelles telles que les types de composants et les taux de détachement attendus, puis en les visualisant et en les examinant chaque mois via un tableau de bord Tableau.

Ces données alimentent ensuite un processus en trois étapes :

Diagnostic : examen des composants pour identifier des problèmes évidents
Sensibilisation des utilisateurs : échanges avec les équipes pour comprendre leurs besoins
Mise en œuvre : création de tickets pour les améliorations nécessaires, que ce soit dans Figma ou au niveau du code

« Nous veillons constamment à ce que notre design system soit irréprochable », déclare Veronica. Les utilisateurs ne signalent pas tous les problèmes qu'ils rencontrent. Si un autre indicateur est susceptible de les mettre en évidence, je n'ai pas besoin d'attendre qu'on m'annonce que quelque chose ne va pas. »

Chez Squarespace, l'équipe des design systems utilise le filtre de comparaison des bibliothèques pour suivre la migration entre différentes versions. Cette approche leur permet de surveiller l'utilisation entre les anciennes et les nouvelles itérations, et de s'assurer que les anciennes versions sont correctement retirées.

Microsoft utilise également les statistiques du design system comme une forme de feedback. « Chez Microsoft, de nombreuses équipes utilisent le design system Fluent et nous ne recevons pas toujours de retours de leur part sur ce qui fonctionne ou pas », déclare Damien Aistrope de Microsoft, ancien Principal Designer de Fluent. « Il est donc utile pour nous de voir quels composants ne sont pas utilisés et ne nécessitent pas d'être entretenus, ainsi que ceux qui sont souvent détachés et peuvent nécessiter une mise à jour. »

« Chez Microsoft, de nombreuses équipes utilisent le design system Fluent et nous ne recevons pas toujours de retours de leur part sur ce qui fonctionne ou pas. »

Damien Aistrope, ancien Principal Designer, Fluent Design System Studio chez Microsoft

Une capture d'écran d'un tableau de bord d'analyse de statistiques de design intitulé « bibliothèque » est affichée sur un fond orange. Le tableau de bord est ouvert à l'onglet « analyse de données » et met l'accent sur les « insertions de variables », montrant un graphique linéaire qui suit les tendances d'insertion sur une période de 30 jours. Sous le graphique, une section « Meilleures équipes » affiche le classement des équipes selon le nombre d'insertions de variables, avec l'« Équipe principale » arrivant en tête avec 372 516 insertions (94 %). Un tableau intitulé « Statistiques d'utilisation » répertorie les variables de couleur telles que « Cyan », « Marron » et « Vert fluo », ainsi que des données sur le nombre total d'instances, les insertions au cours des 30 derniers jours et les détachements. La variable la plus utilisée est « Cyan », avec 917 580 instances au total et 109 630 insertions au cours des 30 derniers jours. — Le tableau de bord actualisé d'analyse de données de la bibliothèque Figma révèle comment les équipes utilisent leur design system, des variables aux tokens de couleur, dans l'environnement existant.

Bonnes pratiques pour mesurer l'impact

L'apprentissage par modèle est un processus de construction et de formation des programmes informatiques permettant de reconnaître des motifs, de réaliser des prédictions ou d'interpréter des comportements à partir de données.

Pour les équipes qui cherchent à commencer ou à améliorer le suivi de leurs indicateurs, Veronica recommande une approche historique : « Étudiez le passer avant de préparer l'avenir. Grâce à l'analyse de données de la bibliothèque, vous pouvez revenir un an en arrière et analyser ce qui s'est passé pendant une période dont vous connaissez déjà les résultats. C'est un peu comme un apprentissage par modèle : vous pouvez examiner les causes possibles et en tirer des conclusions pour identifier les éléments à surveiller dorénavant. »

Grâce à l'analyse de données de la bibliothèque, vous pouvez revenir un an en arrière et analyser ce qui s'est passé pendant une période dont vous connaissez déjà les résultats.

Veronica Agne, Senior UX Designer, athenahealth

Bien que les avantages du suivi des indicateurs soient clairs, le processus présente des défis, comme le maintien de la qualité des données, l'adhésion des parties prenantes et la traduction des données en action. À ce sujet, voici quelques bonnes pratiques :

Mesurer tôt et souvent : n'attendez pas après le lancement pour commencer à suivre les indicateurs. Une évaluation précoce permet d'identifier les obstacles à l'adoption et les possibilités d'amélioration avant qu'ils ne se transforment en problèmes systémiques.
Fixer des objectifs clairs, en adéquation avec les objectifs de l'entreprise : associez les indicateurs à des résultats concrets. Cherchez-vous à accroître l'adoption ? Améliorer la cohérence ? Réduire la dette de design ? Vos objectifs doivent vous permettre de déterminer quels indicateurs sont les plus importants.
Au-delà des données superficielles, tenez compte du contexte : un taux de détachement élevé n'est pas forcément une mauvaise chose. Il peut indiquer qu'un composant conçu pour la personnalisation fonctionne comme prévu. Le contexte est important.
Partagez largement les informations obtenues avec les parties prenantes : suscitez l'adhésion à votre design system et démontrez son impact sur l'efficacité et la cohérence en communiquant vos indicateurs.

Une capture d'écran d'un tableau de bord d'analyse de données intitulé « Earthling SDS » est affichée sur un fond vert avec un effet d'ombre portée subtile. Le tableau de bord est ouvert à l'onglet « analyse de données », montrant un graphique linéaire intitulé « insertions de composants » avec un pic visible au début de janvier. Un menu déroulant est ouvert, révélant trois options : « Composants », « Styles » et « Variables », avec « Variables » survolé. Sous le graphique, une section « Meilleures équipes » liste les équipes et leurs comptes d'insertions de composants, l'« Équipe application » arrivant en tête avec 55 insertions (93 %). Plus bas, un tableau « Statistiques des composants » détaille les noms des composants, le nombre total de variantes, d'instances, ainsi que le nombre d'insertions et de détachements au cours des 30 derniers jours. Le composant « Pied de page » enregistre la plus forte activité avec 25 instances totales, 9 insertions et 8 détachements.

En savoir plus sur l'analyse de données de la bibliothèque actualisée par Figma pour les équipes Organisation et Entreprise.

Préparer l'expansion

À mesure que vous optimisez votre design system, votre approche des indicateurs doit, elle aussi, évoluer. Un examen régulier de votre stratégie vous garantit un suivi des points essentiels à votre stade actuel de développement. Pensez à segmenter les données par équipe ou par produit pour des perspectives plus précises. Cela peut vous aider à identifier où renforcer la personnalisation et le soutien.

N'oubliez pas que les indicateurs sont un moyen d'atteindre un objectif : ils doivent vous aider à créer un design system plus efficace et largement adopté, qui accentuera la productivité de votre équipe et la cohérence de vos produits. Utilisez ces indicateurs pour réaliser les améliorations nécessaires, démontrer la valeur de votre design system et vous assurer que celui-ci continue de répondre aux besoins changeants de votre organisation.