Die führende Zahlungstechnologie-Firma Juspay setzt auf technikorientierte Firmenkultur f. Mio. Transaktionen in komplex. Händler- u. Verbraucher-Ökosystemen. Angesichts von mehreren Dutzend Dashboards, modularen Plattformen und umfangreichen Anpassungsanforderungen musste sich das Design von manueller Arbeit zu einem skalierbaren, entwicklerorientierten System weiterentwickeln.

Durch die Einführung von Figma hat Juspay das Design von isolierten Workflows in ein integriertes, entwicklerfreundliches System verwandelt. Funktionen wie Branching, Dev Mode und Code Connect ermöglichen Juspay jetzt eine bessere Zusammenarbeit, schnellere Lieferungen und eine konsistente Skalierung über Teams und Wiederverkäufer*innen hinweg – mit einer 5-fachen Verbesserung der Designgeschwindigkeit.

Die Lücke zwischen Design und Entwicklung schließen

Vor Figma basierte der Design-Workflow von Juspay auf Sketch, Flinto und persönlichem Feedback. Die Designer*innen arbeiteten oft alleine oder drängten sich um Bildschirme herum, um Dateien untereinander auszutauschen – ein kollaborativer, aber ortsgebundener Prozess. Auch die Entwickler*innen hatten auch begrenzte Einblicke in die Designabsichten, was die Umsetzung langsamer und fehleranfälliger machte und zu verpassten Fristen führte.

„Wir verbrachten 9 bis 10 Stunden am Tag mit Telefonaten, und das Teilen von Bildschirmen mit Sketch führte zu Verzögerungen auf unseren Geräten. Diese Komplikationen machten deutlich, dass wir eine bessere Möglichkeit zur Zusammenarbeit brauchten, also wechselten wir fast über Nacht zu Figma“, erinnert sich Samit Barai, Director of Design bei Juspay.

Designsysteme mit Tiefe und Kontrolle skalieren

Das erste Designsystem vom Juspay entstand nach der Einführung von Figma. Es war ursprünglich mit Stilen aufgebaut, doch das Team stellte auf Variablen für Farben, Typografie, Größen und Themen um, um eine bessere Ausrichtung auf die Syntax des Engineering-Codes zu gewährleisten.

Diese Umstellung war angesichts der Multi-Brand- und Multi-Dashboard-Umgebung von Juspay, in der sich die Grundlagen nahtlos über verschiedene Teams und Partner hinweg anpassen mussten, unerlässlich. Heute können Designer*innen mit variablenbasiertem Theming mit nur wenigen Klicks Dashboards für Händler*innen und Wiederverkäuferpartner gestalten.

Sicherstellung der Genauigkeit im großen Maßstab

Mit der Erweiterung der Produktoberfläche von Juspay entwickelte das Team private Plugins und interne Tools mit den APIs von Figma, um vom Design zur Entwicklung zu gelangen und die Implementierung zu validieren. Ein Coverage-Plugin für Designsysteme scannt Dateien vor jeder Übergabe und markiert Elemente, die nicht aus Komponenten aufgebaut sind. „Dieses Plugin hilft dabei, Elemente zu finden, die das Designsystem nicht verwenden, und zu erkennen, was in eine Komponente umgewandelt werden sollte. Es ist sowohl ein QA-Tool als auch eine Opportunity-Engine“, erklärt Deepanshu.

Die resultierenden Daten fließen in ein internes Dashboard ein, das Metriken auf Datei- und Benutzerebene wie die Wiederverwendung von Komponenten, Überschreibungen außerhalb des Designsystems und Trends bei der Einführung des Designsystems verfolgt.

Um die visuelle Integrität für die Technik zu stärken, hat Juspay auch eine Chrome-Erweiterung entwickelt, die Pull-Anfragen kennzeichnet, die nicht mit validierten Designs übereinstimmen. In Kombination mit den Bibliotheksanalysen von Figma verhindern diese Tools Inkonsistenzen, sorgen für die Synchronisierung der Entwickler*innen und gewährleisten die Designintegrität.

Diese Verbesserungen haben zu messbaren Auswirkungen geführt:

• 5-fache Verbesserung der Designgeschwindigkeit
• 173 % Steigerung der Wiederverwendungsrate von Komponenten über einen Zeitraum von 90 Tagen
• 17 % Rückgang der Komponentenablösung
• 71 % durchschnittliche Designsystemabdeckung bei den gescannten Dateien
• 12 interne Teams nutzen aktiv gemeinsame Bibliotheken

