Vor dem Start

Wer diese Funktion verwenden 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:

Vorschau: Spiele den Prototyp direkt im Editor mit einer Inline-Vorschau ab. Sieh, wie der Prototyp funktioniert, während du ihn erstellst – alles im gleichen Tab.
Präsentieren: Spiele den Prototyp in der Präsentationsansicht in einem separaten Tab ab. Teile den Prototyp mit anderen oder sieh dir an, 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 Frames liegen, um den Prototyp als Vorschau oder Präsentieren abspielen zu können.
Falls Prototyp-Verbindungen vorhanden sind, zeigt Figma nur Frames 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 Frames 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 du den Prototyp zum Ausprobieren vorbereitet hast, wähle Vorschau oder Präsentieren deines Prototyps.

Vorschau eines Prototyps erstellen

Verwende die Inline-Vorschau, um deinen Prototyp direkt auf der Arbeitsfläche neben dem Design abzuspielen. Mit der Inline-Vorschau werden alle Designänderungen sofort in der Vorschau angezeigt, sodass du Änderungen in Echtzeit sehen kannst Wenn du auf einen anderen Frame auf der Arbeitsfläche klickst, springt die Vorschau zu diesem Frame.

Die Inline-Vorschau zeigt animierte Quadrate, die sich über der Arbeitsfläche befinden, mit dem ursprünglichen Design auf der Arbeitsfläche darunter.

Um die Inline-Vorschau zu öffnen, führe einen der folgenden Schritte aus:

Klicke in der oberen Symbolleiste auf Vorschau.
Das Klicken auf das Vorschau-Icon an einem beliebigen Startpunkt des Flows
Verwende ⇧ Umschalt Leertaste auf der Tastatur.

In der Inline-Vorschau hast du folgende Optionen:

Verwende die Pfeiltasten links und rechts, um im Prototyp zurück oder vorwärts zu navigieren.
Starte den Prototyp vom zuletzt ausgewählten Frame auf der Arbeitsfläche neu. Du kannst auch R drücken, um neu zu starten.
Öffne das Überlaufmenü, um aus verschiedenen Skalierungsoptionen für den Prototyp auszuwählen.
Öffne den Prototypen in der Präsentationsansicht in einem neuen Tab.
Klicke auf das X, um die Inline-Vorschau zu schließen.
Größe der Vorschau ändern, indem du sie auf den Rand des Vorschaubildschirms klickst und ziehst. Halte ⇧ Umschalt gedrückt, um das Verhältnis beizubehalten.

Optionen im Überlaufmenü

Das Überlaufmenü für den Inline-Viewer enthält verschiedene Skalierungs- und Ansichtsoptionen für den Prototyp. Die verfügbaren Optionen variieren je nachdem, ob du ein Prototypgerät ausgewählt hast. Einige dieser Optionen überschneiden sich.

Breite anpassen

Skaliere den Prototyp, sodass er die gesamte Breite des Displays ausfüllt. Nur verfügbar, wenn das Prototypgerät auf Kein Gerät oder Präsentation auf der Seite eingestellt ist.

Responsiv

Der Inhalt des Prototyps wird in der Größe angepasst und neu angeordnet, wenn der Prototypen-Viewer eine Größenänderung erfährt, gemäß den auf das Design angewendeten Einschränkungen und Auto-Layout-Eigenschaften. Dies ermöglicht es, Designs in verschiedenen Fenstergrößen anzusehen und deren responsives Verhalten zu überprüfen. Damit Responsive funktioniert, müssen Einschränkungen und Auto-Layout-Einstellungen auf das Design angewendet werden.

Folge dem Prototyp

Der ausgewählte Frame auf der Arbeitsfläche wird aktualisiert, um den aktuellen Frame in der Inline-Vorschau zu spiegeln. Während du m Vorschau-Modus durch den Prototyp navigieren, folgt deine Arbeitsfläche-Auswahl und Position mit.

Fenster/Gerät auf 100 % vergrößern

Führt eine Größenänderung des Viewers oder Geräts auf 100 % der Frame-Größe durch.

Seitenverhältnis beibehalten

Das Inline-Viewer-Fenster wird in der Größenänderung so angepasst, dass es dem Seitenverhältnis des aktuellen Frame entspricht. Nur verfügbar, wenn das Prototypgerät auf Kein Gerät eingestellt ist.

Geräte-Frame anzeigen

Zeige oder verbirg den physischen Frame. Nur verfügbar, wenn ein Prototypframe ausgewählt ist.

Präsentiere einen Prototyp

Verwende die Präsentationsansicht, um deine Prototypen in einem neuen Tab abzuspielen. Du kannst mit Hotspots interagieren oder innerhalb deines Prototyps Tastaturkürzel eingeben.

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

Mac:⌘ Befehlstaste⌥ WahltasteEnter
Windows: SteuerungAltEnter

