Wie eBay mit Figma eine Brücke zwischen Marke und Produkt hergestellt hat

„Ich habe eine kleine Neuerung angestoßen“, beschreibt Tyler Moore, Senior Director of Design bei eBay, den Beginn der Entwicklung des Designsystems. „Mit der Zeit hat das Projekt immer mehr Wellen geschlagen.“

Diese Wellen sind angekommen. Das im November 2024 angekündigte neue Designsystem von eBay, genannt Evo (kurz für Evolution), steht für eine behutsame Modernisierung der Bildsprache des fast 30 Jahre alten Marktplatzes. Im Mittelpunkt steht das „eBay Playbook“. In dieser 300 Seiten starken Dokumentation werden Barrierefreiheit, Design und Code beschrieben, um den internen Teams und Agenturpartnern von eBay zu helfen, Evo effektiv zum Leben zu erwecken.

Neubeginn von Grund auf

Vor Evo befand sich die Dokumentation des eBay-Designsystems in verstreuten Figma-Dateien, was zu zahlreichen Reibungspunkten führte. „Bei unserem vorherigen Setup waren wichtige Informationen an verschiedenen Orten vergraben“, erklärt Cordelia McGee-Tubb, Staff Design Technologist im OneExperience-Team, eBays funktionsübergreifendem Designteam, das für Marken, Designsysteme, Designtechnologie und Inhalte zuständig ist. „Designer*innen hatten ihre Version in Figma, Entwickler*innen pflegten eine separate Dokumentation, und die Richtlinien zur Barrierefreiheit befanden sich ganz woanders.“ Zur Aktualisierung ihrer Dokumentation aktualisierten die Designer*innen die statischen Figma-Dateien manuell und reichten dann für jede Änderung, die hochgeladen werden sollte, Tickets an Cordelias Team ein.

Anstatt das bestehende System zu überarbeiten oder eine externe Agentur einzuschalten, beschloss das OneExperience-Team, seine Dokumentationspipeline von Grund auf zu überdenken und alles im eigenen Haus zu machen: Design, Entwicklung, Bild- und Videoproduktion. „Wir hatten bereits ein internes Playbook, aber wir hatten nicht das Gefühl, dass es eBay in seiner neuen Ära repräsentierte“, erklärt Staff Product Designer Ryan Tinsley. „Es war mit einer externen Agentur entwickelt worden, und die für die Pflege erforderlichen Schritte passten nicht zu unseren Design-Workflows. Wir brauchten ein System, das zu unserer tatsächlichen Arbeitsweise passte.“

Zusammenführung aller Informationen

Für das OneExperience-Team von eBay war dieser Neustart eine Gelegenheit, die Inhalte und auch den Ansatz zu überdenken, damit die verschiedenen Zielgruppen die Dokumentation bestmöglich nutzen können. Statt Marken- und Produktleitfäden an unterschiedlichen Orten wollten sie einen gemeinsamen Raum schaffen, an dem Marke, Designsysteme und Technologie vereint werden.

Das neue Playbook tut genau das und wird zu einer zentralen Informationsquelle – einschließlich Nachverfolgung des Komponentenstatus. Da die Informationen zuvor über eine manuell aktualisierte Tabelle in Figma verwaltet wurden, waren sie schnell veraltet. Jetzt gibt das System den Echtzeit-Status basierend auf den Metadaten der Bibliotheken an.

Das Team entwickelte eine interne Komponentenstatus-API, um Designsystem-Komponenten über alle Bibliotheken hinweg nachverfolgen zu können. Diese benutzerdefinierte API überwacht die Verfügbarkeit und die implementierten Versionen für jede Komponente – ob in der veröffentlichten Figma-Komponentenbibliothek, in nativen Bibliotheken oder in Open-Source-Webkomponenten-Bibliotheken. Jede Bibliothek registriert Komponentennamen und -versionen (in Figma werden diese Metadaten in Komponentenbeschreibungen eingefügt), wodurch ein vollständiges Bild des Implementierungsstatus auf allen Plattformen entsteht. „Viele unserer Entwickler*innen überprüfen mit unserer Komponentenstatus-API‚ ob eine konkrete Komponente in dem verwendeten Framework vorhanden ist und ob sie der aktuellen Figma-Version sowie der aktuellen Playbook-Dokumentation entspricht“, erklärt Cordelia. „Das ist ein großer Erfolg.“

