Prototyp-Flows erstellen und verwalten
Dieser Artikel ist für die bisherige und die neue Figma Benutzeroberfläche verfügbar. Über den Schiebeschalter unten links auf der Seite kannst du auf die gewünschte Benutzeroberfläche umschalten. Lerne UI3 kennen: Figma, neu gestaltet →
Vor dem Start
Wer kann diese Funktion verwenden?
Verfügbar in allen Abos
Erfordert Schreibzugriff auf eine Datei
Beim Prototyping in Figma kannst du multiple Flows erstellen, um unterschiedliche Abschnitte der User Journey zu testen.
Ein Flow ist eine Reihe von verbundenen Rahmen, die eine zusammenhängende Prototyp-Erfahrung ergeben. Ein Prototyp für eine Shopping-App kann beispielsweise einen Flow zur Kontoerstellung beinhalten, einen weiteren Flow für das Durchsuchen der angebotenen Produkte und noch einen für den Kaufvorgang – und das alles auf einer Seite.
Einen Prototyp-Flow erstellen
Flow-Startpunkte
Ein Flow beginnt an einem festgelegten Flow-Startpunkt. Flow-Startpunkte befinden sich auf Rahmen der obersten Ebene.
Beim Hinzufügen einer Verbindung zwischen zwei Rahmen, die bisher nicht verbunden sind, erstellt Figma am Ausgangspunkt der Verbindung einen Startpunkt auf dem Rahmen der obersten Ebene. Flow-Startpunkte werden auf der Arbeitsfläche mit einem blauen Vorschausymbol und dem Namen des Flows markiert.
Jedem Rahmen kann nur ein Flow-Startpunkt zugeordnet werden.
Du kannst einen Flow-Startpunkt auch manuell erstellen.
- Wähle den Startrahmen aus.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Klicke im Abschnitt Flow-Startpunkt das Pluszeichen.
So kannst du dir alle Flow-Startpunkte auf der aktuellen Seite anzeigen lassen:
- Klicke auf eine leere Stelle auf der Arbeitsfläche, um die Auswahl aller Objekte aufzuheben.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Im Abschnitt Flows wird eine Liste aller Flow-Startpunkte angezeigt.
- Bewege den Mauszeiger über einen Flow-Namen und klicke auf Select frame (Rahmen auswählen), um direkt zu dem Rahmen mit dem Startpunkt zu gelangen.
Rahmen zu einem Flow hinzufügen oder entfernen
Wenn du einen Flow-Startpunkt erstellt hast, besteht der weitere Flow aus allen Rahmen, die über Prototyp-Interaktionen mit dem Startpunkt verbunden sind. Dazu gehören Rahmen, die direkt mit dem Startpunkt verbunden sind, aber auch Rahmen, die durch andere Interaktionen verbunden sind.
Im Bild unten sind beispielsweise alle violetten Rahmen Teil von Flow 1:
Wenn du einen Rahmen aus einem Flow entfernen möchtest, entferne alle Prototyp-Interaktionen, die den Rahmen mit anderen Rahmen, die Teil des Flows sind, verbinden.
Rahmen können Teil von mehreren Flows sein. Im Bild unten ist beispielsweise der blaue Rahmen sowohl Teil von Flow 1 als auch von Flow 2:
Wenn Nutzer*innen einen Rahmen auswählen, der Teil von mehreren Flows ist, können sie jede Interaktion für diesen Rahmen nutzen. Dadurch kann der ursprüngliche Flow alle Verbindungen dieses Rahmens enthalten.
Prototyp-Flows verwalten
Flow-Namen bearbeiten
Wenn du einen Flow erstellt hast, gibt Figma ihm standardmäßig den Namen Flow 1. Weitere Flows werden dementsprechend Flow 2, Flow 3 usw. genannt. Du kannst einen Flow jederzeit umbenennen.
Einen Flow umbenennen:
- Wähle den Startrahmen aus.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Wähle im Abschnitt Flow starting point (Flow-Startpunkt) das Feld für den Flow-Namen aus.
- Gib einen neuen Namen für den Flow ein.
Anschließend wird der neue Flow-Name im blauen Startpunkt-Symbol des Rahmens und in der linken Seitenleiste der Präsentationsansicht angezeigt.
Tipp: Du kannst einen Flow auch umbenennen, indem du direkt auf der Arbeitsfläche mit einem Doppelklick auf den Namen des Flow-Startpunkts klickst.
Eine Flow-Beschreibung hinzufügen
Flow-Namen und -Beschreibungen werden in der Präsentationsansicht in der linken Seitenleiste angezeigt. Mit Beschreibungen kannst du Teilnehmer*innen in Usability-Tests Instruktionen geben oder zusätzlichen Kontext und Dokumentationen für dein Team bereitstellen. Beschreibungen können fett formatierten Text, Aufzählungslisten oder nummerierte Listen sowie Hyperlinks enthalten.
Eine Flow-Beschreibung hinzufügen:
- Wähle den Rahmen mit dem Flow-Startpunkt aus.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Klicke im Bereich Flow starting point (Flow-Startpunkt) neben dem Namen des Flows, den du anpassen möchtest, auf Edit description (Beschreibung bearbeiten).
- Füge eine Rich-Text-Beschreibung hinzu.
- Klicke auf X, um das Beschreibungsfeld zu verlassen und die Beschreibung zu speichern.
Anschließend wird die Beschreibung in der Präsentationsansicht in der linken Seitenleiste angezeigt.
Einen Flow-Startpunkt verschieben
Figma verwendet standardmäßig die erste von dir erstellte Verbindung als Flow-Startpunkt. Du kannst einen Startpunkt aber auch zu einem anderen Rahmen verschieben.
- Wähle auf der Arbeitsfläche das blaue Startpunkt-Symbol aus.
- Klicke und ziehe den Flow-Namen zu einem neuen Startrahmen.
Flow-Startpunkte entfernen
So entfernst du einen Flow-Startpunkt:
- Wähle den Rahmen mit dem Flow-Startpunkt aus.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Klicke im Abschnitt Flow starting point (Flow-Startpunkt) auf Remove starting point (Startpunkt entfernen).
Tipp: Du kannst einen Flow-Startpunkt auch entfernen, indem du direkt auf der Arbeitsfläche das blaue Startpunkt-Symbol auswählst und es durch Klicken und Ziehen über den Rand des Rahmens hinaus auf einen leeren Teil der Arbeitsfläche bewegst.
Prototyp-Flows wiedergeben und teilen
Eine Flow-Vorschau anzeigen
Mit der Inline-Vorschau kannst du dir deine Prototyp-Flows direkt im Editor ansehen.
- Klicke auf eine leere Stelle auf der Arbeitsfläche, um die Auswahl aller Objekte aufzuheben.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Im Abschnitt Flows wird eine Liste aller Flows angezeigt.
- Bewege den Mauszeiger über einen Flow-Namen und klicke auf Preview (Vorschau), um die Inline-Vorschau zu öffnen.
In der Inline-Vorschau kannst du jede Prototyp-Interaktion auslösen, um deinen gesamten Flow zu überprüfen.
Tipp: Du kannst die Inline-Vorschau auch öffnen, indem du auf das blaue Vorschau-Symbol eines beliebigen Flow-Startpunkts klickst.
Flow-Links kopieren und teilen
Du kannst deine Prototyp-Flows mit anderen teilen, um Feedback zu spezifischen User Flows oder Journeys einzuholen. Wenn du einen Prototyp-Flow teilst, können die betreffenden Nutzer*innen den Prototyp in der Präsentationsansicht wiedergeben. In der Präsentationsansicht können Nutzer*innen außerdem jeden anderen Flow auswählen und wiedergeben.
Über die Arbeitsfläche:
- Wähle den Rahmen mit dem Flow-Startpunkt aus.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Bewege den Mauszeiger neben die Überschrift Flow starting point (Flow-Startpunkt).
- Klicke auf Copy link (Link kopieren).
Über die Präsentationsansicht:
- Wähle in der linken Seitenleiste den Flow aus, den du teilen möchtest.
- Klicke in der Toolbar auf Share prototype (Prototyp teilen).
- Klicke auf Copy link (Link kopieren).
Vor dem Start
Wer kann diese Funktion verwenden?
Verfügbar für jedes Team und jeden Plan.
Alle Personen mit Schreibzugriff auf eine Datei können Prototyp-Flows erstellen.
Beim Prototyping in Figma kannst du multiple Flows erstellen, um unterschiedliche Abschnitte der User Journey zu testen.
Ein Flow ist eine Reihe von verbundenen Rahmen, die eine zusammenhängende Prototyp-Erfahrung ergeben. Ein Prototyp für eine Shopping-App kann beispielsweise einen Flow zur Kontoerstellung beinhalten, einen weiteren Flow für das Durchsuchen der angebotenen Produkte und noch einen für den Kaufvorgang – und das alles auf einer Seite.
Einen Prototyp-Flow erstellen
Flow-Startpunkte
Ein Flow beginnt an einem festgelegten Flow-Startpunkt. Flow-Startpunkte befinden sich auf Rahmen der obersten Ebene.
Beim Hinzufügen einer Verbindung zwischen zwei Rahmen, die bisher nicht verbunden sind, erstellt Figma am Ausgangspunkt der Verbindung einen Startpunkt auf dem Rahmen der obersten Ebene. Flow-Startpunkte werden auf der Arbeitsfläche mit einem blauen Vorschausymbol und dem Namen des Flows markiert.
Jedem Rahmen kann nur ein Flow-Startpunkt zugeordnet werden.
Du kannst einen Flow-Startpunkt auch manuell erstellen.
- Wähle den Startrahmen aus.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Klicke im Abschnitt Flow-Startpunkt das Pluszeichen.
So kannst du dir alle Flow-Startpunkte auf der aktuellen Seite anzeigen lassen:
- Klicke auf eine leere Stelle auf der Arbeitsfläche, um die Auswahl aller Objekte aufzuheben.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Im Abschnitt Flows wird eine Liste aller Flow-Startpunkte angezeigt.
- Bewege den Mauszeiger über einen Flow-Namen und klicke auf Select frame (Rahmen auswählen), um direkt zu dem Rahmen mit dem Startpunkt zu gelangen.
Rahmen zu einem Flow hinzufügen oder entfernen
Wenn du einen Flow-Startpunkt erstellt hast, besteht der weitere Flow aus allen Rahmen, die über Prototyp-Interaktionen mit dem Startpunkt verbunden sind. Dazu gehören Rahmen, die direkt mit dem Startpunkt verbunden sind, aber auch Rahmen, die durch andere Interaktionen verbunden sind.
Im Bild unten sind beispielsweise alle violetten Rahmen Teil von Flow 1:
Wenn du einen Rahmen aus einem Flow entfernen möchtest, entferne alle Prototyp-Interaktionen, die den Rahmen mit anderen Rahmen, die Teil des Flows sind, verbinden.
Rahmen können Teil von mehreren Flows sein. Im Bild unten ist beispielsweise der blaue Rahmen sowohl Teil von Flow 1 als auch von Flow 2:
Wenn Nutzer*innen einen Rahmen auswählen, der Teil von mehreren Flows ist, können sie jede Interaktion für diesen Rahmen nutzen. Dadurch kann der ursprüngliche Flow alle Verbindungen dieses Rahmens enthalten.
Prototyp-Flows verwalten
Flow-Namen bearbeiten
Wenn du einen Flow erstellt hast, gibt Figma ihm standardmäßig den Namen Flow 1. Weitere Flows werden dementsprechend Flow 2, Flow 3 usw. genannt. Du kannst einen Flow jederzeit umbenennen.
Einen Flow umbenennen:
- Wähle den Startrahmen aus.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Wähle im Abschnitt Flow starting point (Flow-Startpunkt) das Feld für den Flow-Namen aus.
- Gib einen neuen Namen für den Flow ein.
Anschließend wird der neue Flow-Name im blauen Startpunkt-Symbol des Rahmens und in der linken Seitenleiste der Präsentationsansicht angezeigt.
Tipp: Du kannst einen Flow auch umbenennen, indem du direkt auf der Arbeitsfläche mit einem Doppelklick auf den Namen des Flow-Startpunkts klickst.
Eine Flow-Beschreibung hinzufügen
Flow-Namen und -Beschreibungen werden in der Präsentationsansicht in der linken Seitenleiste angezeigt. Mit Beschreibungen kannst du Teilnehmer*innen in Usability-Tests Instruktionen geben oder zusätzlichen Kontext und Dokumentationen für dein Team bereitstellen. Beschreibungen können fett formatierten Text, Aufzählungslisten oder nummerierte Listen sowie Hyperlinks enthalten.
Eine Flow-Beschreibung hinzufügen:
- Wähle den Rahmen mit dem Flow-Startpunkt aus.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Klicke im Bereich Flow starting point (Flow-Startpunkt) neben dem Namen des Flows, den du anpassen möchtest, auf Edit description (Beschreibung bearbeiten).
- Füge eine Rich-Text-Beschreibung hinzu.
- Klicke auf X, um das Beschreibungsfeld zu verlassen und die Beschreibung zu speichern.
Anschließend wird die Beschreibung in der Präsentationsansicht in der linken Seitenleiste angezeigt.
Einen Flow-Startpunkt verschieben
Figma verwendet standardmäßig die erste von dir erstellte Verbindung als Flow-Startpunkt. Du kannst einen Startpunkt aber auch zu einem anderen Rahmen verschieben.
- Wähle auf der Arbeitsfläche das blaue Startpunkt-Symbol aus.
- Klicke und ziehe den Flow-Namen zu einem neuen Startrahmen.
Flow-Startpunkte entfernen
So entfernst du einen Flow-Startpunkt:
- Wähle den Rahmen mit dem Flow-Startpunkt aus.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Klicke im Abschnitt Flow starting point (Flow-Startpunkt) auf Remove starting point (Startpunkt entfernen).
Tipp: Du kannst einen Flow-Startpunkt auch entfernen, indem du direkt auf der Arbeitsfläche das blaue Startpunkt-Symbol auswählst und es durch Klicken und Ziehen über den Rand des Rahmens hinaus auf einen leeren Teil der Arbeitsfläche bewegst.
Prototyp-Flows wiedergeben und teilen
Eine Flow-Vorschau anzeigen
Mit der Inline-Vorschau kannst du dir deine Prototyp-Flows direkt im Editor ansehen.
- Klicke auf eine leere Stelle auf der Arbeitsfläche, um die Auswahl aller Objekte aufzuheben.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Im Abschnitt Flows wird eine Liste aller Flows angezeigt.
- Bewege den Mauszeiger über einen Flow-Namen und klicke auf Preview (Vorschau), um die Inline-Vorschau zu öffnen.
In der Inline-Vorschau kannst du jede Prototyp-Interaktion auslösen, um deinen gesamten Flow zu überprüfen.
Tipp: Du kannst die Inline-Vorschau auch öffnen, indem du auf das blaue Vorschau-Symbol eines beliebigen Flow-Startpunkts klickst.
Flow-Links kopieren und teilen
Du kannst deine Prototyp-Flows mit anderen teilen, um Feedback zu spezifischen User Flows oder Journeys einzuholen. Wenn du einen Prototyp-Flow teilst, können die betreffenden Nutzer*innen den Prototyp in der Präsentationsansicht wiedergeben. In der Präsentationsansicht können Nutzer*innen außerdem jeden anderen Flow auswählen und wiedergeben.
Über die Arbeitsfläche:
- Wähle den Rahmen mit dem Flow-Startpunkt aus.
- Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
- Bewege den Mauszeiger neben die Überschrift Flow starting point (Flow-Startpunkt).
- Klicke auf Copy link (Link kopieren).
Über die Präsentationsansicht:
- Wähle in der linken Seitenleiste den Flow aus, den du teilen möchtest.
- Klicke in der Toolbar auf Share prototype (Prototyp teilen).
- Klicke auf Copy link (Link kopieren).