Prototyp-Flows erstellen und verwalten

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.

1. Wähle den Startrahmen aus.
2. Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
3. Klicke im Abschnitt Flow-Startpunkt das Pluszeichen.

So kannst du dir alle Flow-Startpunkte auf der aktuellen Seite anzeigen lassen:

1. Klicke auf eine leere Stelle auf der Arbeitsfläche, um die Auswahl aller Objekte aufzuheben.
2. Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
3. Im Abschnitt Flows wird eine Liste aller Flow-Startpunkte angezeigt.
4. 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:

1. Wähle den Startrahmen aus.
2. Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
3. Wähle im Abschnitt Flow starting point (Flow-Startpunkt) das Feld für den Flow-Namen aus.
4. 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.

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:

1. Wähle den Rahmen mit dem Flow-Startpunkt aus.
2. Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
3. Klicke im Bereich Flow starting point (Flow-Startpunkt) neben dem Namen des Flows, den du anpassen möchtest, auf Edit description (Beschreibung bearbeiten).
4. Füge eine Rich-Text-Beschreibung hinzu.
5. 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.

1. Wähle auf der Arbeitsfläche das blaue Startpunkt-Symbol aus.
2. Klicke und ziehe den Flow-Namen zu einem neuen Startrahmen.

Flow-Startpunkte entfernen

So entfernst du einen Flow-Startpunkt:

1. Wähle den Rahmen mit dem Flow-Startpunkt aus.
2. Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
3. Klicke im Abschnitt Flow starting point (Flow-Startpunkt) auf Remove starting point (Startpunkt entfernen).

Prototyp-Flows wiedergeben und teilen

Eine Flow-Vorschau anzeigen

Mit der Inline-Vorschau kannst du dir deine Prototyp-Flows direkt im Editor ansehen.

1. Klicke auf eine leere Stelle auf der Arbeitsfläche, um die Auswahl aller Objekte aufzuheben.
2. Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
3. Im Abschnitt Flows wird eine Liste aller Flows angezeigt.
4. 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.

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:

1. Wähle den Rahmen mit dem Flow-Startpunkt aus.
2. Wähle in der rechten Seitenleiste den Prototyp-Tab aus.
3. Bewege den Mauszeiger neben die Überschrift Flow starting point (Flow-Startpunkt).
4. Klicke auf Copy link (Link kopieren).

Über die Präsentationsansicht:

1. Wähle in der linken Seitenleiste den Flow aus, den du teilen möchtest.
2. Klicke in der Toolbar auf Share prototype (Prototyp teilen).
3. Klicke auf Copy link (Link kopieren).