Vor dem Start
Wer diese Funktion verwenden kann
Benutzer*innen jedes Teams oder Abos
Benutzer*innen mit Schreibzugriff können Prototypen erstellen.
Du möchtest mehr über die Erstellung von Prototypen erfahren? Sieh dir unseren Leitfaden zur Prototyperstellung in Figma an.
Alle Prototypen beginnen mit einer einzelnen Interaktion. Jede Interaktion besteht aus einem Auslöser und einer Aktion.
Der Auslöser legt fest, welche Art von Interaktion mit dem Hotspot dazu führt, dass der Prototyp fortgesetzt wird. Das kann eine Maus- oder eine Touch-Interaktion wie Tippen, Ziehen, Klicken und Ähnliches sein.
Dieser Artikel behandelt unsere Prototyp-Auslöser ausführlicher.
Tipp: So erstellst du eine Prototyp-Interaktionoder überprüfst verfügbare Prototyp-Aktionen→
Beim Anklicken/Beim Antippen
Löst die Aktion aus, wenn Benutzer*innen auf einen Hotspot in ihrem Prototyp klicken (Desktop) oder tippen (Mobilgeräte). Du kannst Klick- oder Tipp-Auslöser zu vielen verschiedenen Elementen auf einem Bildschirm hinzufügen.
Du kannst sie zur Navigation verwenden, z. B. zum Öffnen von Links, Verwenden von Menüs oder Erkunden von Websites. Du kannst sie auch verwenden, wenn du Benutzer*innen dazu bringen möchtest, auf Schaltflächen zu klicken, Formulare auszufüllen oder Benachrichtigungen zu bestätigen oder abzulehnen.
Beim Ziehen
Damit kannst du eine Aktion ausführen, indem du ein Element auf den Bildschirm ziehst. Das kann der gesamte Frame oder ein einzelnes Element wie ein Schieberegler sein.
Du kannst Beim Ziehen in jede Richtung verwenden: links, rechts, hoch oder runter. Das ist ideal für einfache Wischgesten oder für komplexere Animationen wie das Ziehen zum Aktualisieren.
Durch Ziehen kannst du dich vor und zurück durch die Übergänge bewegen. Dadurch entsteht ein Kontinuum, anstatt die Aktion nach einer Wischgeste auszuführen.
Beim Hovern
Löst die Aktion aus, wenn du über den Hotspot hoverst. Du kannst dies verwenden, um Tooltips, Bildschirmanweisungen oder Statusänderungen zu replizieren.
Wenn Benutzer*innen den Cursor vom Hotspot wegbewegen, kehren wir zum ursprünglichen Bild zurück. Eine großartige Interaktion, wenn du Benutzer*innen nicht vom aktuellen Bildschirm wegführen willst.
Bei Tastendruck
Löst in folgenden Fällen die Aktion aus: Beim Klicken und gedrückt halten mit der Maus oder dem Trackpad auf einem Desktop. Oder beim Tippen und gedrückt halten auf einem Mobilgerät.
Du kannst diesen Auslöser zum Navigieren in Dropdown-Menüs oder zum Nachbilden von Langdruck-Interaktionen verwenden, beispielsweise zum Anzeigen einer Vorschau mit 3D Touch unter iOS.
Nach dem Loslassen werden Benutzer*innen zum ursprünglichen Frame zurückgeleitet. Dies eignet sich hervorragend für Überlagerungen, die vorübergehende Interaktionen oder Statusänderungen erfassen.
Tastatur/Gamepad
Mit dem Auslöser „Tastatur/Gamepad“ kannst du Interaktionen mit einem Tastenkürzel replizieren. Das bezieht sich auf Benutzereingaben über Tastaturen, Controller und Gamepads.
Ein Auslöser kann eine einzelne Taste oder Schaltfläche sein oder eine Tastenkombination.
Ein Auslöser kann zum Beispiel darauf basieren, dass Benutzer*innen die Eingabetaste oder die ✕-Taste auf einem Controller drücken oder ein Tastenkürzel wie Umschalt – K verwenden.
Hinweis: Wir unterstützen offiziell Xbox One, PS4 und Nintendo Switch Pro Controller. Andere Controller könnten funktionieren, aber die in Figma angezeigten Tasten spiegeln möglicherweise nicht genau den Controller wider.
Maus hineinbewegt
Dies zeigt den Ziel-Frame, wenn die Maus in den Hotspot-Bereich bewegt wird. Dabei kann es sich um einen kleinen Bereich wie eine Schaltfläche oder um einen ganzen Bildschirmabschnitt handeln.
Du kannst damit die Optionen in einem Dropdown-Menü anzeigen, wenn deine Maus in das Feld bewegt wird. Das Menü bleibt geöffnet, bis Benutzer*innen eine andere Interaktion durchführen, z. B. das Auswählen eines Elements oder das Klicken außerhalb des Felds.
Nachdem du ein Ereignis des Typs Maus hineinbewegt eingerichtet hast, möchtest du vielleicht einen Maus herausbewegt einrichten, um die Aktion umzukehren, wenn der Hotspot verlassen wird.
Hinweis: Am 16. November 2023 hat Figma das Verhalten des Auslösers Maus hineinbewegt aktualisiert, um den Auslösernamen und die Beschreibung genauer wiederzugeben.
- Interaktionen des Typs Mauszeiger nach innen bewegen werden immer dann ausgelöst, wenn sich die Maus innerhalb des Hotspots bewegt.
- Interaktionen des Typs Maus hineinbewegt werden nur dann ausgelöst, wenn die Maus anfänglich in den Hotspot eintritt.
Um bestehende Prototypen intakt zu halten, werden Interaktionen, die vor dem 16. November 2023 erstellt wurden, nun als Mauszeiger nach innen bewegen bezeichnet.
Aktionen des Typs Mauszeiger nach innen bewegen können nicht mehr erstellt werden. Alle neuen Interaktionen haben den Auslöser Maus hineinbewegt.
Maus herausbewegt
Dies zeigt den Ziel-Frame , wenn der Cursor den Hotspot-Bereich verlässt .
Du kannst dies für Bildschirmanweisungen verwenden, wie zum Beispiel eine Warnung, wenn du ein Feld nicht ausgefüllt oder ein Kästchen nicht angekreuzt hast.
Hinweis: Am 16. November 2023 hat Figma das Verhalten des Auslösers Maus herausbewegt aktualisiert, um den Auslösernamen und die Beschreibung genauer wiederzugeben.
- Interaktionen des Typs Maus außerhalb bewegen werden immer dann ausgelöst, wenn sich die Maus außerhalb des Hotspots bewegt.
- Interaktionen des Typs Maus herausbewegt werden nur dann ausgelöst, wenn die Maus anfänglich aus dem Hotspot herausbewegt wird.
Um bestehende Prototypen intakt zu halten, werden Interaktionen, die vor dem 16. November 2023 erstellt wurden, jetzt als Maus außerhalb bewegen bezeichnet.
Interaktionen des Typs Maus außerhalb bewegen können nun nicht mehr erstellt werden. Alle neue Interaktionen haben den Auslöser Maus herausbewegt.
Maus geklickt (Touch-Berührung)
Dies löst den Ziel-Frame aus, wenn du zum ersten Mal die Maustaste oder das Touchpad drückst. Bei mobilen Geräten geschieht dies, wenn der Finger der Benutzer*innen zum ersten Mal den Hotspot berührt.
Maus losgelassen (Berührung loslassen)
Dies löst den Ziel-Frame aus, wenn du die Maustaste oder das Touchpad loslässt. Bei mobilen Geräten geschieht dies, wenn der Finger der Benutzer*innen den Hotspot nicht mehr berührt.
- Wende den Auslöser Maus geklickt auf den Menüheader an, um eine Überlagerung zu öffnen.
- Wende eine Maus losgelassen-Interaktion auf das Menüelement in der Überlagerung an.
- Wenn du die Maus loslässt, bringen wir die Benutzer*innen zum entsprechenden Frame.
Tipp: Verwende die Auslöser Maus geklickt und Maus losgelassen gemeinsam, um das Navigieren von Benutzer*innen in einem Dropdown-Menü nachzubilden.
Nach Verzögerung
Der Auslöser Nach Verzögerung ermöglicht es Ihnen, eine Aktion auszulösen, nachdem der/die Benutzer*in eine bestimmte Zeit auf einem bestimmten Frame verbracht hat. Du musst die Dauer der Verzögerung in Millisekunden (ms) festlegen.
Wenn Video losgeht
Der Auslöser Wenn Video losgeht ist für jede Verbindung verfügbar, die mit einer Videodatei beginnt.
Damit kannst du eine Aktion festlegen, wenn das Video einen bestimmten Zeitstempel erreicht. Das ist hilfreich, wenn du Prototypen für Dinge wie Video-Werbepausen erstellen oder eine Überlagerungsmeldung während der Video-Wiedergabe auslösen möchtest.
Wenn du den Auslöser Wenn Video losgeht auswählst, gibt es ein Feld, um einen Zeitstempel einzugeben.
Hinweis: Wenn du einen Zeitstempel eingibst, der über die volle Länge des Videos hinausgeht, wird die Aktion ausgelöst, wenn das Video endet.
Erfahre mehr über das Erstellen von Prototypen mit Video →
Wenn Video endet
Der Auslöser Wenn Video endet ist für jede Verbindung verfügbar, die mit einer Videodatei beginnt.
Damit kannst du eine Aktion festlegen, wenn das Video endet. Dies kann hilfreich sein, um Videos zu sequenzieren oder ein interaktives Video-Player-Erlebnis zu erstellen.