Figma: Handoff – Design sauber an die Entwicklung übergeben

Design Handoff in Figma ist der Prozess, fertiggestellte Designs strukturiert, vollständig und verständlich an Entwickler zu übergeben – mit Dev Mode, Annotierungen, Status-Markierungen und exportierbaren Assets.

Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Design-Übergabe, Design-to-Dev-Handoff, Spec Handoff

Was ist Design Handoff?

Design Handoff bezeichnet den Moment und den Prozess, an dem Designer ihre Arbeit an Entwickler weitergeben. In Figma hat sich dieser Prozess von manuellen Spezifikationsdokumenten (PDFs, Word-Dokumente) hin zu einem vollständig integrierten, lebendigen Prozess im Design-Tool selbst entwickelt. Mit dem Dev Mode, Annotierungen, Status-Labels und einer klaren Dateisstruktur kann der Handoff direkt in Figma stattfinden.

Erklärung

Guter Handoff – die Grundlage

Ein effektiver Handoff kommuniziert an Entwickler:

1. Was gebaut werden soll (visuelles Design)
2. Wie es im Detail aussieht (Maße, Farben, Typografie, Abstände)
3. Warum Designentscheidungen so getroffen wurden (Kontext, Constraints)
4. Wie es sich verhält (Interaktionen, Zustände, Animationen)
5. Was bereits fertig ist und gebaut werden kann (Status)

Datei-Struktur für Handoff

Eine klare Figma-Dateistruktur ist die Basis guten Handoffs:

• Design Library Datei: Alle Komponenten, Styles und Variables
• Product Screens Datei: Alle Screens nach Feature oder User-Flow organisiert
• Prototype Datei: Interaktive Prototypen für Flows und Animationen
• Handoff Notes / Annotations: Direkt an Elementen oder in einer separaten Section

Sections innerhalb einer Datei können nach Status sortiert werden: „In Progress", „Ready for Review", „Ready for Dev", „Done".

Ready for Development

Figma erlaubt es Designern, Frames und Sections als „Ready for Development" zu markieren. Im Dev Mode erscheint ein grüner Haken-Badge. Das gibt Entwicklern eine klare Übersicht, welche Screens implementierbar sind, ohne einen Meeting-Abstimmung zu benötigen.

Markieren: Rechtsklick auf Frame/Section → „Mark as ready for development"

Annotations (seit 2024)

Annotations sind textuelle Erklärungen, die direkt im Dev Mode sichtbar sind. Designer fügen sie hinzu, um:

• Interaktionsverhalten zu erklären (z. B. „Dieser Button ist nur aktiv, wenn alle Felder ausgefüllt sind")
• Ausnahmen oder Edge Cases zu beschreiben
• Zugänglichkeitsanforderungen zu dokumentieren (ARIA-Labels, Fokusreihenfolge)

Annotations erscheinen als nummerierte Markierungen im Canvas und können im Dev Mode aufgeklappt werden.

Asset-Export-Vorbereitung

Vor dem Handoff sollten alle exportierbaren Assets (Icons, Bilder, Illustrationen) mit korrekten Export-Settings versehen sein:

• Format: SVG für Vektoren, PNG/WebP für Rasterbilder
• Skalierungen: 1x, 2x, 3x für Retina
• Korrekte Layer-Benennung (Dateiname = Layer-Name)

Prototype als Bewegungsspezifikation

Interaktionen und Animationen werden idealerweise als Prototype spezifiziert. Entwickler können im Dev Mode Prototype-Flows ansehen und Animationswerte (Duration, Easing) ablesen. Ein Kommentar mit Timing-Anforderungen ergänzt die Prototype-Ansicht.

Versionierung und Status-Kommunikation

Mit Figma Branching (Professional+) können Handoff-Versionen als Branches verwaltet werden. Entwickler arbeiten immer am Stand der verabschiedeten Version (main), während Designer an neuen Features in separaten Branches arbeiten.

Checkliste für sauberen Handoff

Vor dem Übergeben einer Design-Section sollte folgendes erfüllt sein:

• [ ] Alle Screens sind benannt und in logischen Sections organisiert
• [ ] Alle interaktiven Elemente haben alle States (Default, Hover, Focused, Disabled, Error)
• [ ] Mobile und Desktop-Varianten sind vorhanden
• [ ] Edge Cases sind designed (leere Zustände, lange Texte, Error States)
• [ ] Alle Farben und Typografie nutzen Styles oder Variables
• [ ] Exportierbare Assets haben Export-Settings
• [ ] Prototype zeigt alle relevanten Flows
• [ ] Frames sind als „Ready for Development" markiert
• [ ] Annotations für nicht-offensichtliche Verhaltensweisen sind gesetzt

Beispiele

1. Komponenten-System: Das Design System ist als eigene Library-Datei veröffentlicht. Entwickler abonnieren sie im Dev Mode und sehen alle Komponenten-Specs auf einen Klick.
2. Responsive Design: Alle drei Breakpoints (Mobile, Tablet, Desktop) sind als separate Frames in einer Section. Im Dev Mode kann der Entwickler zwischen den Breakpoints vergleichen.
3. Prototyping/Handoff: Ein Checkout-Flow-Prototype zeigt alle Schritte und Fehlerzustände. Entwickler sehen Animationswerte direkt im Dev Mode.
4. Team-Workflow: Designer markiert jeden Freitag neue Screens als „Ready for Dev". Das Sprint-Team sieht montags den aktuellen Stand ohne E-Mail-Austausch.
5. Design Tokens: Variables erscheinen im Dev Mode als CSS Custom Properties – Entwickler implementieren sie 1:1 in den Stylesheet-Token-Layer.

In der Praxis

Status setzen: Rechtsklick auf Frame → „Mark as ready for development" Annotation erstellen: Toolbar → Annotations-Tool → Element klicken → Text eingeben Export-Settings: Element auswählen → rechtes Panel → Exports → + → Format und Skalierung wählen Dev-Mode-Link: Presentation Mode oder Dev-Mode → Share → Link mit Dev-Zugang teilen Version einfrieren: File-Menü → Save to Version History → Version benennen

Vergleich & Abgrenzung

Figmas nativer Handoff via Dev Mode ist für die meisten Teams ausreichend. Zeplin bietet tiefere Integrationen (Jira, Slack, JIRA-Ticket-Verlinkung) und wird von Teams mit komplexen Workflows weiterhin genutzt.

Häufige Fragen (FAQ)

Wann sollte ich externe Tools wie Zeplin weiterhin nutzen? Wenn das Team Jira-Integration, detaillierte Versions-Kommentare, eigene Komponenten-Dokumentation (Storybook-Verlinkung) oder komplexe Multi-Marken-Handoffs benötigt, bietet Zeplin Mehrwert. Für die meisten mittelgroßen Produktteams ist der Figma Dev Mode seit 2024 ausreichend.

Kann ich den Handoff-Link öffentlich teilen? Figma-Links können als öffentlich oder auf bestimmte Team-Mitglieder beschränkt gesetzt werden. Für externe Entwickler (Freelancer, Agenturen) empfiehlt sich ein Figma-Guest-Seat oder ein View-only-Link mit Passwortschutz.

Verwandte Einträge

• Figma: Dev Mode
• Figma: Design Tokens
• Figma: Branching
• Figma: Sections

Weiterführend

• Figma Help Center – help.figma.com/hc/en-us/articles/360039238773
• Figma (2024): Handoff designs to developers. Figma Docs.
• Online: Zeroheight Blog – „The ultimate guide to design handoff in 2024"