Prototypen abspielen

Vor dem Start

Wer diese Funktion nutzen kann

Nutzer*innen  jedes Teams oder Abos können Prototypen abspielen

Alle Personen mit Lesezugriff auf eine Datei oder einen Prototyp können Prototypen abspielen und in der Präsentationsansicht die Anzeigeoptionen ändern.

Prototypen replizieren, wie Nutzer*innen mit deinen Designs interagieren könnten. So kannst du die Funktionsweise sehen und testen, bevor du in die Entwicklungsphase gehst. Erstelle deine Prototypen in Figma direkt auf der Arbeitsfläche. Spiele sie dann ab, um Prototypen-Interaktionen und -Animationen in Aktion zu sehen.

Bevor du den Prototyp abspielst, bereite das Design vor, sodass der Prototyp wie gewünscht abgespielt werden kann.

Wähle dann aus, wie du den Prototyp abspielen möchtest:

• Preview (Vorschau): Spiele den Prototyp mit einer Inline-Vorschau direkt im Editor ab. Verwende Preview, um zu sehen, wie der Prototyp funktioniert, während du ihn erstellst – alles im selben Tab.
• Present (Präsentation): Spiele den Prototyp in einem separaten Tab in der Präsentationsansicht ab. Verwende Present, um den Prototyp mit anderen zu teilen oder um zu sehen, wie er auf einem bestimmten Gerät aussieht.

Prototypen zum Abspielen vorbereiten

Die Art und Weise, wie Rahmen und Verbindungen auf der Arbeitsfläche eingerichtet sind, wirkt sich darauf aus, wie Prototypen abgespielt werden:

• Das Design muss innerhalb eines Rahmens liegen, um den Prototyp als Preview oder Present abspielen zu können.
• Falls Prototyp-Verbindungen vorhanden sind, zeigt Firma nur Rahmen mit Verbindungen an, während der Prototyp abgespielt wird. Klicke dich durch die Bildschirme oder interagiere mit Hotspots.
• Wenn keine Prototyp-Verbindungen vorhanden sind,  kannst du von der aktuellen Seite aus durch die Rahmen navigieren.
• Richte einen Flow-Startpunkt ein, um zu bestimmen, wo die User Journey beginnen soll. Du kannst mehrere Flow-Startpunkte einrichten.
• Lege für die Präsentationsansicht die Geräteart, den Startpunkt und die Hintergrundfarbe für den Prototyp in Prototype Settings (Prototyp-Einstellungen) fest.

Sobald der Prototyp zum Abspielen bereit ist, wählst du Preview oder Present aus.

Vorschau deines Prototyps

Mit der Inline-Vorschau kannst du deinen Prototyp direkt auf der Arbeitsfläche neben deinem Design abspielen. Mit der Inline-Vorschau werden alle Designänderungen sofort in der Vorschau angezeigt.

Um die Inline-Vorschau zu öffnen, klicke in der oberen Toolbar auf Preview.

Du kannst die Inline-Vorschau auch öffnen, indem du auf das Vorschau-Symbol oder einen beliebigen Flow-Startpunkt klickst.

Alternativ kannst du auch die Umschalttaste und die Leertaste deiner Tastatur verwenden.

Um deine Vorschau in einem realistischen Container wie einem Telefon oder Tablet zu platzieren, wähle in den Prototyp-Einstellungen eine Geräteart aus.

Die Inline-Vorschau verwenden

In der Inline-Vorschau hast du folgende Optionen:

1. Restart prototype (Prototyp neu starten): Starte den Prototyp vom letzten ausgewählten Rahmen oder der letzten ausgewählten Arbeitsfläche aus neu. Du kannst auch die Taste R betätigen, um einen Neustart auszuführen.
2. Overflow-Menü:
   1. Resize to actual size (100%) (Tatsächliche Größe wiederherstellen (100 %)): Wenn ein Prototyp-Gerät auf der Seite festgelegt wurde, passe die Größe der Inline-Vorschau an die Größe des Geräterahmens an. Wenn kein Geräterahmen festgelegt ist, passe die Größe der Inline-Vorschau an die Größe des ausgewählten Rahmens an.
   2. Resize to aspect ratio (Größe auf Seitenverhältnis ändern): Wenn kein Prototyp-Gerät auf der Seite eingestellt ist, passe die Größe der Inline-Vorschau an das Seitenverhältnis des aktuellen Rahmens an.
   3. Follow active frame (Aktivem Rahmen folgen): Wenn diese Funktion aktiviert ist, wird der ausgewählte Rahmen auf der Arbeitsfläche aktualisiert und spiegelt den aktuellen Rahmen in der Inline-Vorschau. Wenn du in der Vorschau durch den Prototyp navigierst, folgen die Auswahl und die Position der Arbeitsfläche deinen Bewegungen.
