Prototyping in Figma ist das Erstellen interaktiver, klickbarer Demos direkt im Design-Canvas, die Nutzerinteraktionen wie Navigation, Hover, Drag und komplexe Übergänge simulieren.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Klickdummy, Interaktiver Prototyp, Hi-Fi-Prototype, Figma Flows
Was ist Prototyping in Figma?
Prototyping erlaubt es, aus statischen Designs interaktive Demos zu machen. Verbindungen zwischen Frames (sogenannte Flows) definieren, was passiert, wenn ein Nutzer auf ein Element klickt, hoveret oder wischt. Der Prototype läuft im Figma-Presentation-Modus oder kann als Link geteilt werden – für Nutzertests, Stakeholder-Reviews und Entwickler-Abstimmung.
Erklärung
Prototype-Tab
Das Prototyping in Figma erfolgt im Prototype-Tab des rechten Panels. Dort lassen sich Verbindungen (Connections/Noodles) von Elementen zu Ziel-Frames ziehen. Jede Verbindung trägt:
- Trigger: Was löst die Interaktion aus? (On Click, On Hover, On Drag, On Press, Mouse Enter/Leave, Key/Gamepad, After Delay)
- Action: Was soll passieren? (Navigate To, Open Overlay, Scroll To, Back, Close Overlay, Set Variable, Play Effect)
- Transition: Wie wird der Übergang animiert? (Dissolve, Move In, Move Out, Push, Slide In/Out, Smart Animate, Scroll Animate)
- Easing und Duration: Geschwindigkeit und Bewegungskurve der Animation.
Flows
Flows definieren den Startpunkt eines Prototypen. Jeder Flow beginnt bei einem bestimmten Frame. Eine Figma-Datei kann mehrere Flows enthalten (z. B. „Onboarding Flow", „Checkout Flow"), die separat geteilt oder präsentiert werden können. Flows werden im Prototype-Tab als benannte Einstiegspunkte gesetzt.
Overlays
Overlays sind Frames, die über dem aktuellen Screen erscheinen – für Modals, Dropdown-Menüs, Tooltips, Bottom Sheets. Man konfiguriert:
- Position (Center, Top Center, Bottom Center, Manual)
- Hintergrund-Dimming
- Schließen durch Klick außerhalb
Scroll-Verhalten
Frames können als Scrollcontainer definiert werden. Ein Frame mit fester Höhe und Overflow-Content scrollt im Prototype vertikal oder horizontal. Sticky-Elemente (z. B. Navigation) bleiben an ihrer Position.
Interactive Components
Mit Interactive Components werden Prototype-Verbindungen direkt in einer Komponente definiert (z. B. Button Default → Hover bei Mouse Enter). Jede Instanz dieser Komponente erbt das Verhalten automatisch – kein manuelles Verbinden jedes einzelnen Elements im Prototype-Canvas nötig.
Presentation Mode
Der Prototype läuft im Presentation Mode (Figma Mirror oder Browser). Er kann als Link geteilt werden und erfordert keinen Figma-Account zum Betrachten. Für Nutzertests kann man den Prototype im Vollbildmodus ohne UI-Elemente teilen.
Prototype-Links
Prototype-Links können mit Passwort geschützt werden und haben eine eigene URL. Sie können in Usability-Test-Tools (Maze, UserTesting, Lookback) eingebettet werden, die automatisch Klickpfade und Heatmaps aufzeichnen.
Beispiele
- Komponenten-System: Interactive Components für alle interaktiven Elemente (Buttons, Inputs, Toggles) – Hover- und Fokus-States sind automatisch in jeder Instanz aktiv.
- Responsive Design: Separate Flows für Mobile und Desktop erlauben das Testen beider Varianten mit demselben Prototype-Link.
- Prototyping/Handoff: Ein vollständig verknüpfter Prototype zeigt Entwicklern alle Übergänge, Animationszeiten und Overlay-Verhalten – reduziert Rückfragen erheblich.
- Team-Workflow: Stakeholder erhalten einen Prototype-Link und können im Browser klicken, ohne Figma zu installieren. Kommentare können direkt im Prototype hinterlassen werden.
- Nutzertests: Der Prototype wird in Maze eingebettet; Nutzerpfade, Klickzeiten und Fehlklicks werden automatisch ausgewertet.
In der Praxis
Prototype-Tab öffnen: Rechtes Panel → „Prototype"-Reiter Verbindung erstellen: Element im Canvas hovern → lila Kreis erscheint → auf Ziel-Frame ziehen Flow setzen: Frame auswählen → Prototype-Tab → „+" bei Flows → als Start-Frame definieren Overlay erstellen: Verbindung ziehen → Action: „Open Overlay" → Position und Schließverhalten wählen Prototype testen: Cmd+Enter (Mac) / Ctrl+Enter (Win) → Presentation Mode öffnet sich Prototype-Link teilen: Im Presentation Mode → Share-Button → Link kopieren
Vergleich & Abgrenzung
| Figma Prototyping | Adobe XD | InVision | Framer | |
|---|---|---|---|---|
| Im Design-Tool integriert | Ja | Ja | Nein | Ja |
| Smart Animate | Ja | Teilweise | Nein | Ja |
| Interactive Components | Ja | Nein | Nein | Ja |
| Conditional Logic | Ja (Variables) | Nein | Nein | Ja (Code) |
| Code-Export | Nein | Teilweise | Nein | Ja |
Figmas Prototyping ist für die meisten UX-Anwendungsfälle ausreichend und hat den Vorteil, direkt im Design-Tool zu leben. Framer bietet mehr Code-basierte Interaktivität, erfordert aber mehr technisches Wissen.
Häufige Fragen (FAQ)
Können mehrere Designer gleichzeitig am Prototype arbeiten? Ja. Da Figma vollständig cloudbasiert und kollaborativ ist, können mehrere Personen gleichzeitig Prototype-Verbindungen hinzufügen. Es gibt jedoch keine Konfliktauflösung – parallele Änderungen an derselben Verbindung können sich überschreiben.
Funktioniert der Prototype auch auf Mobilgeräten? Ja. Die Figma Mirror App (iOS/Android) ermöglicht die Vorschau des Prototypen auf echten Geräten in Echtzeit. Alternativ kann der Prototype-Link im mobilen Browser geöffnet werden. Für Gestensteuerung (Swipe, Pinch) sind spezifische Trigger konfigurierbar.
Wie teste ich mit echten Nutzerdaten im Prototype? Über Figma Variables können String-Variablen mit Textinhalten verknüpft werden, die im Prototype umschaltbar sind. Für komplexe dynamische Daten empfiehlt sich die Integration mit Maze oder Prototyp-Tools, die Daten-Substitution unterstützen.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/hc/en-us/categories/360002051613
- Figma (2024): Prototyping in Figma. Figma Docs.
- Online: UX Collective – „The complete guide to Figma prototyping"
