Das UX-Design-Delivery-Tool Zeplin verspricht, die Lücke zwischen Design und Code zu schließen. Dieser Beitrag beleuchtet, warum das nötig ist und was Zeplin als Lösung anbietet.
Lea im Sprint-Chaos
Lea, Frontend-Entwicklerin in einem schnell wachsenden SaaS-Start-up, öffnet an einem Donnerstag um 22 Uhr zum dritten Mal dieselbe Figma-Datei. Morgen früh soll der neue Self-Service-Checkout live gehen, doch Leas Bildschirm zeigt mehr Fragezeichen als Code: Zwei Figma-Frames heißen „Checkout_v4_final“, aber sie unterscheiden sich in kleinen Details. Sämtliche Abstände sind Handarbeit, manche erscheinen unplausibel. Icons liegen nur als PNG vor. Und obendrein kann sich Lea nicht einmal sicher sein, ob der Screen tatsächlich die freigegebene Version ist. Statt zu programmieren, schreibt sie Nachrichten an das Design-Team, die aber womöglich erst am nächsten Morgen beantwortet werden. Die Zeit verrinnt, der Frust wächst.
Die Lücke zwischen Design und Code
Was Lea bräuchte, wäre Klarheit: freigegebene finale Screens, eindeutige Specs, Assets in allen Auflösungen, nachvollziehbare Versionen, eine verlässliche Dokumentation und auch die nötigen Kontextinfos zu Applikation und Benutzern.
Und Lea ist kein Einzelfall. In vielen Firmen entwerfen Designer detailreiche Screens in Figma, Sketch oder Adobe XD. Sie brauchen eine Spielwiese, Platz für Kreativität, spontane Ideen, Experimente, neue Varianten – Design ist ein iterativer Prozess. Entwickler dagegen brauchen Struktur und Eindeutigkeit. Beide Lager folgen unterschiedlichen Arbeitsprinzipien und Workflows, was die Übergabe von Design-Ergebnissen zu einer Herausforderung macht.
Zugegeben: Die Zeiten, in denen Designs als Photoshop- oder PDF-Dateien mit manuell eingefügten Maßangaben weitergegeben wurden, sind in vielen Firmen inzwischen Vergangenheit. Design-Werkzeuge wie Figma haben auch die Design-Übergabe verändert – da auch Entwickler direkt auf diese Werkzeuge zugreifen können, reicht dafür im Prinzip das einfache Senden eines Links aus.
Aber das löst noch nicht das grundlegende Problem, dass Designer und Entwickler unterschiedliche Ziele und Arbeitsweisen haben. Design-Tools sind für Designer gemacht; für die Ziele von Entwicklern eignen sie sich weniger – auch wenn Erweiterungen wie Figma Dev Mode die Kluft verkleinern. Noch immer bleiben Unklarheiten und viel Handarbeit, vom mühsamen Versionsvergleichen bis hin zum Copy-Paste von Farbcodes.
Große Auswahl an günstigen Domain-Endungen – schon ab 0,08 € /Monat
Jetzt Domain-Check starten
Wenn Designer und Entwickler aneinander vorbeiarbeiten
Entwickler wünschen sich von einem übergebenen Design viele Dinge, die moderne Designtools nicht ohne Weiteres liefern: von für sie logisch organisierten Screens, klaren Spezifikationen und einer nachvollziehbaren Versionshistorie über eine informative Dokumentation zur User-Journey und verschiedenen Szenarien bis hin zu der Sicherheit, dass sie auch wirklich die finale Version haben.
Daher entstehen noch immer häufig Reibungsverluste zwischen beiden Welten, die Zeit, Nerven und nicht selten bares Geld kosten können. Laut einer Umfrage unter Design- und Entwicklungsprofis verschwendet ein Großteil der Befragten (66 %) einen signifikanten Teil ihrer Arbeitszeit durch ineffiziente Design-Übergabe – nämlich 25 bis 50 Prozent, das sind durchschnittlich 10 bis 20 Stunden pro Woche.
Neben Produktivitätseinbußen hat das auch noch weitere negative Auswirkungen auf das Geschäft, darunter eine sinkende Arbeitsmoral, verzögerte Produkt- bzw. Featureeinführungen und schlechtere Nutzerbewertungen.
Negative Auswirkungen von ineffizienten Design-Übergabeprozessen auf das Geschäft (Quelle: Zeplin)
Zeplin baut Brücken
2014 stand ein kleines Team in Istanbul vor derselben Frage wie Lea und viele Unternehmen: „Wie verbessern wir den Design-Übergabeprozess und bringen fertige Designs ohne Reibungsverluste in den Code?“ Das Ergebnis war Zeplin, das türkische Wort für Zeppelin – ein elegantes Luftfahrzeug, das Menschen und Orte verbindet. Zunächst ging es dabei vor allem um ein Design-Delivery-Tool, eine Brücke zwischen Design und Entwicklung. Heute soll Zeplin alle Teammitglieder und Interessengruppen verbinden, die an der Umsetzung einer Produktdesign-Vision in ein fertiges Produkt beteiligt sind, auch Produktverantwortliche, QS, Marketing oder Rechtsabteilung.
Dafür bringt es Integrationen in wichtige Tools mit, die diese Nutzergruppen in ihren eigenen Workflows verwenden, von Figma, Sketch und Adobe XD über Slack, Storyboard und VS Code bis hin zu Jira, Azure DevOps und Microsoft Teams. Aber der wichtigste Einsatzzweck bleibt die Design Delivery – mehr als fünf Millionen Menschen in 200.000 Unternehmen nutzen Zeplin als eigenständige Plattform, die fertige UI-Entwürfe aus Figma, Sketch oder XD importiert, einfriert und in einem strukturierten Arbeitsraum für die gesamte Produkt-Crew bereitstellt.
Die sieben Prinzipien der Design Delivery
Zeplin wurde entlang von sieben Grundprinzipien für eine effiziente Design Delivery entwickelt – sie sind die Bausteine für die Brücke zwischen Design und Entwicklung.
- Klare Trennung von finalen Designs und Arbeitsversionen
Während Design-Tools Momentaufnahmen von Entwürfen verwalten, kümmert sich Zeplin um die baureifen Designs. Sobald ein Entwurf reif für die Umsetzung ist (Ready to build), können Designer Frames aus ihrem Design-Tool auswählen und in Zeplin veröffentlichen. Ab diesem Moment sind sie versioniert und nur noch über Zeplin editierbar. Entwickler sehen also nie Work-in-Progress, sondern ausschließlich freigegebene Screens – und wissen so stets, welches die finale Version ist.
- Änderungen bewusst tracken
Auch freigegebene Designs können sich noch ändern. In Designtools – oder gar PDFs – ist es für Entwickler oft schwierig, kleine Änderungen schnell zu erkennen. Deshalb bringt Zeplin eine eigene Versionsverwaltung für fertige Designs mit, und zwar nicht nur für Dateien, sondern auch für einzelne Screens. Wer Änderungen in Zeplin veröffentlicht, kann eine Commit-Meldung hinzufügen, um die Änderungen zu bezeichnen. Zudem zeigt Zeplin Entwicklern pixelgenau die Unterschiede zwischen verschiedenen Versionen an.
- Designs einheitlich organisieren
Je komplexer die Designs und je größer das Designer-Team, desto schwieriger wird es, sich in den Mockups verschiedener Kollegen zurechtzufinden – vor allem, wenn jeder seine Designs anders organisiert. Zeplin sorgt für eine einheitliche Struktur und Organisation für die Projekte und Screens aller Designer im Unternehmen – mit logischer Navigation, Schlagwörtern und leistungsfähigen Suchfunktionen. Das verbessert die funktionsübergreifende Zusammenarbeit und beschleunigt den Produktentwicklungszyklus.
- Die komplette User Journey kommunizieren
Design ist nicht nur der „Look & Feel“ eines Produkts, sagt Steve Jobs – „Design is how it works.“ Für Entwickler heißt das, dass sie auch den Zusammenhang verschiedener Entwürfe und das intendierte Benutzererlebnis verstehen sollten – vom idealen Pfad bis hin zu ungewöhnlichen Szenarien. Zeplin bringt leistungsfähige Funktionen für das User Journey Mapping, die auch umfangreiche User Journeys dokumentieren, pflegen und skalieren können. Ein wesentliches Element davon sind sogenannte „Flows“ mit dynamischen Verbindungen, Beschriftungen und Visualisierungsformen für komplette User Journeys.
- Verhalten und Anforderungen im Kontext dokumentieren
Statische Mockups allein reichen nicht aus, um ein UI-Design zu vermitteln; Entwickler müssen auch wissen, wie sich UI-Elemente verhalten oder animiert werden sollen, und sie müssen die technischen Anforderungen kennen, um das beabsichtigte Gesamterlebnis zu schaffen. Mit Zeplin können Designer auf konsistente Weise direkt in ihren Entwürfen Anmerkungen inkl. Links zu Bildern oder Videos platzieren, die die nötigen Informationen kontextbezogen vermitteln.
- Designsystem-Elemente anzeigen
Designsysteme helfen, sichere und konsistente Benutzeroberflächen zu schaffen, und erhöhen die Effizienz. Damit das funktioniert, brauchen Entwickler Zugang zu den jeweils passenden Designsystem-Elementen wie Komponenten, Farben, Text oder Abstandstoken. Zeplin hilft, das zentral gepflegte und dokumentierte Designsystem für Entwickler zu öffnen. Es zeigt ihnen genau an, wann und wo sie welche Elemente verwenden müssen, kennzeichnet freigegebene Komponenten, Farben, Stile und Token in den Entwürfen und bietet auch Funktionen, um Entwürfe mit Code abzugleichen. Mit Connected Components können Entwickler zudem direkt in den Entwürfen auf schon bestehende Komponenten in ihrer Codebasis zugreifen – mit Verknüpfungen zu Repositories in Storybook oder GitHub.
- Technische Spezifikationen & Assets passend zum Entwickler-Workflow liefern
Entwickler sind quasi die internen „Kunden“ von Designern; ihre Bedürfnisse sollten das Design-Ergebnis steuern. Zeplin hilft dabei, Entwicklern detaillierte technische Spezifikationen und Assets bereitzustellen, die auf ihre Tools und ihren Workflow zugeschnitten sind. So erstellt Zeplin angepasste Code-Snippets und exportiert automatisch optimierte Design-Assets (Bilder, Icons und Illustrationen) im idealen Format, Maßstab und in der idealen Auflösung für die jeweilige Entwicklungsplattform (Web oder Mobile). APIs und Webhooks integrieren Zeplin in die jeweiligen Entwicklungstools und Abläufe – von automatischen Aktualisierungen von Jira-Tickets bis zum Anstoßen eines Builds im CI-System (Continuous Integration), wenn ein Design genehmigt wird.
Lea ganz entspannt
Zurück zu Lea: Dank Nacht-Schicht und Koffein liefert sie den Checkout gerade noch rechtzeitig ab – aber der Stress hinterlässt Spuren. In der Retrospektive zeigt Lea der Teamleitung, wie viel Zeit für Nachfragen, mühsame Screen-Vergleiche, fehlende SVGs und Farbcodes verschwendet wurde. Die Geschäftsführung kennt das Problem bereits und fällt nun endlich die Entscheidung: Wir führen ein Design-Delivery-Tool ein.
Zwei Sprints später: Das Design-Team publiziert freigegebene Screens, fügt Commit-Notizen hinzu, verknüpft bereits vorhandene Storybook-Komponenten. Lea kann sich ganz auf ihren Code konzentrieren. Die Deadline rückt heran. Eine Stunde vor Feierabend lädt Lea die fertige Version auf den Test-Server – mit einem Lächeln und einer Tasse Tee.
Photo by Taras Shypka on Unsplash
