Handoff bezeichnet den Prozess der strukturierten Übergabe von Design-Spezifikationen, Assets und Annotationen an das Entwicklungsteam, damit Designs präzise und effizient implementiert werden können.
Rubrik: Mediendesign & Digitale Medien · Unterrubrik: Web-Grundlagen · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Design Handoff, Design-to-Code, Übergabe, Spec Handover
Was ist der Handoff?
Der Handoff ist einer der kritischsten Momente im Design-Prozess: Hier entscheidet sich, ob das sorgfältig entworfene Design exakt umgesetzt wird – oder ob es in der Implementierung durch Missverständnisse, fehlende Spezifikationen und unklare Anforderungen verfälscht wird.
Ein schlechter Handoff führt zu:
- Mehrfachen Rückfragen vom Entwicklungsteam
- Implementierungen, die nicht dem Design entsprechen
- Designanpassungen in letzter Minute, die technische Schulden erzeugen
- Frustration auf beiden Seiten
Ein guter Handoff ist nicht nur die Weitergabe von Dateien, sondern ein kollaborativer Prozess, der Designentscheidungen erklärt und Entwickler befähigt.
Erklärung
Was muss ein Handoff enthalten?
Visuelle Spezifikationen
- Abstände und Größen (Padding, Margin, Breiten, Höhen)
- Typografie (Schriftfamilie, Größe, Gewicht, Zeilenabstand, Zeichenabstand)
- Farben (HEX/RGB/Token-Namen, inkl. Deckkraft)
- Border Radius, Box Shadows, Opacity
Zustände (States) Jede interaktive Komponente hat mehrere Zustände, die designt und übergeben werden müssen:
- Default / Rest
- Hover
- Focus (besonders wichtig für Barrierefreiheit im Web (WCAG 2.2) für Designer)
- Active / Pressed
- Disabled
- Loading
- Error / Success (bei Formularen)
Assets
- Icons als SVG (SVG für Designer: Skalierbare Vektorgrafiken im Web)
- Bilder in korrekten Auflösungen und Formaten (Bildoptimierung für Web: WebP, AVIF, Lazy Loading)
- Logos in verschiedenen Varianten
Verhalten und Interaktion
- Animationen: Dauer, Easing, animierte Eigenschaften (CSS-Animationen für Designer verstehen)
- Responsive-Verhalten: wie sich Komponenten bei verschiedenen Breakpoints verhalten (Responsive Design: Grundlagen und Breakpoints)
- Edge Cases: Wie sieht ein Button mit sehr langem Text aus? Was passiert, wenn eine Liste leer ist?
Schriftdefinitionen
- Welche Webfonts werden genutzt? (Webfonts: Einbindung, Performance, Lizenzen)
- Von welchem Dienst (Google Fonts, Adobe Fonts, Self-Hosted)?
- Welche Schnitte werden benötigt?
Handoff-Tools
Figma Dev Mode Seit 2023 bietet Figma einen offiziellen Dev Mode (früher Inspect-Tab). Entwickler können:
- CSS-Werte direkt aus dem Design ablesen
- Abstände, Farben und Typografie in Code-Notation sehen
- Assets exportieren
- Annotationen von Designern lesen
Der Dev Mode ist in Figma Professional und höher verfügbar. Er deckt grundlegende Spezifikationen ab, ersetzt aber keine Handoff-Dokumentation für komplexe Verhaltensweisen.
Zeplin Zeplin ist ein dediziertes Handoff-Tool, das aus Figma oder Sketch-Designs importiert. Vorteile gegenüber Figma Dev Mode:
- Kommentarfunktion direkt am Design
- Versionshistorie und Vergleich
- Integration in JIRA, Confluence, Slack
- Styleguide-Ansicht für globale Styles
Zeplin ist besonders in größeren Teams mit getrennten Design- und Entwicklungsabteilungen beliebt.
Storybook Storybook ist keine Übergabe-Plattform im klassischen Sinne, sondern eine Entwicklungsumgebung für UI-Komponenten. Entwickler bauen Komponenten isoliert in Storybook und dokumentieren sie dort. Designer können Storybook als "lebende Spezifikation" nutzen: Das, was in Storybook existiert, ist das, was gebaut wurde.
Die Integration von Figma-Designs in Storybook über Plugins (z. B. Storybook Figma Plugin) ermöglicht einen direkten Vergleich zwischen Design und Implementierung.
InVision Inspect (veraltet) InVision war lange das Standard-Tool für Handoffs, wird aber seit dem Ende von InVision (2024) kaum noch genutzt. Figma hat InVision weitgehend abgelöst.
Annotationen in Figma
Annotationen sind Erklärungen direkt im Figma-Design, die Entwickler zusätzliche Informationen geben:
- Verhalten, das nicht aus dem Bild ersichtlich ist
- Links zu Komponenten im Design Systems: Von Figma zu Code
- Hinweise auf Edge Cases
- Interaktions-Spezifikationen
Figma bietet seit 2024 natives Annotations-Feature in Dev Mode. Vorher wurden Annotations manuell als Textbausteine oder mit Plugins wie „Figma Annotations" erstellt.
Beispiele
Button-Handoff: Ein vollständiger Button-Handoff enthält nicht nur das visuelle Design, sondern alle States (Default, Hover, Focus, Active, Disabled), Typografie-Spezifikationen, Abstände, Farb-Tokens, Fokus-Ring-Design und Mindestgröße (Touch Target).
Formular-Validierung: Ein Formularfeld-Handoff definiert: wie sehen korrekte Eingaben aus, wie Fehler, wie Warnings? Wann wird validiert (on blur, on submit)? Wie ist die Fehlermeldung formuliert?
Responsive Navigation: Dokumentiert, wann die Navigation kollabiert (bei welchem Breakpoint), wie das Hamburger-Menü öffnet und schließt (Animation-Details), und wie der Fokus im geöffneten Menü verwaltet wird.
In der Praxis
Der Handoff-Prozess
- Design Review: Designer und Entwickler besprechen das Design gemeinsam, bevor der offizielle Handoff stattfindet. Fragen werden geklärt, technische Machbarkeit wird geprüft.
- States vollständig: Alle Komponenten-States sind in Figma vorhanden.
- Assets exportieren: Icons als SVG, Bilder in korrekten Formaten bereitstellen.
- Tokens dokumentieren: Farbtoken, Typografie-Tokens, Spacing-Tokens mit eindeutigen Namen.
- Übergabe-Meeting: Kurzes Meeting, in dem Designer durch wichtige Designentscheidungen führt und Kontext erklärt.
- Feedback-Loop: Entwickler melden Unklarheiten, Designer klären zeitnah.
Collaboration statt "Handoff"
Das Konzept des "Handoffs" als einmaliger, linearer Übergabe ist veraltet. In agilen Teams arbeiten Designer und Entwickler kontinuierlich zusammen: Designer sind während der Implementierung ansprechbar, Entwickler geben Feedback zu Designs bevor diese fertig sind.
Nathan Curtis (EightShapes) spricht von "continuous design" als dem Ziel: kein Wasserfall-Prozess, sondern fortlaufende Kollaboration.
Vergleich & Abgrenzung
| Tool | Stärken | Schwächen |
|---|---|---|
| Figma Dev Mode | Direkt im Designtool, immer aktuell | Weniger Kollaborations-Features |
| Zeplin | Dedizierte Handoff-Features, Kommentare | Separate Plattform, Kosten |
| Storybook | Lebende Dokumentation, testbar | Nur für bereits implementierte Komponenten |
Häufige Fragen (FAQ)
Muss ich Zeplin kaufen, wenn ich Figma habe? Nicht zwingend. Figma Dev Mode deckt viele Handoff-Bedürfnisse ab. Zeplin lohnt sich für größere Teams oder wenn erweiterte Collaboration-Features benötigt werden.
Wie detailliert muss ein Handoff sein? So detailliert wie nötig. Bei einem Design Systems: Von Figma zu Code mit gut dokumentierten Komponenten reicht oft ein Verweis auf die Komponente. Bei Custom-Elementen braucht es vollständige Spezifikationen.
Wer ist verantwortlich für einen guten Handoff? Der Designer ist primär verantwortlich, aber ein guter Handoff ist Teamarbeit. Entwickler sollten aktiv fragen, wenn Spezifikationen fehlen, anstatt zu raten.
Verwandte Einträge
- Design Systems: Von Figma zu Code – Basis für effiziente Handoffs
- SVG für Designer: Skalierbare Vektorgrafiken im Web – Icons im Handoff
- Bildoptimierung für Web: WebP, AVIF, Lazy Loading – Bilder im Handoff
- CSS-Animationen für Designer verstehen – Animations-Spezifikationen übergeben
- Barrierefreiheit im Web (WCAG 2.2) für Designer – Barrierefreiheits-Anforderungen dokumentieren
- Responsive Design: Grundlagen und Breakpoints – Responsive-Verhalten spezifizieren
- Webfonts: Einbindung, Performance, Lizenzen – Schrift-Spezifikationen im Handoff
Weiterführend
- Curtis, N. (2019). Documenting Design Systems. EightShapes.
- Figma (2024). Dev Mode Documentation.
- Zeplin (2024). Handoff Guide.
- Brown, D. M. (2010). Communicating Design. 2. Aufl. New Riders.
- Storybook (2024). Design Integration.