Abbau von Silos durch Automatisierung

Über Zoom demonstrieren Ryan und Cordelia ihr benutzerdefiniertes Figma-Plugin – die Engine hinter der Überarbeitung ihrer Dokumentation. Jede Komponente, jeder Leitfaden und jeder Hinweis zur Barrierefreiheit im eBay-Playbook beginnt in Figma. Updates finden in Figma statt. Und über den Exporter werden diese Änderungen von Figma aus gelintet, validiert und veröffentlicht, ohne dass das Content-Management-System (CMS) manuell involviert werden muss. Was früher Tage gedauert hat, passiert jetzt in Minuten.

„Wir können eine Aktualisierung in Figma vornehmen und sie in weniger als zwei Minuten auf unserer Playbook-Website veröffentlichen“, erklärt Ryan. „Durch die Möglichkeit, schnell zu iterieren, gehen Teams ganz anders mit der Dokumentation um. Sie betrachten sie nicht als lästige Pflicht, sondern als lebendigen Teil ihres Workflows.“

Für das Playbook selbst hat das Team ein Toolkit mit Figma-Komponenten erstellt, die zwei Aufgaben erfüllen: Sie bilden die Bausteine für die UI des Playbooks und stellen WYSIWYG-Komponenten für den Inhalt jeder Dokumentationsseite bereit. Das Designtechnologie-Team nutzte Dev Mode, um diese Komponenten zu inspizieren, sie gemäß den Spezifikationen zu erstellen und die korrekte Zuordnung der Figma-Eigenschaften in dem benutzerdefinierten Linting- und Export-Plugin sicherzustellen.

„UI-Entwickler*innen bei eBay verwenden den Dev Mode häufig, um Komponentenstile zu prüfen und in Code zu übersetzen“, erklärt Ryan. „Wir sehen vielversprechende Ergebnisse beim Testen von Komponenten mit Code-Schnipseln und Code Connect und haben eine Vision für eine tiefere Integration.“ Das Team hat bei der Einrichtung seiner CSS-Variablen auch Figma-Variablen berücksichtigt, wodurch eine direkte Brücke zwischen Design und Implementierung geschaffen wurde.

„Für mich ist der ganzheitliche Blick auf das System und die Interdisziplinarität wirklich beeindruckend“, fügt Cordelia hinzu. „Wir bringen Design, Technik, Barrierefreiheit und Dokumentation auf eine Art und Weise zusammen, die wir vorher nicht kannten. Das hilft jedem Team, seine Stakeholder*innen besser zu verstehen und ein konsistenteres Produkt zu entwickeln.

Qualität durch Code

Die Liebe des Teams zum Detail geht über die Geschwindigkeit hinaus. Sein maßgeschneidertes Linting-System dient als Sicherheitsnetz und Sprungbrett für Qualität. „Unser Plugin scannt alle Seiten innerhalb einer Datei“, erklärt Cordelia. „Es verwendet den Namen des Frames, um die Breadcrumb-Navigation für die Website und den zugehörigen Tab zu ermitteln. Dann wird überprüft, ob wir Komponenten korrekt verwenden und nicht ablösen. Wenn wir Probleme finden, werden diese vor dem Export gekennzeichnet.“

Dieser automatisierte Ansatz eignet sich besonders gut für die Anforderungen der Barrierefreiheit. Der Linter verfolgt den Alternativtext für Bilder auf der gesamten Site und stellt so sicher, dass die Site so zugänglich wie möglich ist. Diese werden als Eigenschaften direkt in Figma-Komponenten integriert, die in das CMS einfließen.

