Prototyping in Figma bezeichnet die Erstellung interaktiver, klickbarer Prototypen durch Verbinden von Frames mit Interaktionen, Transitions und Overlays – ohne Code und direkt im Browser oder auf einem Gerät testbar.
Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Interactive Prototype, Clickable Prototype, High-Fidelity Prototype; Prototyping-Tab (rechtes Panel)
Was ist Prototyping in Figma?
Figmas Prototyping-Funktion verwandelt statische Designs in interaktive Erlebnisse, die auf echten Geräten oder im Browser getestet werden können. Designer können ohne Programmierkenntnisse navigierbare, realistische Benutzerflüsse erstellen – von einfachen Bildschirmübergängen bis hin zu komplexen Micro-Interaktionen mit Overlays, Scroll-Verhalten und variablengesteuerter Logik.
Prototypen werden direkt aus dem Design-Modus heraus im Prototyping-Tab (rechtes Panel) erstellt und können über einen einfachen Share-Link mit Stakeholdern, Entwicklern oder Usability-Test-Teilnehmern geteilt werden.
Erklärung
Prototyping-Tab aktivieren
Im rechten Panel oben zwischen „Design", „Prototype" und „Inspect" wechseln. Im Prototyping-Tab erscheinen Optionen für Interaktionen, Flow-Start-Punkte und die Prototype-Einstellungen (Gerät, Hintergrundfarbe).
Connections (Verbindungen) erstellen
Eine Verbindung verbindet ein Element oder einen Frame mit einem Ziel-Frame:
- Im Prototyping-Modus auf ein Element klicken.
- Den erscheinenden blauen Pfeil-Kreispunkt nach rechts (oder auf ein anderes Element) ziehen.
- Ziel-Frame auswählen.
- Im erscheinenden Dialog: Trigger, Action und Transition definieren.
Verbindungen sind durch blaue Pfeile auf der Canvas sichtbar.
Trigger-Typen
- On Click / On Tap: Klick/Tippen auf das Element (häufigster Trigger).
- On Drag: Ziehen des Elements löst die Aktion aus (für Swipe-Gesten).
- While Hovering: Hover-State (für Desktop-Designs).
- While Pressing: Gedrückt halten.
- Mouse Enter / Mouse Leave: Beim Betreten/Verlassen mit der Maus.
- After Delay: Nach einer definierten Zeitspanne – für Auto-Advances (z. B. Loading-Screen → Dashboard nach 2 Sekunden).
- On Component State Change: Nur innerhalb von Component Sets – wenn eine Variante gewechselt wird.
- Key/Gamepad: Tastendruck als Trigger.
Action-Typen
- Navigate To: Wechselt zu einem anderen Frame (Standard für Screen-Navigation).
- Open Overlay: Öffnet einen anderen Frame als Overlay über dem aktuellen Frame.
- Swap Overlay: Ersetzt das aktuelle Overlay durch ein anderes.
- Close Overlay: Schließt das aktuelle Overlay.
- Scroll To: Scrollt zu einem bestimmten Element innerhalb des aktuellen Frames.
- Open Link: Öffnet eine externe URL.
- Back: Geht zum vorherigen Frame zurück.
- Set Variable: Setzt eine Variable auf einen neuen Wert (für Conditional Prototyping, seit 2024).
Transition-Typen
- Instant: Sofortiger Wechsel ohne Animation.
- Dissolve: Einblendung/Ausblendung (Fade).
- Smart Animate: Intelligente Animation basierend auf gleichen Layer-Namen zwischen Frames (eigener Wiki-Eintrag).
- Move In / Move Out: Frame bewegt sich von einer Seite herein oder heraus.
- Push: Aktueller Frame wird weggedrückt, neuer Frame schiebt sich herein.
- Slide In / Slide Out: Ähnlich wie Push, aber mit Überlappung.
Zusätzlich: Easing-Kurven (Ease In, Ease Out, Ease In and Out, Linear, Spring, Custom Bezier) und Dauer (in ms) können konfiguriert werden.
Flows und Flow-Start-Punkte
Ein Flow ist eine definierte Startseite eines Prototypen. Ein Frame wird als Flow-Start markiert, indem man im Prototyping-Tab auf „+" neben „Flows" klickt oder im Frame Rechtsklick → „Set as Starting Frame". Es können mehrere Flows in einer Datei existieren (z. B. Onboarding-Flow, Checkout-Flow, Error-Flow).
Flows erscheinen im Präsentationsmodus als separate Eintrittspunkte.
Overlays
Overlays öffnen einen Frame über dem aktuellen Frame – ideal für Modale, Bottom Sheets, Tooltips und Dropdown-Menüs:
- Position: Manual, Centered, Top, Bottom, Left, Right
- Backdrop: Hintergrundverdunkelung an/aus.
- Close on Click Outside: Overlay schließt sich beim Klick auf den Hintergrund.
Scroll-Verhalten
Ein Frame mit Scroll-Verhalten ermöglicht, dass der Inhalt innerhalb eines definierten Bereichs scrollbar ist:
- Outer Frame (Screen-Größe) auswählen.
- Im Prototyping-Tab „Scroll Behavior" auf „Vertical Scroll" setzen.
- Den Inhalt-Frame größer als den Outer Frame machen.
„Fix Position When Scrolling" kann für einzelne Elemente aktiviert werden (z. B. Sticky Header).
Conditional Prototyping (2024)
Mit Figma Variables können seit 2024 Conditional Interactions erstellt werden: Eine Aktion wird nur ausgeführt, wenn eine Variable einen bestimmten Wert hat. Das ermöglicht einfache Logik in Prototypen (z. B. Fehler-State bei leerem Formularfeld, personalisierte Flows).
Prototypen teilen und präsentieren
- Prototype-Modus: Im Figma-Interface oben rechts auf den Play-Button klicken → Prototyp öffnet sich im Browser.
- Share-Link: Den Prototype-Link teilen – Empfänger können den Prototypen ohne Figma-Account testen.
- Figma Mirror App: Den Prototypen live auf einem iOS/Android-Gerät spiegeln.
- Presentation Mode: Vollbild-Darstellung mit Geräte-Rahmen.
Beispiele
- App-Onboarding-Flow: 5 Frames verbunden mit „Push"-Transitions und „Spring"-Easing. Rückwärts-Navigation per Swipe-Gesture (On Drag, Navigate Back).
- Modal Dialog: Button → „Open Overlay" auf Modal-Frame, Backdrop aktiv, Close-Button im Modal → „Close Overlay".
- Bottom Navigation: Alle Nav-Tabs mit „Navigate To" verbunden zu den jeweiligen Screens. „Instant"-Transition für schnelle Navigation.
- Form mit Fehler-State: Submit-Button → Conditional: Wenn Variable
formValid = false→ Navigate zu Error-State-Frame; wenntrue→ Navigate zu Success-Screen. - Hover-States für Desktop: Buttons mit „While Hovering" Trigger und „Smart Animate" Transition zu Hover-Variante.
In der Praxis
Shortcuts:
- Prototyping-Tab: Im rechten Panel auf „Prototype" klicken.
- Prototyp starten:
Strg+Alt+Enter/Cmd+Option+Enter(Prototype-Modus) - Alle Verbindungen sichtbar machen: Im Prototyping-Tab auf Prototype klicken – blaue Pfeile erscheinen.
Best Practices:
- Flows für verschiedene Nutzungsszenarien anlegen (Happy Path, Error Path, Edge Cases).
- Übergänge sparsam einsetzen – zu viele Animationen überfordern Stakeholder in Reviews.
- Prototypen für Usability Tests so realistisch wie nötig, aber so einfach wie möglich halten.
- Bevor man Conditional Prototyping nutzt: Sicherstellen, dass einfachere Alternativen (mehrere separate Flows) nicht ausreichen.
Häufige Fehler:
- Vergessen, einen Flow-Start-Punkt zu setzen – der Prototyp startet dann am zufälligen ersten Frame.
- Zu komplexe Prototypen bauen – für einfache Usability Tests reicht oft ein Low-Fidelity-Klickprototyp.
Vergleich & Abgrenzung
Sketch benötigt für Prototyping Plugins oder den Export zu InVision / Marvel. Adobe XD hat natives Prototyping ähnlich wie Figma, aber mit weniger Trigger-Optionen. Framer ermöglicht Code-basiertes Prototyping mit mehr Logik-Optionen. ProtoPie und Principle sind spezialisierte Prototyping-Tools mit mehr Animations-Power, aber ohne Design-Funktion. Figma ist das umfassendste All-in-One-Design-Prototyping-Tool.
Häufige Fragen (FAQ)
Kann ich Prototypen offline nutzen? Figma-Prototypen laufen im Browser und benötigen eine Internetverbindung. Die Figma Mirror App ermöglicht Offline-Vorschau, wenn das Gerät zuvor verbunden war. Eine echte Offline-Funktion gibt es in der aktuellen Version nicht.
Kann ich Animationen aus Figma in Code exportieren? Nicht direkt, aber Tools wie LottieFiles (Plugin) oder Anima können Figma-Animationen in Lottie-JSON oder CSS-Keyframes exportieren. Smart-Animate-Übergänge lassen sich manuell in CSS-Transitions übersetzen.
Wie viele Frames kann ein Prototyp haben? Technisch gibt es keine Obergrenze, aber Performance-Probleme können bei sehr großen Prototypen auftreten. Für Usability Tests empfehlen sich fokussierte Flows mit 10–30 Frames.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/de
- Figma-Dokumentation: „Prototype interactions and animations" – help.figma.com
- AJ&Smart: „Figma Prototyping Course" (YouTube, 2024)
