Einführung in Prototyping in Figma

Vor dem Start

Wer kann diese Funktion verwenden?

Enthalten in allen Teams und Abos.

Nutzer*innen mit Schreibzugriff können Prototypen erstellen.

Nutzer*innen mit Lesezugriff können Prototypen in der Präsentationsansicht wiedergeben.

Mithilfe der Prototypenfunktion von Figma kannst du verschiedene interaktive Flows erstellen, mit denen du ausprobieren kannst, wie Nutzer*innen mit deinen Designs interagieren könnten.

Prototoypen sind eine fantastische Möglichkeit, um

• Interaktionen und User Flows anzuzeigen,
• Ideen zu teilen und zu iterieren,
• Feedback von Mitarbeiter*innen zu erhalten,
• Interaktionen mit Nutzer*innen zu testen und
• deine Designs den Stakeholdern zu präsentieren.

Sieh dir unten unser Video zur Erstellung von Prototypen an. Oder wirf einen Blick auf unsere Playlist zu Prototypen und Kollaboration auf YouTube.

Flows und Startpunkte

Du kannst in Figma mehrere Flows für deinen Prototypen auf einer Seite erstellen, um eine Vorschau auf das gesamte Erlebnis der Nutzer*innen durch deine Designs zu erhalten.

Ein Flow ist das Netzwerk von Rahmen (Frames) und Verbindungen auf einer einzelnen Seite. Ein Prototyp kann den gesamten Pfad von Nutzer*innen durch deine App oder Website abbilden oder sich auf einen bestimmten Abschnitt davon konzentrieren. Beispiel: Der Prototyp deckt alle möglichen Interaktionen auf einer E-Commerce-Website ab. Innerhalb des Prototyps gibt es Flows zum Erstellen eines Kontos, zum Hinzufügen von Artikeln in einen Warenkorb und zum Bezahlen.

Figma erstellt einen Flow-Startpunkt, wenn du die erste Verbindung zwischen zwei Rahmen hinzufügst. Es gibt noch weitere Möglichkeiten, um dem Prototyp einen Flow-Startpunkt hinzuzufügen:

• Wähle einen Frame aus und klicke im Abschnitt Fluss-Startpunkt in der rechten Seitenleiste.
• Klicke mit der rechten Maustaste auf den Rahmen, und klicke dann auf Add starting point (Startpunkt hinzufügen).
• Dupliziere einen Rahmen mit einem vorhandenen Startpunkt.

Wenn es an der Zeit ist, deine Entwürfe zu testen, kannst du entweder den gesamten Prototyp teilen oder den Link zu einem Flow-Startpunkt kopieren.

Weitere Informationen zu Startpunkten und Flüssen →

Verbindungen erstellen

1. Wähle den Hotspot für die Verbindung aus.
2. Klicke auf , um die Verbindung zu erstellen.
3. Ziehe sie zum Ziel.
4. Wenn keine Verbindungen vorhanden sind, macht Figma den ersten Rahmen zum Startpunkt.

Interaktionen und Animationen erstellen

1. Öffne in der rechten Seitenleiste den Prototyp-Tab.
2. Füge Interactions hinzu.
3. Lege Interaktionsdetails fest.
4. Wende eine Animation an.
5. Zeige eine Vorschau der Animation an.

Prototyp-Einstellungen anpassen

1. Wähle ein Device und ein Model aus.
2. Zeige eine Vorschau des Prototyps an.
3. Wähle eine Background color (Hintergrundfarbe) aus.
4. Lege den Startrahmen des Prototyps fest.

Weitere Informationen zur Prototyp-Erstellung

Starte jetzt

• Prototypen für Interaktionen und Animationen erstellen
• Startpunkt für Prototypen auswählen
• Device für Prototypen anpassen
• Prototypen für Aktionen, Auslöser und Animationen erstellen

Erweiterte Interaktionen

• Overlays in Prototypen erstellen
• Mit Smart-Animation erweiterte Animationen erstellen
• Prototypen für Scroll-Interaktionen mit Overflow-Verhalten erstellen
• Videos zu Prototypen hinzufügen
• Animierte GIFs zu Prototypen hinzufügen
• Variablen in Prototypen verwenden
• Ausdrücke in Prototypen verwenden
• Mehrere Aktionen und Bedingungen
• Modi für Variablen in Prototypen

