Verbinde deinen Prototyp

Vor dem Start

Wer diese Funktion verwenden kann

Verfügbar in allen Abos.

Alle Personen mit Schreibzugriff auf eine Datei können Prototypen erstellen.

Prototypen sind Designs, mit denen man interagieren kann.

In Figma beginnen alle Prototypen mit einer einzelnen Interaktion. Jede Interaktion besteht aus zwei Teilen: einem Auslöser (was die Interaktion startet) und einer Aktion (das Ergebnis des Auslösers).

Einige Interaktionen finden an einem einzelnen Objekt statt – zum Beispiel das Klicken auf ein Objekt, um eine externe URL zu öffnen, oder das Klicken auf ein Video, um es abzuspielen und anzuhalten.

Andere Interaktionen finden zwischen zwei Objekten oder Frames statt – zum Beispiel das Klicken auf eine Schaltfläche, um zum nächsten Frame zu navigieren, oder das Klicken auf ein Icon, um eine Überlagerung zu öffnen. Diese Interaktionen werden als Verbindungen betrachtet, die aus drei Teilen bestehen:

1. Hotspot: Ein Hotspot ist der Ort, an dem die Interaktion stattfindet. Ein Hotspot kann der Frame selbst oder ein Objekt innerhalb des Frames sein. Du kannst Hotspots für jedes beliebige Element erstellen, z. B. eine Schaltfläche, ein Icon oder eine Überschrift.
2. Verbindung: Eine Verbindung ist der Pfeil, der den Hotspot mit dem Ziel verbindet. Von der Verbindung aus kannst du den Auslöser und die Aktionen für die Interaktion definieren und die Animationseinstellungen ändern.
3. Ziel: Das Ziel ist der Ort, an dem die Verbindung endet. In den meisten Fällen muss das Ziel ein Top-Level-Frame sein. Nur Verbindungen mit der Aktion Scrollen zu können für ein Ziel innerhalb desselben Top-Level-Frames festgelegt werden.

Eine Interaktion hinzufügen

Eine Interaktion wird durch die Auswahl eines Hotspots oder Startpunkts erstellt.

1. Navigiere zum Tab Prototyp  in der rechten Seitenleiste.
2. Wähle eine Ebene oder ein Objekt für den Hotspot der Interaktion aus.
3. Erstelle die Interaktion, indem du einen der folgenden Schritte ausführst:
   • Bewege den Mauszeiger über das Objekt und ziehe das Pluszeichen auf den Ziel-Frame.
   • Klicke auf Hinzufügen im Abschnitt Interaktionen des Prototypen-Tabs.
4. Sobald du die Interaktion erstellt hast, verwende das Panel Interaktionsdetails, um den Auslöser, die Aktion und das Ziel der Interaktion festzulegen.

Mehrere Interaktionen erstellen

Du kannst Interaktionen aus mehreren Objekten auf einmal erstellen. So kannst du Zeit sparen, wenn du mehrere Verbindungen zu demselben Ziel erstellst.

1. Wähle deine Startobjekte oder Hotspots aus, an denen die Interaktionen beginnen sollen. Du kannst über eine der folgenden Methoden verschiedene Objekte auswählen:
   • Wähle ein Anfangsobjekt aus und halte dann die Umschalttaste gedrückt, während du auf weitere Objekte klickst
   • Bewege den Cursor über alle Objekte, die du auswählen möchtest
2. Erstelle die Interaktionen, indem du einen der folgenden Schritte ausführst:
   • Bewege den Mauszeiger über eines der ausgewählten Objekte. Klicke und ziehe dann das Pluszeichen zum Ziel-Frame
   • Klicke auf das Pluszeichen in Abschnitt Interaktionen des Prototypen-Tabs und verwende dann das Panel „Interaktionsdetails“, um den Auslöser, die Aktion und die Animationsdetails festzulegen

Interaktionsdetails

Sobald du eine Interaktion erstellt hast, kannst du das Modal Interaktionsdetails verwenden, um Folgendes zu konfigurieren:

1. Auslöser: Definiert, welche Art von Interaktion dazu führt, dass sich der Prototyp vorwärts bewegt, beispielsweise ein Mausklick oder eine Touch-Geste.
2. Aktion: Definiert, welche Art von Ereignis eintritt, wenn ein*e Benutzer*in mit dem Hotspot interagiert, beispielsweise der Wechsel zu einem anderen Frame oder das Aktivieren eines Overlays.
3. Ziel: Definiert, wo die Interaktion aufhört. Dies kann ein anderer Bildschirm innerhalb des Prototyps sein oder eine Überlagerung, die über dem aktuellen Bildschirm erscheint. Nicht alle Interaktionen haben ein Ziel. Der Auslöser Zurück springt zum Beispiel automatisch zum vorherigen Frame.
4. Animationseinstellungen: Legt fest, wie sich der Prototyp von einem Frame zum nächsten bewegt.
5. State-Management: Klicke darauf, um Objekteigenschaften und Status beim Navigieren in und zwischen Frames zurückzusetzen.
6. Aktion hinzufügen: Füge eine weitere Aktion zum selben Auslöser hinzu.
7. Schließe das Modal Interaktionsdetails.

