Comment eBay a fait le lien entre marque et produit avec Figma

« J’ai jeté un pavé dans cette petite mare », dit Tyler Moore, senior director of design chez eBay, pour décrire les prémices de leur design system. « Au bout d'un moment, ça a fait des vagues sur lesquelles mes collègues ont voulu surfer. »

Ces vagues sont aujourd’hui bien réelles. Annoncé en novembre 2024, le design system d’eBay, baptisé Evo (abréviation d'Evolution), constitue une modernisation soignée du langage visuel de cette marketplace créée il y a près de 30 ans. Au cœur de ce projet se trouve le « playbook d’eBay » : plus de 300 pages de documentation qui associent accessibilité, design et code pour aider les équipes internes et les agences partenaires d’eBay à donner vie à Evo de manière efficace.

Repartir de zéro

Avant Evo, la documentation du design system d’eBay était éparpillée dans plusieurs fichiers Figma, ce qui créait des frictions à chaque étape. « La configuration précédente cachait des informations critiques à différents endroits », explique Cordelia McGee-Tubb, staff design technologist au sein de l’équipe OneExperience, l’équipe design transverse d’eBay dont le périmètre couvre la marque, les design systems, la technologie de design et le contenu. « Les designers avaient leur version dans Figma, les développeurs géraient une documentation distincte et les règles d’accessibilité se trouvaient dans un fichier à part. » Pour mettre à jour leur documentation, les designers modifiaient manuellement des fichiers Figma statiques, puis soumettaient des tickets à l’équipe de Cordelia pour que chaque modification soit publiée.

Plutôt que de corriger le système existant ou de faire appel à une agence externe, l’équipe OneExperience a décidé de repenser entièrement son pipeline de documentation et de tout intégrer en interne, y compris le design, le développement, la production d’images et de vidéos. « Nous avions déjà un playbook interne, mais nous n’avions pas l’impression qu’il représentait fidèlement la nouvelle phase d'eBay », explique Ryan Tinsley, staff product designer chez eBay. « Il avait été développé par une agence externe, et le maintenir donnait l’impression de faire un travail à part, distinct du design lui-même. » « Nous avions besoin d’un système étroitement intégré à notre façon de travailler. »

Réunir tous les éléments

Pour l’équipe OneExperience d’eBay, ce nouveau départ a été l’occasion de repenser le contenu, mais aussi de voir comment la documentation pouvait répondre aux besoins de différents publics. Plutôt que des destinations distinctes pour guider la marque et le produit, ils ont souhaité créer un espace partagé rassemblant la marque, les design systems et la technologie.

C’est exactement le rôle de leur nouveau playbook, qui devient une source de vérité centralisée et inclut le suivi du statut des composants. Auparavant maintenues via un tableau mis à jour manuellement dans Figma, les informations devenaient rapidement obsolètes. Désormais, le système extrait le statut en temps réel en utilisant les métadonnées des bibliothèques.

L’équipe a créé une API interne pour suivre le statut des composants du design system dans toutes ses bibliothèques. Cette API personnalisée surveille la disponibilité et les versions implémentées pour chaque composant, que ce soit dans la bibliothèque de composants Figma publiée, dans des bibliothèques natives ou dans des bibliothèques de composants web open source. Chaque bibliothèque enregistre les noms et les versions des composants (dans Figma, elles incluent ces métadonnées aux descriptions des composants), ce qui permet d’obtenir une image complète de l’avancement de la mise en œuvre sur les différentes plateformes. « Beaucoup de nos développeurs utilisent notre API de statut des composants pour répondre aux questions suivantes : le composant existe-t-il dans le framework que j’utilise ? Correspond-il à la version Figma ? Correspond-il à la documentation du playbook ? » explique Cordelia. « C’est une grande victoire. »

Décloisonner grâce à l’automatisation

Sur Zoom, Ryan et Cordelia présentent leur plugin Figma personnalisé, le moteur derrière la refonte de leur documentation. Chaque composant, chaque directive et chaque note d’accessibilité du playbook d’eBay se trouve dans Figma. C'est aussi là que se font les mises à jour. Et grâce à leur exportateur, ces modifications sont analysées, validées et publiées depuis Figma sans jamais toucher manuellement au système de gestion de contenu (CMS). Une étape qui durait des jours ne prend désormais que quelques minutes.

« Nous pouvons effectuer une mise à jour dans Figma et la publier sur notre site playbook en moins de deux minutes », explique Ryan. « Pouvoir itérer rapidement change la façon dont les équipes interagissent avec la documentation. Au lieu de la considérer comme une corvée, ils la voient comme une partie intégrante de leur workflow.

Pour le playbook lui-même, l’équipe a créé une boîte à outils de composants Figma qui ont un double objectif : constituer les éléments de base pour l’UI du playbook et fournir des composants WYSIWYG pour le contenu de chaque page de documentation. Leur équipe Design Technology a utilisé Dev Mode pour inspecter ces composants, les développer selon les spécifications et assurer le mapping correct des propriétés Figma dans leur plugin d’exportation.

« Les développeurs d’UI chez eBay utilisent beaucoup Dev Mode pour inspecter les styles des composants et les transposer en code », explique Ryan. « Nous notons des résultats prometteurs en testant des composants avec des extraits de code et Code Connect, et nous envisageons une intégration plus poussée. » L’équipe a également consulté les variables Figma lors de la mise en place de leurs variables CSS, créant ainsi un lien direct entre le design et la mise en œuvre.

« Pour moi, ce qui a vraiment de l'impact, c’est la vision holistique du système et sa nature transverse », ajoute Cordelia. « Nous parvenons à coordonner le design, le développement, l’accessibilité et la documentation comme jamais auparavant. » Cela aide chaque équipe à mieux comprendre ses parties prenantes et à créer un produit plus cohérent.

Apporter de la qualité grâce au code

L’attention portée par l’équipe aux détails va au-delà de la simple question de rapidité. Leur système de linting personnalisé sert à la fois de filet de sécurité et de tremplin en matière de qualité. « Notre plugin analyse toutes les pages d’un fichier », explique Cordelia. « Il utilise le nom de la frame pour déterminer le fil d’Ariane du site et l’onglet auquel elle appartient. Ensuite, il vérifie que nous utilisons les composants correctement et que nous ne les détachons pas. Si nous trouvons des problèmes, ils seront signalés avant l’exportation. »

Cette approche automatisée excelle particulièrement dans la gestion des exigences relatives à l’accessibilité. Le linter suit le texte alternatif des images sur le site, ce qui garantit que le site soit aussi accessible que possible. Ces textes sont intégrés directement dans les composants Figma en tant que propriétés qui transitent vers le CMS.

Un processus aussi plaisant que minutieux

L’enthousiasme de l’équipe pour la documentation est contagieux. « Notre chaîne Slack s’appelle littéralement « Playbook in the Weeds » », explique Cordelia en riant. (L’expression « in the weeds » signifie être concentré sur les détails.) « Nous allons vraiment au fond des choses, car ces détails nous tiennent à cœur. » L’équipe a même développé un système de code couleur pour le texte alternatif : les blocs verts contiennent les descriptions complètes, tandis que les jaunes mettent en évidence les zones nécessitant une attention particulière. Ces petites touches transforment la maintenance en un casse-tête stimulant.

En rendant la documentation agréable, eBay a créé quelque chose de rare : un design system que les équipes veulent réellement utiliser et auquel elles souhaitent contribuer. « Nous sommes ravis que les gens l’utilisent et qu’ils soient aussi enthousiastes », déclare Ryan. En éliminant les goulots d’étranglement et en faisant en sorte que le processus de documentation soit aussi dynamique que le design, l’équipe OneExperience l'a rendu plaisant, ce qui est plutôt inattendu.

Quantifier les résultats

Depuis le lancement du playbook, l’équipe a constaté une amélioration significative de l’utilisation des composants au sein de l’organisation. « Les équipes améliorent la qualité visuelle de leur travail en exploitant nos bases mises à jour et en se référant à la documentation la plus récente », note Ryan. « Cela établit une base plus solide pour démarrer et garantit la cohérence des fonctionnalités UX et du design de mise en page global. »

Autre point clé : Ryan et Cordelia notent que leurs permanences habituelles sont passées du dépannage de base à des discussions plus poussées sur les modèles et les principes de design. « Nos équipes ont considérablement amélioré leur travail en consultant notre documentation », explique Ryan. « Les permanences sont radicalement différentes depuis que nous avons le playbook. Les équipes savent toujours à quoi se référer et comment présenter la marque conformément aux bonnes pratiques. »

Bien qu’elle dispose de nombreuses données qualitatives sur l’impact du système et l’accélération qu’Evo et le playbook ont permis, l’équipe explore des méthodes de suivi plus quantitatives. « Nous sommes enthousiasmés par les nouvelles fonctionnalités d’analyse de données de Figma», explique Cordelia, « car elles fournissent un précieux aperçu quantitatif de l’état et de la réutilisabilité de notre système. »

Les perspectives

Le parcours d’eBay offre de précieux enseignements aux organisations qui cherchent à améliorer leur documentation : commencer par des objectifs clairs, investir dans l’automatisation et surtout, veiller à ce que le système soit agréable à utiliser. Lorsque la documentation est source de satisfaction plutôt que de frustration, la cohérence s'installe naturellement.

L’équipe de OneExperience continue d’affiner ses outils tout en étendant la couverture du système. « Ce n’est que le début », explique Cordelia. « Chaque fois que nous résolvons un problème, les équipes nous donnent de nouvelles idées sur ce que nous pourrions encore améliorer. » C’est un cercle vertueux : de meilleurs outils permettent une meilleure documentation, ce qui donne de meilleurs produits.