Freigeben und zusammenarbeiten

• Prototyp-Verbindungen anzeigen
• Anzeigeoptionen für Prototyp-Präsentation festlegen
• Prototyp freigeben
• Prototypen auf Mobilgerät ansehen
• Prototypen kommentieren

Glossar

• Ein Hotspot ist der Ort, an dem die Interaktion stattfindet. Ein Hotspot kann jedes beliebige Objekt innerhalb des Original-Frames sein, beispielsweise ein Link, eine Schaltfläche, ein Bild oder ein Symbol.
• Verbindungen sind die blauen Pfeile oder Spaghetti, die den Hotspot mit dem Ziel verbinden. Die Interaktions- und Animationseinstellungen werden über die Verbindung angewendet.
• Ein Flow ist das Netzwerk der verbundenen Rahmen, die einen Weg durch einen Prototyp bilden. Jeder Flow hat seinen eigenen Startpunkt. Du kannst in einem Prototyp mehrere Flows haben.
• Der Startpunkt ist der erste Rahmen eines Flows. Lege mehrere Ausgangspunkte fest, um in der Präsentationsansicht verschiedene Flows des Prototyps zu zeigen.
• Der Auslöser bestimmt, welche Art von Interaktion mit dem Hotspot den Prototyp erweitert. Dies kann eine Maus- oder Touch-Interaktion sein, etwa Tippen, Ziehen, Klicken oder Schweben.
• Das Ziel ist der Punkt, an dem der Übergang endet. Dies muss ein Rahmen der obersten Ebene sein, d. h. ein Rahmen, der direkt der Arbeitsfläche hinzugefügt wird, Objekte in einem Rahmen werden nicht unterstützt. Wenn der Flow von A nach B verläuft, ist A der Hotspot und B das Ziel.
• Die Aktion definiert die Art des Fortschritts im Prototypen. Die Aktion könnte beispielsweise sein, zu einem anderen Rahmen zu navigieren oder eine externe URL zu öffnen.
• Die Einstellungen für die Animation bestimmen, wie sich der Prototyp von einem Rahmen zum nächsten bewegt. du kannst die Art der Animation, die Geschwindigkeit und die Richtung steuern.
• Der Übergang ist die Art der Animation. Damit wird festgelegt, wie sich die Aktion zum Ziel bewegt.
• Die Richtung legt fest, aus welcher Richtung der Übergang kommt. Wähle zwischen links, rechts, oben oder unten.
• Die Dauer legt fest, wie lange es dauert, die Animation abzuschließen. Je kürzer die Dauer, desto schneller der Übergang. Wähle eine Dauer zwischen 1 ms und 10.000 ms (10 Sekunden).
• Easing beeinflusst die Beschleunigung der Animation–d. h. ob sie langsam oder schnell startet. Auf diese Weise kannst du Animationen erstellen, die sich natürlicher anfühlen.
• Overlays sind Rahmen, die über dem aktuellen Screen oder Rahmen erscheinen. Mithilfe von Overlays kannst du Tool-Tipps, interaktive Menüs, Warnmeldungen oder Bestätigungen erstellen.
• Mit dem Overflow-Verhalten definierst du, wie dein Prototyp auf Scrollen reagiert. Auf diese Weise kannst du erweiterte Interaktionen für Nutzer*innen erstellen, z. B. Karussells, Galerien oder interaktive Karten.
• Wähle aus, welches Device bei der Präsentation des Prototyps angezeigt wird. Definiere sowohl das Gerät als auch das Modell.
• Mit der Hintergrundfarbe kannst du die Farbe im Hintergrund des Prototyps definieren.
• Wenn du einen Prototyp mit Rahmen im Hoch- und Querformat hast, kannst du eine Ausrichtung auswählen. Die Ausrichtung wird für den gesamten Prototyp festgelegt. Innerhalb eines Prototyps kann nicht zwischen Hoch- und Querformatansicht gewechselt werden.
• In der Vorschau siehst du, wie etwas im Prototyp aussehen oder funktionieren wird. Du kannst Vorschauen für Animationen und die Einstellungen des Geräts anzeigen, auf dem der Prototyp ausgeführt wird.