Variables unterstützt Adyen dabei, das Designsystem mit Figma zu optimieren

Adyen spielt in der sich rasant entwickelnden Fintech-Branche ganz weit oben mit. Die Finanztechnologieplattform bietet Händlern Komplettlösungen für Zahlungen, Daten und Finanzverwaltung auf einer einzigen Plattform. Da Adyen die volle Kontrolle über den Zahlungsfluss hat, müssen Händler nicht mehrere Anbieter verwalten, sondern können sich an eine einzige Plattform anschließen – ein echter Gewinn für beide Seiten.

Adyen hat das Ziel, die kundenorientiertesten und effizientesten Fintech-Portale auf dem Markt anzubieten, wobei ein hoher Wert auf das Nutzererlebnis gelegt wird. Kein Wunder also, dass Adyen ein UX-Design-Team von 70 Leuten hat: 44 Produktdesigner*innen, 15 im Bereich UX Research und 11 UX Writer.

Früher stellte die Abstimmung untereinander eine Herausforderung dar. Mit früheren Design-Tools stieß das Unternehmen auf uneinheitliche Prozesse und umständliche, ineffiziente Arbeitsabläufe.

Doch dann optimierte das Unternehmen sein Designsystem und seine Prozesse mit Figma und FigJam.

Der Wechsel zu Figma

Das Designteam von Adyen erkannte, dass es eine solide Grundlage für die Optimierung der Designabläufe brauchte, undentwickelte daher ein neues Designsystem names Bento in Figma. Ayden ist gerade dabei, alle Teams auf Bento umzustellen – das Funktionen wie Grundlagen, Icons, Komponenten, Muster, Hilfsmittel und Archive bietet – und wechselt von dem gemeinschaftlich genutzten Designsystem, das einige Teams noch verwenden.

Bento hat neue Effizienz- und Strukturniveaus in die Arbeitsweise von Adyens Designteam gebracht. Nehmen wir als Beispiel die Hilfsmittel: Hier bewahren Teams die System-of-System (SOS)-Komponenten auf, die zur Erstellung der Dokumentation des Designsystems verwendet werden. „Alle Teile werden als Bibliotheken an die Teams verteilt. Und mit Figma ist es wirklich einfach, Änderungen und Updates an Stilen/Komponenteninstanzen vorzunehmen“, sagt Luiza Breier, Design Lead bei Adyen. Sie ergänzt außerdem, dass die Bibliotheken des Designsystems standardmäßig für alle Teams aktiviert sind.

Eine der interessanten Herausforderungen war, den Teams die Unterstützung mehrerer Farbmodi zu ermöglichen. Schließlich löste Ayden das Problem, indem es ein Farbsystem mit mehreren Ebenen entwickelte.

Die Kernebene enthält alle Farbdefinitionen, die den Designer*innen und Entwickler*innen nicht zur Verfügung stehen, sondern als Auswahlpalette für das Designsystemteam dienen. Über der Kernebene wurde eine semantische Ebene eingerichtet, in der die Farben nach ihrer Rolle in der Benutzeroberfläche und nicht nach ihrem Farbton definiert sind.

Die semantische Ebene steht Designer*innen und Entwickler*innen für ihre Arbeit bei der Produktentwicklung zur Verfügung. Mit dieser Ebene können Produkte mit Blick auf die Rollen designt werden.

Semantisch gesteuerte Farben in Designs sind in verschiedenen Farbmodi (hell/dunkel) anwendbar. Ursprünglich verwendete Adyen dafür Farbstile, wollte aber seine Designer*innen nicht mit Farben für beide Modi überfordern, also wurden standardmäßig nur Farben für den Hellmodus erstellt. Nach der Einführung von Variables wurde dieses Problem von Figma standardmäßig gelöst.

Adyen hat Farben, Abstände und Randradien zu Variables migriert und alle Figma-Komponenten mit diesen Variablen aktualisiert.

„Jetzt, mit Variables, dauert das Ändern des Farbmodus nur ein paar Klicks und ist vollautomatisiert. Designer*innen können im Hellmodus entwerfen und dann in den Dunkelmodus wechseln und prüfen, ob die von ihnen gewählten semantischen Farben korrekt sind und im Dunkelmodus wie erwartet funktionieren“, so Sergii Polkovnikov, Produktdesigner im Bento-Team.

Neben der Nutzung von Figma zur Beschleunigung von Prozessen arbeiten Luiza und ihr Team intensiv daran, zu verstehen, wie das Designsystem verwendet wird. Designer*innen nutzen Designsystem-Analysen in Figma Enterprise, um die Nutzung zu verfolgen, und haben auch ihr eigenes Dashboard mit der Figma API erstellt.

„Das bedeutet, dass wir alle Importe von Komponenten in Figma verfolgen können, wie viele Instanzen es gibt, welche Teams was verwenden usw.“, erklärt sie. „Wir können sehen, wenn jemand eine Komponente löst – wir haben einen Link direkt zur Figma-Datei, in der die gelöste Komponente markiert ist.“

Dadurch kann das Designsystem-Team nachvollziehen, wie die Migrationen ablaufen, und sieht, welche Designer*innen eine Komponente gelöst haben, sodass Sie mit ihnen Kontakt aufnehmen und den konkreten Anwendungsfall verstehen können.

FigJam optimiert die strategische Planung

Die Zusammenarbeit im Workflow hat sich auch in anderen Bereichen verändert. Das Designsystemteam bei Adyen nutzt FigJam als Tool für die strategische Planung und als Plattform für gemeinsame Ressourcen und Wissen. Das hat die visuelle Zusammenarbeit in einigen Bereichen verbessert.

FigJam wird genutzt, um die Produktvision auf dem neuesten Stand zu halten, damit sie innerhalb und außerhalb des Teams abgestimmt werden kann, vom Online-Brainstorming bis hin zur Unterstützung von Stakeholdern in anderen Teams, wie z. B. den Entwickler*innen, bei der Reflexion über ihre Prioritäten.

FigJam ist auch für Team-Retrospektiven und die vierteljährliche Planung unerlässlich geworden und hilft Designer*innen, über ihre Zusammenarbeit nachzudenken und konkrete Maßnahmen zu beschließen, um ihre Arbeitsweise zu verbessern.

Unternehmensübergreifende Verbesserungen mit Figma

Durch die Verwendung von Figma und FigJam hat Adyen die Nutzung seines Designsystems revolutioniert. Indem alle Assets auf einer einzigen Plattform vereint wurden, entstand ein nahtloses und hochgradig kollaboratives Erlebnis.

Das Unternehmen profitiert nun von besserer Kostenkontrolle durch effizienteres Berechtigungsmanagement, eine klare Zuordnung von Verantwortlichkeiten zwischen den Abteilungen und optimierte Lizenznutzung.

Außerdem sparen Designer*innen wertvolle Zeit, dank schnellerem Feedback, einfacherer Wiederverwendung von Arbeitsergebnissen und schnellen Designanpassungen mittels Variablen. Auch die Figma-API trägt zur Effizienzsteigerung bei der Optimierung von Designsystem-Prozessen bei.

Laut Ayden besteht ein besonder positiver Aspekt bei der Umstellung auf Figma in der Zusammenarbeit und dem Teilen von Dateien in einem Team, das von acht Designer*innen auf 70 Mitarbeitende angewachsen ist.

„Da Figma cloudbasiert ist, können Beteiligte unternehmensweit abteilungsübergreifend zusammenarbeiten, ihre Arbeit präsentieren, schnellen Input und Feedback erhalten und sich so einen Vorteil in der schnelllebigen Fintech-Branche verschaffen“, betont Luiza.