3. Open in presentation view (In Präsentationsansicht öffnen): Öffne den Prototyp in der Präsentationsansicht.
4. Schließe die Inline-Vorschau.

Mit der Inline-Vorschau hast du folgende Optionen:

• Resize (Größe ändern): Klicke und ziehe den Rand der Inline-Vorschau, um die Größe zu ändern. Halte die Umschalttaste gedrückt, um die Größe proportional zu ändern.
• Select frames on canvas (Rahmen auf der Arbeitsfläche auswählen): Klicke auf einen anderen Rahmen in der Arbeitsfläche, um in der Vorschau zu diesem Rahmen zu springen.

Präsentieren deines Prototyps

Verwende die Präsentationsansicht, um deinen Prototyp in einem neuen Tab abzuspielen.

Um einen Prototyp in der Präsentationsansicht zu öffnen, klicke in der Toolbar auf Present oder verwende folgendes Tastenkürzel:

• Mac:⌘ Befehlstaste⌥ WahltasteEnter
• Windows: SteuerungAltEnter

Layout der Präsentationsansicht

In der Präsentationsansicht kannst du:

1. Auf klicken, um die linke Seitenleiste anzuzeigen oder zu verbergen
2. Auf klicken, um den Kommentarmodus zu aktivieren und dem Prototyp Kommentare hinzuzufügen
3. Flows anzeigen und auswählen
4. Beschreibung eines Flows anzeigen
5. Die Optionen für die Prototyp-Ansicht einstellen
6. Auf klicken, um den Vollbildmodus zu aktivieren
7. Figma stellt das Gerät vor der von dir ausgewählten Hintergrundfarbe dar
8. Das in deinen Prototyp-Einstellungen ausgewählte Gerät anzeigen lassen
9. Den Cursor oder die Berührungsanzeige anzeigen lassen (nur bei Prototypen für mobile Geräte)
10. Innerhalb deines Prototyps mit Hotspots interagieren oder Tastaturkürzel eingeben
11. und oder die Pfeiltasten deiner Tastatur verwenden, um zwischen den Bildschirmen zu wechseln
12. Die Schaltfläche Restart (Neustart) nutzen oder die Taste R betätigen, um zum Startpunkt des aktuellen Flows zurückzukehren. Wenn keine Flows vorhanden sind, kehrt der Prototyp zum ersten Rahmen der Arbeitsfläche zurück.

Optionen in der Präsentationsansicht

Im Optionsmenü kannst du die folgenden Einstellungen aktivieren oder deaktivieren:

Rahmenanordnung und Navigation

Beim Abspielen deines Prototyps kannst du →, Leertaste oder N betätigen, um zum nächsten Rahmen zu navigieren, und ← betätigen, um zum vorherigen Rahmen zu navigieren. Diese Einstellung ist standardmäßig aktiviert.

Der nächste und der vorherige Rahmen werden durch die Position des Rahmens auf der Arbeitsfläche oder durch die von dir erstellten Prototyping-Verbindungen bestimmt.

Prototypen mit einem Flow-Startpunkt

Wenn dein Prototyp über einen Startpunkt verfügt, erstellt Figma eine „Historie“ der Rahmen, die du besucht hast, als du dir den Prototyp angesehen hast.

• ← springt zum vorhergehenden Rahmen, falls einer vorhanden ist.
• → springt zum nächsten Rahmen. Falls keine Historie vorhanden ist – wie nach der Verwendung von ← – springt der Prototyp zu einem benachbarten Rahmen, den du noch nicht besucht hast.

Prototypen mit einem Flow-Startpunkt

Wenn ein Prototyp keinen Flow-Startpunkt hat, ordnet Figma die Rahmen basierend auf ihren Koordinaten auf der Arbeitsfläche an. Die Anordnung erfolgt zunächst entsprechend der x-Koordinate von links nach rechts, dann entsprechend der y-Koordinate von oben nach unten.

Wenn die y-Koordinate versetzt ist, werden die Rahmen möglicherweise nicht in der richtigen Reihenfolge angezeigt. Um dies zu beheben, kannst du die horizontale Ausrichtung für jede Rahmenreihe auf eine Ausrichtung nach oben umstellen.

• ← springt zum vorherigen Rahmen, falls einer verfügbar ist.
• → springt zum nächsten Rahmen – erst entsprechend der x-Koordinate, dann entsprechend der y-Koordinate.

Erfahre, wie du ein Gerät und einen Startpunkt festlegst →