This article covers our Prototyping Triggers in more detail.
The Trigger determines what type of interaction with the Hotspot will cause the Prototype to advance. This could be a mouse or touch interaction e.g. tap, drag, click, hover etc. Prototyping Glossary
Check out our Build Prototypes with Interactions and Animations article for more information.
While most of these Transitions are self-explanatory, we have a few tips for how you can use them.
On Click/On Tap
Triggers the Action when the user Clicks (desktop) or Taps (mobile) on a Hotspot in your Prototype. You can add Click or Tap triggers to lots of different elements in a screen.
You can use them for navigation: opening links, using menus or exploring websites. Or, when you need input from a user: to click on buttons, fill in forms or confirm and dismiss alerts.
Allows you to perform an Action when you drag an element on the screen. This can be the entire Frame, or a single element, like a slider.
You can use the On Drag in any direction: Left, Right, Up or Down. This is great for simple swipe gestures, or for more complex animations like a drag to refresh.
Drag allows you to move back and forward through the transition. This creates a continuum , instead of performing the action after a Swipe gesture.
Triggers the Action when you hover over the Hotspot. You can use this to replicate tooltips, on screen prompts, or changes in state.
We will return the user to the original Frame when they move the cursor off the Hotspot. This makes it a great interaction when you don't want to take users away from the current screen.
Note: We change While Hovering Trigger to On Tap Triggers when on an actual mobile device.
Triggers the action when you click and hold the mouse or trackpad on a desktop. Or, when you tap and hold on a mobile device.
You can use this Trigger for navigating drop-down menus, or replicating long-press interactions. e.g. viewing a preview on iOS.
When released, we will take the user back to the original Frame. This makes it great for Overlays that capture temporary interactions or state changes.
Keyboard and Gamepad Shortcuts
The Keyboard / Gamepad trigger lets you replicate interactions with a keyboard shortcut. This applies to user inputs from keyboards, controllers, and gamepads.
A trigger can be a single key or button, or a combination of keys.
For example: a trigger can be based on the user pressing the Enter key or ✕ button on a controller. Or using a shortcut like Shift – K.
Note: We officially support the Xbox One, PS4, and Nintendo Switch Pro Controllers. Other controllers may work, but buttons displayed in Figma may not accurately reflect the controller.
This shows the Destination Frame when the mouse enters the Hotspot area. This could be a small area like a button, or an entire section of the screen.
You could use this to expose the options in a drop down menu, as your mouse enters the field. The menu will stay open until the user performs another interaction e.g. selects an item, or clicks out of the field.
Note: We don't reverse the transition on leaving the Hotspot, so you will need to set up the next step in the Prototype.
This shows the Destination Frame when the cursor leaves the Hotspot area.
You could use this for on-screen prompts, like an alert when you haven't completed a field or checked a box.
Mouse Down (Touch Down)
This triggers the Destination frame when you first press the mouse or touch pad. For for mobile devices, this is when the user's finger first touches the Hotspot.
Mouse Up (Touch Up)
This triggers the Destination frame when you release the mouse or touch pad. For for mobile devices, this is once the user's finger no longer touches the Hotspot.
Tip! You may want to use the Mouse Down and Mouse Up Trigger together, to replicate a user navigating a drop-down menu.
- Apply the Mouse Down trigger to the menu header to open an Overlay.
- Apply the Mouse Up Interaction to the menu item in the Overlay.
- When they release the month, we take the user to the relevant Frame.
After Delay allows you to trigger an Action, after the user has spent a certain amount of time on a given Frame. You will need to set the duration of the delay in milliseconds (ms). You can only apply this to a top-level Frame, not a specific layer or object.