Interaktionen erstellen

Vor dem Start

Wer diese Funktion nutzen kann

Nutzer*innen jedes Teams oder Abos können Prototypen erstellen.

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

Prototypen sind interaktive Designs.

Alle Prototypen beginnen mit einer einzelnen Interaktion. Jede Interaktion verfügt über einen Auslöser (der die Interaktion verursacht) und eine Aktion (das Ergebnis der Auslösers).

Manche Interaktionen finden an einem einzigen Objekt statt. Zum Beispiel:

• Anklicken eines Objekts, um eine externe URL zu öffnen
• Anklicken eines Videos, um es abzuspielen oder zu pausieren

Andere Interaktionen finden zwischen zwei Objekten oder Rahmen statt. Diese Interaktionen werden als Verbindungen bezeichnet. Zum Beispiel:

• Anklicken einer Schaltfläche, um zum nächsten Rahmen zu springen
• Anklicken eines Objekts, um ein Overlay zu öffnen

Eine Prototypverbindung besteht aus drei Teilen:

1. Hotspot: Ein Hotspot ist der Ort, an dem die Interaktion stattfindet. Ein Hotspot kann der Rahmen selbst oder ein Objekt innerhalb des Rahmens sein. Du kannst Hotspots auf jedem beliebigen Element erstellen, z. B. einer Schaltfläche, einem Symbol oder einer Überschrift.
2. Verbindung: Verbindungen sind die Pfeile oder „Spaghetti“, die den Hotspot mit dem Ziel verbinden. 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-Rahmen sein. Nur Verbindungen mit der Aktion Scroll to (Scrollen zu) können für ein Ziel innerhalb desselben Top-Level-Frames eingestellt werden.

Eine Interaktion erstellen

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

1. Navigiere zum Tab Prototype (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 Plus-Symbol auf den Zielrahmen.
   • Klicke auf das Plus-Symbol im Bereich Interactions (Interaktionen) des Bedienfelds Prototype (Prototyp).
4. Sobald du die Interaktion erstellt hast, verwende das Bedienfeld Interaction details (Interaktionsdetails), um den Auslöser, die Aktion und das Ziel der Interaktion festzulegen.

Mehrere Interaktionen erstellen

Du kannst Interaktionen von 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 weitere Objekte anklickst
   • Bewege den Mauszeiger ü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 Plus-Symbol zum Zielrahmen
   • Klicke das Plus-Symbol im Bereich Interactions (Interaktionen) des Bedienfelds Prototype (Prototyp) an. Verwende dann das Bedienfeld „Interaction details“ (Interaktionsdetails), um den Auslöser, die Aktion und die Animationsdetails festzulegen

Interaction details (Interaktionsdetails)

Sobald du eine Interaktion erstellt hast, kannst du die Ansicht Interaction details verwenden, um Folgendes zu konfigurieren:

1. Trigger (Auslöser): Definiert, welche Art von Interaktion dazu führt, dass sich der Prototyp vorwärts bewegt, beispielsweise ein Mausklick oder eine Touch-Geste.
   Erfahre mehr über die Prototyp-Auslöser von Figma →
2. Action (Aktion): Definiert, welche Art von Ereignis eintritt, wenn Benutzer*innen mit dem Hotspot interagieren, z. B. Wechsel zu einem anderen Frame oder Aktivieren eines Overlays.
   Erfahre mehr zu den Prototyp-Aktionen von Figma →
3. Destination (Ziel): Definiert, wo die Interaktion aufhört. Dies kann ein anderer Bildschirm innerhalb des Prototyps sein oder ein Overlay, der oberhalb des aktuellen Bildschirms erscheint. Nicht alle Interaktionen haben ein Ziel. Der Auslöser Back (Zurück) springt zum Beispiel automatisch zum vorhergehenden Frame.
4. Animation settings (Animationseinstellungen:) Legt fest, wie sich der Prototyp von einem Rahmen zum nächsten bewegt.
   Erfahre mehr über Animationseinstellungen ↓
5. State management (Statusmanagement): Klicke hier, um Objekteigenschaften und -zustände beim Navigieren innerhalb und zwischen Rahmen zurückzusetzen.
   Erfahre mehr über das Prototyp-Statusmanagement →
6. Add action: (Aktion hinzufügen): Füge eine weitere Aktion zum gleichen Auslöser hinzu.
   Erfahre mehr über mehrere Aktionen →
7. Schließe die Ansicht Interaction details.

Ein einzelnes Objekt kann über verschiedene Interaktionen verfügen, die jeweils einen anderen Auslöser haben. Zum Beispiel verfügt vielleicht ein Objekt mit einer Videofüllung über zwei Interaktionen: Eine, die das Video On click (Beim Anklicken) abspielt, und eine, die ein Overlay öffnet When video ends (Wenn Video endet).

Ein einzelnes Objekt kann über Folgendes verfügen:

• Eine beliebige Anzahl der folgenden Auslöser:
  • Key/Gamepad (Taste/Gamepad)
  • On drag (Durch Ziehen mit Maus)
  • When video hits (Wenn Video losgeht)
• Einen der folgenden Auslöser:
  • On click / On tap (Beim Anklicken/Antippen)
  • While hovering (Beim Bewegen des Mauszeigers)
  • While pressing (Beim Betätigen)
  • Mouse enter (Annähern der Maus)
  • Mouse leave (Entfernen der Maus)
  • Mouse down / Touch press (Mausklick/Touch-Berührung)
  • Mouse up / Touch release (Maus loslassen/Touch-Berührung loslassen)
  • After delay (Nach Verzögerung)
  • When video ends (Wenn Video endet)

Animation anpassen

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

1. Animation: Die Animation legt fest, wie der Prototyp von einem Rahmen zum nächsten übergeht, z. B. durch Schieben, Gleiten oder Auflösen.
   Erfahre mehr über die Animationsarten von Figma →
2. Direction (Richtung): Bei bestimmten Animationstypen (z. B. Gleiten oder Schieben) kannst du die Richtung festlegen, in die der Übergang stattfinden soll. Wähle zwischen links, rechts, unten oder oben.
3. Animate matching layers (Übereinstimmende Ebenen animieren): Setze hier das Häkchen, um den Übergang mit Smart-Animation auf alle übereinstimmenden Ebenen anzuwenden.
   Erfahre mehr über Smart-Animation →
4. Easing and spring animation (Easing und Federanimation): Easing bestimmt die Beschleunigung beim Übergang zwischen einem Start- und einem Zielrahmen.
   Erfahre mehr über die Easing-Optionen von Figma →
5. Duration (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 Rahmen beginnen.

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

Um übereinstimmende Interaktionen auszuwählen:

1. Wähle eine Interaktion aus.
2. Klicke in der Ansicht Interaction details (Interaktionsdetails) auf Select matching interactions (Ü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 von all diesen 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 mit gedrückter Maustaste in einen neuen Zielrahmen. Du kannst die Interaktion auch aus der rechten Seitenleiste auswählen und den Zielrahmen über die Ansicht „Interaction details“ (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 Prototypen-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 in der Arbeitsfläche aus.
4. Drücke die ⌘ Befehlstaste/Steuerung + V, um die Interaktionsdetails in das neue Objekt einzufügen.