Figma stellt das Gerät vor der von dir ausgewählten Hintergrundfarbe dar.

Tipp: Möchtest du deinen Prototyp mit anderen teilen? Erfahre mehr über das Teilen von Prototypen.

Möchtest du deinen Prototyp auf dem Handy abspielen? Mehr über das Anzeigen von Prototypen auf einem Mobilgerät erfahren.

Layout der Präsentationsansicht

Die Präsentationsansicht enthält verschiedene Optionen, die du auswählen kannst, um mit einem Prototyp zu interagieren.

Von der linken Seite der Symbolleiste aus kannst du:

Klicke auf das Figma-Logo, um zum Datei-Browser zu gelangen.
Klicke auf , um die linke Seitenleiste ein- und auszublenden, in der du Flows auswählest und deren Beschreibungen ansehen kannst.
Klicke auf , um den Kommentarmodus zu aktivieren und dem Prototyp Kommentare hinzuzufügen.

Vom rechten Rand der Symbolleiste aus kannst du:

Klicke auf den Pfeil neben deinem Avatar und wähle, ob du ein Spotlight setzen oder einem Präsentator folgen möchtest
Teile den Prototyp
Öffne das Optionsmenü, um verschiedene Einstellungen für den Prototyp auszuwählen.
Klicke auf , um den Vollbildmodus zu aktivieren.

Am unteren Rand der Präsentationsansicht kannst du:

Benutze die linken und rechten Pfeile, um zwischen den Bildschirmen zu wechseln.
Verwende den Geräteumschalter, um zu einem ähnlichen Gerät zu wechseln und auf andere Skalierungsoptionen zuzugreifen. Verfügbar, wenn ein Frame für die Seite ausgewählt ist.
Klicke auf Neustart oder drücke R, um zum Ausgangspunkt des aktuellen Flow zurückzukehren. Wenn es keine Flows gibt, wird es auf den ersten Frame der Arbeitsfläche zurückgesetzt.

Optionsmenü

Klicke auf , um das Optionsmenü für zusätzliche Einstellungen zu öffnen.

Die folgenden Optionen sind immer verfügbar:

Figma-Tastenkürzel aktivieren

Aktiviere Figma-Tastenkürzel, zum Beispiel:

C zum Öffnen von Kommentaren
F zum Aktivieren des Vollbildmodus

Wenn die entsprechende Funktion aktiviert ist, können Nutzer*innen über die Tastatur durch Prototypen navigieren, zum Beispiel mit den Pfeilen nach links und rechts.

Wenn diese Funktion deaktiviert ist, können Nutzer*innen nur durch Prototypen navigieren, indem sie sich durch die Hotspots klicken oder indem sie auf die Pfeilsymbole nach links und rechts am unteren Bildschirmrand klicken.

Hinweise beim Klicken anzeigen

Hotspot-Hinweise helfen dabei, Nutzer*innen durch einen Prototyp zu führen. Sie zeigen an, wo sich innerhalb des Prototyps die Hotspots befinden. Wenn Nutzer*innen außerhalb eines Hotspots klicken, hebt Figma alle anklickbaren Bereiche mit einem blauen Rahmen hervor.

Offline verfügbar machen

Lade die Prototypen vorab, damit du sie offline präsentieren kannst.

Barrierefreiheitseinstellungen

Barrierefreiheitseinstellungen helfen Menschen mit Behinderungen, auf einen Prototyp zuzugreifen und zu interagieren. Zum Beispiel können Personen mit Sehbehinderungen einen Prototyp für Bildschirmleser und andere unterstützende Technologien anpassen.

UI ausblenden

Du kannst wählen, ob du die Prototyp-Benutzeroberfläche von Figma in der Präsentationsansicht anzeigen oder ausblenden möchtest. Dies ist nützlich, wenn du einen Prototyp testen und Ablenkungen vermeiden möchtest.

Wenn du die Figma-UI in der Präsentationsansicht verbergen lässt, wird Figma:

Die Toolbar und die Fußleiste deiner aktuellen Ansicht verbergen.
Die Flow-Seitenleiste verbergen, falls bei Seitenleiste anzeigen im Menü Optionen das Häkchen gesetzt ist.
Die Prototyp-URL mit einer &hide-ui=1-Variablen aktualisieren.
Dich daran erinnern, wie du die Toolbar und die Fußleiste wiederherstellen kannst.
Dir ermöglichen, den aktualisierten Freigabelink zu kopieren. Wenn du diesen Link teilst, verbirgt Figma die Toolbar, die Fußleiste und die Seitenleiste für andere Viewer.

Hinweis: Das Ändern von Einstellungen im Menü Options aktualisiert die URL zur Freigabe des Prototyps. Achte darauf, die neue URL zu kopieren, wenn du Änderungen vornimmst.