Flexible Governance

Trotz der Größe des Unternehmens glaubt man bei Juspay nicht an die Beschränkung von Kreativität. Designer*innen werden ermutigt, über einen Slack-to-Jira-Workflow neue Muster und Varianten vorzuschlagen, die vom Designsystem-Team überprüft werden. Genehmigte Änderungen durchlaufen das Branching in Figma, einen Peer-Review, und werden dann mit klaren Änderungsprotokollen in die Masterdatei übernommen.

Über Dashboards hinaus spiegelt das Designsystem von Juspay auch die Komponentenarchitektur im Code wider. Modulare Komponenten, wie Tabellenzellen und Wrapper, können je nach Anwendungsfall auf unterschiedliche Weise zusammengestellt werden. „Statt jede Instanz neu zu gestalten, setzen wir nun Benutzeroberflächen wie Bausteine zusammen. Dies führt zu einer 5-fachen Verbesserung der Designgeschwindigkeit“, erklärt Deepanshu.

FigJam für Kritik, Ideenfindung und Inklusion

Der Einfluss von Figma reicht über Komponenten und Code hinaus und hat auch die Designkultur von Juspay verändert. Jedes Projekt beinhaltet nun eine Show & Tell-Sitzung, eine strukturierte gegenseitige Kritik, bei der die Teammitglieder Designs in vier Dimensionen bewerten: was ihnen gefällt, was nicht funktioniert, was verbessert werden könnte und was möglicherweise fehlt – alles innerhalb von FigJam.

Produktmanager*innen und Ingenieur*innen beteiligen sich ebenfalls frühzeitig an der Ideenfindung. Dazu tauschen sie Notizen und Wireframes aus, um Ideen zu teilen und Feedback zu geben. Durch diesen offenen, funktionsübergreifenden Ansatz ist das Design zu einer echten gemeinsamen Verantwortung innerhalb der gesamten Organisation geworden.

Ausblick: Dev Mode MCP Server, Code Connect und Automatisierung

Mit einem ausgereiften Designsystem testet Juspay derzeit neue Wege, um Design-to-Code-Workflows zu automatisieren.

Code Connect ist jetzt in ihr Designsystem-Repository integriert, sodass Entwickler*innen produktionsnahe Code-Schnipsel direkt im Dev Mode in Echtzeit anzeigen können. Bis heute wurden 34 Komponenten mit Code Connect verbunden.

Juspay nutzt auch den MCP-Server des Dev Mode von Figma, um nutzbaren HTML/CCS- und TypeScript-Code zu generieren, mit dem Ziel, mit möglichst wenigen manuellen Schritten vom Konzept zum produktionsbereiten Code zu gelangen.

Das Projekt befindet sich zwar noch in der frühen Experimentierphase, aber Juspay nimmt an, dass der MCP-Server und Code Connect von Figma erhebliche Effizienzsteigerungen ermöglichen könnten, darunter:

• 4–5-mal schnellere Entwicklungszeit: Reduzierung der Implementierungszeit von 45–60 Minuten auf 8–12 Minuten pro Bildschirm
• Weniger erforderliche Schritte: Reduzierung ihres Workflows von 15 auf 4 manuelle Schritte
• Größere Konsistenz: Reduzierung visueller Inkonsistenzen von 15–20 % auf 3–5 %

Um sicherzustellen, dass die Entwickler*innen mit jeder Änderung synchron bleiben, testet das Team auch ein Plugin, das alle Versionen des Designsystems nach Updates durchsucht und automatisch Pull-Anfragen auf GitHub erstellt, um die Lücke zwischen Design-Updates und Code-Sichtbarkeit zu schließen.

Skalierbares Design, zukunftsfähige Entwicklung

Von der Notwendigkeit zur Innovation: Die Zusammenarbeit zwischen Juspay und Figma zeigt, wie eine kollaborative Designplattform nicht nur eine einheitliche Benutzeroberfläche, sondern auch einen kulturellen Wandel und die Umgestaltung der Workflows ermöglichen kann. Mit Figma als Grundlage kann Juspay schneller entwickeln, hat die Möglichkeit zu einer intelligenteren Zusammenarbeit und kann selbstbewusst skalieren – eine Variable, ein Zweig und ein Plugin nach dem anderen.