Ein einzelnes Objekt kann mehrere Interaktionen haben, jede mit ihrem eigenen Auslöser. Zum Beispiel könnte ein Objekt mit einer Video-Füllung zwei Interaktionen haben: Eine, die das Video Beim Anklicken abspielt, und eine, die eine Überlagerung öffnet, Wenn Video endet. 

Ein einzelnes Objekt kann über Folgendes verfügen:

• Eine beliebige Anzahl der folgenden Auslöser:
  • Taste/Gamepad
  • Beim Ziehen 
  • Wenn Video losgeht
• Einen der folgenden Auslöser:
  • Beim Anklicken/Antippen
  • Beim Hovern
  • Bei Tastendruck
  • Annähern der Maus
  • Entfernen der Maus
  • Mausklick/Touch-Berührung
  • Maus loslassen/Touch-Berührung loslassen
  • Nach Verzögerung
  • Wenn Video endet

Animation anpassen

Die Animationseinstellungen legen fest, wie sich der Prototyp von einem Frame zum nächsten bewegt.

1. Animation: Die Animation beschreibt, wie der Prototyp von einem Frame zum nächsten übergeht, zum Beispiel durch Push- und Slide-Effekte oder Überblenden.
2. Richtung: Bei bestimmten Animationstypen (z. B. Hineinbewegen oder Push-Effekten) kannst du die Richtung festlegen, in die der Übergang stattfinden soll. Wähle zwischen links, rechts, unten oder oben.
3. Übereinstimmende Ebenen animieren: Setze hier das Häkchen, um den Smart-Animation -Übergang auf alle übereinstimmenden Ebenen anzuwenden.
4. Easing und Federanimation: Easing bestimmt die Beschleunigung beim Übergang zwischen einem Start- und einem Ziel-Frame.
5. Dauer: Die Dauer legt fest, wie lange es in Millisekunden (ms) dauert, bis der Übergang abgeschlossen ist. Wähle eine Dauer zwischen 1 ms und 10000 ms (10 Sekunden).
6. Führe eine Vorschau der Animation aus.

Interaktionen auswählen und bearbeiten

Verwende die folgenden Tools, um das Bearbeiten von Prototypen zu verbessern und zu beschleunigen.

Übereinstimmende Interaktionen auswählen

Übereinstimmende Interaktionen sind identische Interaktionen, die bei übereinstimmenden Objekten in anderen Frames beginnen.

• Identische Interaktionen sind Interaktionen mit derselben Aktion und demselben Ziel
• Übereinstimmende Objekte sind Objekte in unterschiedlichen Frames mit unterschiedlichen Namen und übereinstimmenden Hierarchieebenen

Um übereinstimmende Interaktionen auszuwählen:

1. Wähle eine Interaktion aus.
2. Klicke im Modal Interaktionsdetails auf Übereinstimmende Interaktionen auswählen.

Bearbeite Interaktionsdetails, um alle ausgewählten Interaktionen auf einmal zu aktualisieren.

Mehrere Verbindungsziele aktualisieren

Wenn mehrere Verbindungen vorhanden sind, kannst du das Ziel dieser Verbindungen auf einmal ändern.

1. Wähle die Verbindungen aus, die du bearbeiten möchtest. Du kannst über eine der folgenden Methoden mehrere Verbindungen auswählen:
   • Wähle eine anfängliche Verbindung aus. Halte dann die Umschalttaste gedrückt, während du weitere Verbindungen anklickst.
   • Bewege den Mauszeiger über die Verbindungen, die du auswählen möchtest. Dadurch wird ein blauer Rahmen um die ausgewählten Verbindungen gezogen.
2. Ziehe die Verbindungen bei gedrückter Maustaste in einen neuen Ziel-Frame. Du kannst die Interaktion auch in der rechten Seitenleiste auswählen und den Ziel-Frame über die Ansicht „Interaktionsdetails“ ändern.

Interaktionsdetails kopieren und einfügen

Kopiere Interaktionsdetails und füge sie in andere Objekte ein, um Prototypen schneller zu erstellen.

1. Wähle eine Prototyp-Interaktion auf der Arbeitsfläche aus.
2. Drücke die ⌘ Befehlstaste/Steuerung + C zum Kopieren oder die ⌘ Befehlstaste/Steuerung + X zum Ausschneiden der Interaktionsdetails.
3. Wähle ein anderes Objekt auf der Arbeitsfläche aus.
4. Drücke die ⌘ Befehlstaste/Steuerung + V, um die Interaktionsdetails in das neue Objekt einzufügen.