Prototypen-Auslöser – Figma Learn - Hilfe-Center

Bevor du anfängst

Wer kann diese Funktion verwenden

Nutzer*innen mit Schreibzugriff können Prototypen erstellen.

Du möchtest mehr zur Prototyperstellung erfahren? Sieh dir unseren Leitfaden zur Prototyperstellung in Figma an.

Alle Prototypen beginnen mit einer einzigen Interaktion. Jede Interaktion besteht aus einem Auslöser und einer Aktion.

Der Auslöser legt fest, welche Art von Interaktion mit dem Hotspot den Prototyp erweitert. Das kann eine Maus- oder Touch-Interaktion wie Tippen, Ziehen, Klicken und Ähnliches sein.

In diesem Artikel betrachten wir im Detail unsere Prototyping-Auslöser.

Tipp: So erstellst du eine Prototyp-Interaktionoder überprüfst verfügbare Prototyp-Aktionen→

On click/On tap (Beim Anklicken/Beim Antippen)

Löst die Aktion aus, wenn Nutzer*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 Nutzer*innen dazu bringen möchtest, auf Schaltflächen zu klicken, Formulare auszufüllen oder Benachrichtigungen zu bestätigen oder abzulehnen.

On drag (Beim Ziehen)

Damit kannst du eine Aktion ausführen, indem du ein Element auf den Bildschirm ziehst. Das kann der gesamte Rahmen oder ein einzelnes Element wie ein Schieberegler sein.

Du kannst On Drag (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.

While hovering (Beim Hovern)

Löst die Aktion aus, wenn du über den Hotspot hoverst. Du kannst dies verwenden, um Tooltips, Bildschirmanweisungen oder Zustandsänderungen zu replizieren.

Wenn Nutzer*innen den Cursor vom Hotspot wegbewegen, kehren wir zum ursprünglichen Bild zurück. Eine großartige Interaktion, wenn du Nutzer*innen nicht vom aktuellen Bildschirm wegführen willst.

While pressing (Bei Tastendruck)

Löst die Aktion aus, wenn du mit der Maus oder dem Trackpad auf einem Desktop klickst und gedrückt hältst . Oder wenn du auf einen Bildschirm eines mobilen Geräts tippst und gedrückt hältst.

Du kannst diesen Auslöser verwenden, um durch Dropdown-Menüs zu navigieren oder lange Druckinteraktionen wie das Anzeigen einer Vorschau mit 3D Touch auf iOS zu replizieren.

Wenn veröffentlicht, bringen wir Nutzer*innen zurück zum ursprünglichen Rahmen. Das macht es ideal für Overlays, die vorübergehende Interaktionen oder Zustandsänderungen erfassen.

Keyboard/Gamepad (Tastatur/Gamepad)

Mit dem Tastatur-/Gamepad-Auslöser kannst du Interaktionen mit einer Tastenkombination replizieren. Das bezieht sich auf Benutzereingaben von Tastaturen, Controllern 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 Nutzer*innen die Eingabetaste oder die ✕-Taste auf einem Controller drücken oder eine Tastenkombination wie Umschalt – K verwenden.

Hinweis: Wir unterstützen offiziell die 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.

Mouse enter (Annähern der Maus)

Dies zeigt den Zielrahmen , 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ü freilegen, wenn deine Maus in das Feld bewegt wird. Das Menü bleibt geöffnet, bis Nutzer*innen eine andere Interaktion durchführen, z. B. das Auswählen eines Elements oder das Klicken außerhalb des Felds.

Nachdem du ein Ereignis für Mouse enter (Annähern der Maus) eingerichtet hast, möchtest du vielleicht einen Mouse leave-Auslöser einrichten, um die Aktion umzukehren, wenn der Hotspot verlassen wird.

Hinweis: Am 16. November 2023 hat Figma das Verhalten des Mouse enter-Auslösers aktualisiert, um den Auslösernamen und die Beschreibung genauer wiederzugeben.

Mouse move inside-Interaktionen werden immer dann ausgelöst, wenn sich die Maus innerhalb des Hotspots bewegt.
Mouse enter-Interaktionen werden nur ausgelöst, wenn die Maus zuerst in den Hotspot eintritt.

Um bestehende Prototypen intakt zu halten, werden Interaktionen, die vor dem 16. November 2023 erstellt wurden, nun als Mouse move inside bezeichnet.

Mouse move inside-Interaktionen können nicht mehr erstellt werden. Alle neuen Interaktionen haben den Auslöser Mouse enter.

Mouse leave (Entfernen der Maus)

Dies zeigt den Zielrahmen , 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 Mouse leave-Auslösers aktualisiert, um den Auslösernamen und die Beschreibung genauer wiederzugeben.

Auslöser für Mouse move outside-Interaktionen treten immer dann auf, wenn sich die Maus außerhalb des Hotspots bewegt.
Mouse leave-Interaktionen werden nur ausgelöst, wenn die Maus aus dem Hotspot bewegt wird.

Um bestehende Prototypen intakt zu halten, werden Interaktionen, die vor dem 16. November 2023 erstellt wurden, jetzt als Mouse move outside bezeichnet.

Mouse move outside-Interaktionen können nun nicht mehr erstellt werden. Alle neue Interaktionen haben den Mouse leave-Auslöser.

Mouse down (touch down) (Mausklick ((Touch-Berührung))

Dies löst den Zielrahmen aus, wenn du zum ersten Mal die Maus oder das Touchpad drückst. Bei mobilen Geräten geschieht dies, wenn der Finger der Nutzer*innen zum ersten Mal den Hotspot berührt.

Mouse up (touch up) (Maus loslassen ((Berührung loslassen))

Dies löst den Zielrahmen aus, wenn du die Maus oder das Touchpad loslässt. Bei mobilen Geräten geschieht dies, wenn der Finger der Nutzer*innen den Hotspot nicht mehr berührt.

Wende den Mouse Down-Auslöser auf den Menüheader an, um ein Overlay zu öffnen.
Wende eine Mouse Up-Interaktion auf das Menüelement im Overlay an.
Wenn du die Maus loslässt, bringen wir Nutzer*innen zum entsprechenden Rahmen.

Tipp: Nutze die Auslöser Mouse Down und Mouse Up gemeinsam, um das Navigieren von Nutzer*innen in einem Dropdown-Menü nachzubilden..

After delay (Nach Verzögerung)

Mit dem Auslöser After delay (Nach Verzögerung) kannst du eine Aktion auszulösen, nachdem Nutzer*innen eine bestimmte Zeit auf einem bestimmten Rahmen verbracht haben. Du musst die Dauer der Verzögerung in Millisekunden (ms) festlegen.

When video hits (Wenn Video losgeht)

Der Auslöser When video hits (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 Overlay-Nachricht während der Video-Wiedergabe auslösen möchtest.

Wenn du den Auslöser When video hits 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 Prototyping mit Video →

When video ends (Wenn Video endet)

Der Auslöser When video ends (Wenn Video endet) ist für jede Verbindung verfügbar, die mit einer Videodatei beginnt.

Damit kannst du eine Aktion festzulegen, wenn das Video endet. Dies kann hilfreich sein, um Videos zu sequenzieren oder ein interaktives Video-Player-Erlebnis zu erstellen.