Das Optionsmenü enthält auch Inhalts- und Geräteskalierungsoptionen, um zu bestimmen, wie Ihr Prototyp oder Frame angezeigt und in der Größe geändert wird. Die Arten von verfügbaren Skalierungsoptionen hängen davon ab, ob du ein Prototypgerät ausgewählt hast:

Ohne Geräteframe ↓
Mit Geräteframe ↓

Skalierungsoptionen ohne Geräteframe

Wenn du auf der Seite kein Prototypgerät ausgewählt hast, bietet das Optionsmenü die folgenden Inhaltsskalierungsoptionen:

Tatsächliche Größe (100 %)

Stellen Sie den Prototyp basierend auf der vollständigen Größe des Design Frame dar. Je nach Frame- und Bildschirmgröße kann dies zu einem beschnittenen Prototyp führen.

Responsiv

Der Inhalt des Prototyps wird in der Größe angepasst und neu angeordnet, wenn der Prototypen-Viewer eine Größenänderung erfährt, gemäß den auf das Design angewendeten Einschränkungen und Auto-Layout-Eigenschaften. Dies ermöglicht es, Designs in verschiedenen Fenstergrößen anzusehen und deren responsives Verhalten zu überprüfen. Damit responsiv funktioniert, müssen Einschränkungen und Auto-Layout-Einstellungen auf das Design angewendet werden.

Breite anpassen

Skaliert den Prototyp so, dass er die Breite des Bildschirms vollständig ausfüllt.

Breite und Höhe anpassen

Verkleinert den Prototyp, sodass sowohl die Breite als auch die Höhe in das Viewer-Fenster passen. Der Prototyp wird dadurch nicht vergrößert.

Bildschirm füllen

Skaliert den Prototyp horizontal und vertikal, sodass er den gesamten Bildschirm ausfüllt. Es wird keinen Inhalt des Designs überlaufen.

Abhängig von der Größe der Frames verwendet der Prototyp standardmäßig bestimmte Skalierungseinstellungen, und unterschiedliche Optionen werden in den Abschnitten Empfohlen und Andere Skalierungsoptionen des Optionenmenüs angezeigt:

	Standardeinstellung für Skalierung	Weitere empfohlene und Skalierungsoptionen
Der erste Frame ist breiter als 1024px.	Tatsächliche Größe (100 %)	Responsiv
Der erste Frame ist schmaler als 1024px	Tatsächliche Größe (100 %)	Breite und Höhe anpassen
Alle Frames haben ein 16:9-Format oder den Gerätetyp auf „Präsentation“ eingestellt.	Bildschirm füllen	Tatsächliche Größe (100 %)
Wenn der Gerätetyp auf „Benutzerdefiniert“ eingestellt ist	Breite und Höhe anpassen	Bildschirm füllen Tatsächliche Größe (100 %)

Skalierungsoptionen mit einem Geräte-Frame

Mit einem Geräte-Frame bietet das Optionen-Menü die Skalierungsoptionen Responsiv und Feste Größe.

Responsiv

Feste Größe

Zeigt das Design zu 100 % innerhalb des Geräts. Abhängig von der Frame- und Gerätegröße kann dies zu einem abgeschnittenen Prototyp führen. Du kannst die Größe des Geräts mit Geräteskalierungsoptionen steuern.

Wenn du ein Prototypgerät ausgewählt hast, wird der Geräteumschalter unten in der Präsentationsansicht verfügbar, sodass du Prototypgeräte auswählen kannst, die dem aktuellen ähnlich sind. Es bietet dir auch die folgenden Geräteskalierungsoptionen:

Gerät an den Bildschirm anpassen

Verkleinere den Frame, sodass er in das Viewer-Fenster passt.

Gerät vergrößern, um den Bildschirm auszufüllen

Skaliere das Gerät so, dass es das gesamte Display ausfüllt.

Gerät bei 100 % anzeigen

Zeige den Prototyp mit 100 % der Frame-Größe an. Je nach Frame- und Bildschirmgröße kann dies zu einem beschnittenen Prototyp führen.

Geräte-Frame anzeigen

Wenn ein Prototyp-Gerät ausgewählt ist, ermöglicht diese Option das Ein- oder Ausblenden des physischen Frames.

Tipp: Drücke Z auf Ihrer Tastatur, während du dich in der Präsentationsansicht befindest, um zwischen den Skalierungsoptionen zu wechseln.

Frameanordnung und Navigation

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

Der nächste und der vorherige Frame werden durch die Position des Frames 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 Frames, die du besucht hast, als du dir den Prototyp angesehen hast.

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

Prototypen mit einem Flow-Startpunkt

Wenn ein Prototyp keinen Flow-Startpunkt hat, ordnet Figma die Framesn 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 Frames möglicherweise nicht in der richtigen Reihenfolge angezeigt. Um dies zu beheben, kannst du die horizontale Ausrichtung für jede Framereihe auf eine Ausrichtung nach oben umstellen.

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

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