Triggers, actions and destinations

Every interaction in a Figma prototype has the same shape: when something happens (the trigger), do something (the action), often to somewhere (the destination), with some animation (the transition).

Triggers

Select a layer, switch to the Prototype tab in the right sidebar and click the plus next to Interactions. The main triggers are:

• On click (on tap on mobile prototypes): the most common.
• On drag: follows the pointer, good for swiping cards or carousels.
• While hovering and while pressing: temporary states that revert when the pointer leaves or releases.
• Mouse enter and mouse leave: permanent changes when the pointer enters or leaves.
• Key or gamepad: respond to a keyboard key, useful for desktop shortcuts.
• After delay: fires automatically after a set time on a frame, for splash screens or toasts.

Actions

• Navigate to: go to another frame.
• Change to: switch an interactive component to another variant.
• Back: return to the previous frame.
• Scroll to: move the view to a layer within the current frame.
• Open overlay, swap overlay and close overlay: show content on top of the current frame.
• Open link: go to a URL.
• Set variable and conditional: change and check prototype state. We cover these in section 5.

A single trigger can run several actions in order, for example set a variable and then navigate.

Transitions

When an action moves between frames, you choose an animation: instant, dissolve, move in, move out, push, slide in, slide out or smart animate. Each has a direction, an easing curve and a duration. Native mobile apps usually push forward for deeper navigation and back for returning, so matching that keeps the prototype familiar.

Drawing connections

Hover over a layer in prototype mode and drag the blue plus handle to a destination frame. Hold Shift while dragging to connect to the exact layer. Figma creates an on click, navigate to interaction you can then edit.

Try it

Connect the search button on the home screen to the results screen with a push transition, 300 milliseconds, ease out. Add a back button on results with the Back action. Press Play or open the presentation view and click through. You have the first piece of the flow.