Freude am Detail

Die Begeisterung des Teams für die Dokumentation ist ansteckend. „Unser Slack-Kanal heißt wörtlich ‚Playbook in the Weeds‘“, lacht Cordelia. „Wir tauchen wirklich tief in die Materie ein, weil uns diese Details wichtig sind.“ Sie haben sogar ein farbcodiertes System für Alternativtext entwickelt: Grüne Blöcke enthalten vollständige Beschreibungen und gelbe heben Bereiche hervor, die Aufmerksamkeit erfordern. Durch diese kleinen Details ist die Wartung keine lästige Pflichtübung, sondern eher ein spannendes Puzzle.

Durch die Bereicherung der Dokumentation hat eBay etwas Seltenes geschaffen: Ein Designsystem, das Teams tatsächlich nutzen und zu dem sie beitragen möchten. „Wir sind einfach begeistert, dass die Leute es nutzen und davon begeistert sind“, sagt Ryan. Das OneExperience-Team hat Engpässe beseitigt und die Dokumentation ist jetzt ebenso dynamisch wie der Designprozess. Dadurch macht es wirklich Spaß, mit der Dokumentation zu arbeiten.

Quantifizierung der Ergebnisse

Seit der Einführung des Playbooks hat das Team deutliche Verbesserungen bei der Nutzung der Komponenten im gesamten Unternehmen festgestellt. „Die Teams nutzen unsere aktualisierten Grundlagen und greifen auf die neueste Dokumentation zu. Dadurch ist die visuelle Qualität der Arbeitsergebnisse gestiegen“, erklärt Ryan. „Dies schafft eine bessere Grundlage für den Einstieg und gewährleistet die Konsistenz der UX-Funktionalität und des gesamten Layoutdesigns.“

Ein weiterer Richtwert: Ryan und Cordelia stellen fest, dass es bei ihren regelmäßigen Design-Sprechstunden nicht mehr grundlegende Fehlerbehebung sondern um tiefergehende Themen wie Muster und Prinzipien geht. „Wir haben gesehen, wie Teams ihre Arbeit durch die Nutzung unserer Dokumentation deutlich verbessert haben“, sagt Ryan. „Die Gespräche unterscheiden sich im Vergleich zu denen vor dem Playbook wie Tag und Nacht – die Leute wissen immer, worauf sie sich beziehen müssen und wie sie die Marke im Einklang mit Best Practices präsentieren können.“

Das Team verfügt bereits über reichlich qualitative Daten zu den Auswirkungen und der Beschleunigung durch Evo und das Playbook. Dennoch sucht es nach weiteren Möglichkeiten, den Effekt quantitativ zu tracken. „Wir freuen uns über die neu erweiterten Analysefunktionen von Figma“, sagt Cordelia. „Sie bieten einen wertvollen quantitativen Einblick in den Zustand und die Wiederverwendbarkeit unseres Systems.“

Blick nach vorn

Unternehmen, die ihre eigene Dokumentation verbessern wollen, können aus der Journey von eBay wertvolle Lehren ziehen: Mit klaren Zielen beginnen, in Automatisierung investieren und sich vor allem auf die benutzerfreundliche Gestaltung des Systems konzentrieren. Wenn Teams gern mit der Dokumentation arbeiten, folgt Konsistenz ganz natürlich.

Das OneExperience-Team verfeinert seine Tools weiter und erweitert gleichzeitig die Systemabdeckung. „Wir fangen gerade erst an“, sagt Cordelia. „Nach jeder bewältigten Herausforderung haben die Teams neue Ideen, was wir noch verbessern könnten. Das ist ein positiver Kreislauf: Bessere Werkzeuge ermöglichen eine bessere Dokumentation, was wiederum zu besseren Produkten führt.