Triggers and Actions are the foundation of interactive prototyping in Figma. A trigger defines what user interaction or event starts an interaction, while an action defines what happens as a result. By combining triggers, actions, destinations, animations, variables, overlays, and interactive components, designers can create realistic website and mobile application prototypes.
Learn professional UI/UX design and Figma prototyping with JustAcademy Figma Training and Register for Figma Course Demo.
Every Figma prototype interaction contains a trigger and one or more actions. The trigger determines what type of user interaction causes the prototype to respond, while the action determines the resulting behavior. For example, clicking a Login button can trigger navigation to a Dashboard frame.
User Interaction
↓
Trigger
↓
Action
↓
Destination / Result
↓
Animation
A trigger is an event that starts a prototype interaction. It represents the way a user interacts with a hotspot or the event that causes the prototype to respond.
Common examples include clicking, tapping, dragging, hovering, pressing, entering or leaving an area, pressing a keyboard key, waiting for a delay, or reaching a specific point in a video.
An action is the response that occurs after a trigger is activated. Actions can navigate between frames, open or close overlays, scroll to an object, open an external link, change component variants, modify variables, evaluate conditions, or control video playback.
Trigger: On Click
Action: Navigate To
Destination: Dashboard
| Feature | Trigger | Action |
|---|---|---|
| Meaning | Event that starts an interaction | Result produced by the interaction |
| Purpose | Detects user input or another event | Defines what happens next |
| Examples | On Click, On Tap, On Drag, Hover | Navigate To, Open Overlay, Back |
| Sequence | Occurs first | Occurs after the trigger |
| Example | On Click | Navigate To Home |
A Figma prototype interaction can contain several important parts: hotspot, trigger, action, destination, and animation. The hotspot is where the interaction takes place, the trigger starts the interaction, the action defines the result, the destination identifies where the interaction ends when applicable, and the animation controls the transition.
Hotspot
↓
Trigger
↓
Action
↓
Destination
↓
Animation
↓
Final Result
A hotspot is the area where the interaction takes place. A hotspot can be a button, icon, image, text layer, card, frame, or another object in the design.
For example, if a user clicks a shopping cart icon to open the cart screen, the shopping cart icon acts as the hotspot.
A connection links a hotspot to a destination and contains the interaction settings. In Figma, connections are represented visually by arrows or “noodles” on the canvas.
Hotspot
↓
Connection
↓
Destination
The connection can contain the trigger, action, destination, animation settings, state management, and additional actions.
| Trigger | Description | Common Use |
|---|---|---|
| On Click / On Tap | Runs when the user clicks or taps a hotspot | Buttons, navigation, links |
| On Drag | Runs when an element is dragged | Sliders, swipe interactions |
| While Hovering | Responds while the pointer is over the hotspot | Hover states and tooltips |
| While Pressing | Responds while the user holds the mouse or touch | Pressed states and temporary interactions |
| Mouse Enter | Runs when the pointer enters a hotspot | Dropdowns and hover menus |
| Mouse Leave | Runs when the pointer leaves a hotspot | Closing or reversing hover behavior |
| Mouse Down / Touch Press | Runs when the user initially presses | Press interactions |
| Mouse Up / Touch Release | Runs when the user releases | Release interactions |
| After Delay | Runs after a specified amount of time | Automatic transitions |
| Key/Gamepad | Responds to keyboard or game controller input | Keyboard shortcuts and interactive experiences |
| When Video Hits | Runs when a video reaches a specified timestamp | Interactive video |
| When Video Ends | Runs when video playback ends | Video sequences |
On Click / On Tap is one of the most commonly used Figma triggers. It starts an interaction when the user clicks an element on desktop or taps it on a mobile device.
It is commonly used for buttons, links, menus, cards, navigation elements, form controls, confirmation buttons, and dismiss actions.
Login Button
↓
On Click / On Tap
↓
Navigate To
↓
Dashboard
On Drag allows an interaction to begin when the user drags an element. It can be used in different directions and is useful for swipe gestures, sliders, carousels, draggable interfaces, and drag-based interactions.
Slider
↓
On Drag
↓
Move / Navigate
↓
New State
While Hovering triggers an interaction while the pointer is positioned over the hotspot. It is useful for desktop interfaces that require temporary hover feedback.
Common examples include tooltips, hover cards, on-screen prompts, navigation menus, and visual state changes.
While Pressing responds while the user clicks and holds a mouse or trackpad on desktop, or taps and holds on a mobile device. It can be used to simulate temporary states, long-press interactions, and temporary overlays.
Mouse Enter triggers when the pointer initially enters the hotspot area. It can be used to display dropdown menus, tooltips, prompts, and other desktop interactions.
Mouse Enters Menu
↓
Mouse Enter
↓
Show Menu
Mouse Leave triggers when the pointer initially leaves the hotspot area. It is useful for reversing hover-based interactions or closing temporary desktop menus.
Mouse Leaves Menu
↓
Mouse Leave
↓
Close / Hide Menu
Mouse Down or Touch Press triggers when the user initially presses the mouse or touches the hotspot. It can be used to simulate press behavior or begin temporary interactions.
Mouse Up or Touch Release triggers when the user releases the mouse button or removes their finger from the hotspot. It can be combined with Mouse Down to simulate press-and-release behavior.
The Key/Gamepad trigger allows prototypes to respond to keyboard keys, controller buttons, or gamepad input. It can be useful for presentations, games, keyboard-driven interfaces, and specialized prototypes.
Press Key
↓
Key/Gamepad Trigger
↓
Action
↓
Prototype Response
After Delay starts an interaction after the user has remained on a frame for a specified amount of time. The delay is configured in milliseconds.
It is useful for splash screens, onboarding sequences, automatic slides, timed transitions, and presentation-style experiences.
Splash Screen
↓
After Delay
↓
Navigate To
↓
Home Screen
When Video Hits triggers an action when a video reaches a specified timestamp. It can be useful for interactive advertisements, instructional videos, video presentations, and timed messages.
Video Playback
↓
Specific Timestamp
↓
When Video Hits
↓
Show Overlay
When Video Ends triggers an action when a video reaches the end of its playback. It can be used to sequence videos or move the user to another prototype state after video playback.
Video
↓
Playback Ends
↓
When Video Ends
↓
Navigate / Open Overlay
| Action | Purpose |
|---|---|
| Navigate To | Moves the user to another frame |
| Back | Returns to the previous screen |
| Set Variable | Sets or modifies a variable value |
| Set Variable Mode | Changes the variable mode during prototyping |
| Conditional | Performs logic based on a condition |
| Scroll To | Scrolls to a specific object or section |
| Open Link | Opens an external URL |
| Open Overlay | Displays a frame above the current frame |
| Close Overlay | Closes an active overlay |
| Swap Overlay | Replaces the current overlay |
| Change To | Changes an interactive component to another variant |
| Play/Pause Video | Controls video playback |
| Mute/Unmute Video | Controls video sound |
| Set to Specific Time | Moves video playback to a specific timestamp |
| Jump Forward/Backward | Moves video playback forward or backward |
Navigate To moves the user from one frame to another frame. It is the most common action for creating screen-to-screen navigation.
Home
↓
Click Products
↓
Navigate To
↓
Products Screen
It can be used for websites, mobile applications, dashboards, onboarding flows, checkout processes, and portfolio projects.
The Back action takes the user to the previous screen in the prototype history. It is useful for simulating mobile back buttons, browser-style navigation, and return flows.
Product Details
↓
Back
↓
Product Listing
Set Variable allows a prototype interaction to set or modify the value of a variable. Variables can represent values such as strings, numbers, colors, and Boolean states.
Click Toggle
↓
Set Variable
↓
isMenuOpen = true
↓
Menu State Changes
This makes it possible to create more dynamic prototype behavior without requiring a large number of duplicate frames.
Set Variable Mode changes the variable mode of a page while the prototype is running. It can be useful when a prototype needs to demonstrate different sets of variable values or modes.
The Conditional action allows designers to check whether a condition is true or false before performing an action. It follows an if/else style of logic.
Click Checkout
↓
Check Cart Total
↓
IF Total >= 1000
↓
Free Shipping
ELSE
↓
Shipping Fee
Conditional logic is useful for prototypes involving authentication, shopping carts, filters, permissions, subscriptions, and different user outcomes.
Scroll To allows a prototype or nested scrollable container to scroll to a particular object. It is useful for long webpages, anchor navigation, product pages, documentation, and carousel-style interactions.
Click Features
↓
Scroll To
↓
Features Section
Open Link directs the user to a URL outside the prototype. It is useful for external websites, registration pages, documentation, social media, resources, and other web destinations.
Click Learn More
↓
Open Link
↓
External Website
Open Overlay displays a destination frame above the current frame. It is commonly used for modals, alerts, menus, tooltips, popups, confirmation dialogs, and temporary panels.
Home Screen
↓
Click Menu
↓
Open Overlay
↓
Navigation Menu
Close Overlay dismisses an overlay that is currently displayed above the original frame. It is useful for close buttons, cancel buttons, dismiss controls, and temporary dialogs.
Modal Open
↓
Click Close
↓
Close Overlay
↓
Original Screen
Swap Overlay replaces one overlay with another destination frame. When used from an existing overlay, the new overlay retains the original overlay settings.
Login Overlay
↓
Click Continue
↓
Swap Overlay
↓
Success Overlay
Swap Overlay is useful for multi-step dialogs, filter panels, confirmation flows, and changing overlay content without navigating away from the underlying frame.
Change To is used with interactive components to switch between variants in a component set. For example, a checkbox can switch from an unchecked variant to a checked variant.
Checkbox
↓
On Tap
↓
Change To
↓
Checked Variant
Figma provides prototype actions for controlling video playback. These actions can be used when the interaction ends on a video.
Figma allows multiple actions to be attached to the same trigger. This is useful when one user interaction needs to perform several operations.
On Click
↓
Action 1: Set Variable
↓
Action 2: Open Overlay
↓
Action 3: Navigate / Update State
Multiple actions execute in the order in which they are listed, so the order should be planned carefully.
When multiple actions are attached to a trigger, their order can affect the final prototype behavior. Designers should arrange actions from top to bottom according to the intended sequence.
Action 1
↓
Action 2
↓
Action 3
↓
Final Result
Variables and conditional logic can be combined to create more realistic prototypes. A variable stores information, while a conditional determines what should happen based on that information.
User Selects Option
↓
Set Variable
↓
Check Variable
↓
IF Condition
↓
Action A
ELSE
↓
Action B
Interactive components use triggers and actions to switch between reusable component variants. This is useful for buttons, checkboxes, switches, tabs, dropdowns, cards, and other UI elements.
Button Default
↓
On Click
↓
Change To
↓
Button Pressed
Triggers determine when an interaction starts, actions determine what happens, and animations determine how the visual transition appears.
Trigger
↓
Action
↓
Animation
↓
Destination / Result
For example, an On Click trigger can use Navigate To with Smart Animate to create a smooth transition between screens.
Triggers and overlay actions are commonly combined to create temporary interface elements such as navigation menus, filters, tooltips, alerts, modals, and confirmation dialogs.
On Tap
↓
Open Overlay
↓
Menu
↓
Select Item
↓
Navigate To
Navigation menus can use click or tap triggers to open an overlay or navigate to another frame.
Menu Icon
↓
On Tap
↓
Open Overlay
↓
Navigation Menu
Buttons normally use On Click / On Tap triggers. Depending on the design, the action can navigate to another screen, open an overlay, change a component variant, update a variable, or open an external link.
Button
↓
On Click
↓
Action
├── Navigate To
├── Open Overlay
├── Open Link
└── Set Variable
Dropdown Field
↓
On Click
↓
Open Overlay
↓
Dropdown Options
↓
Select Option
↓
Set Variable / Change State
Tabs can use On Click / On Tap with Change To to switch between active and inactive component variants.
Click Tab
↓
On Click
↓
Change To
↓
Active Tab Variant
Toggle controls can use On Tap or On Click with Change To or Set Variable.
Toggle Off
↓
On Tap
↓
Change To
↓
Toggle On
Checkbox Unchecked
↓
On Tap
↓
Change To
↓
Checkbox Checked
For more dynamic behavior, a Boolean variable can also be used to store the checked or unchecked state.
Carousels can use On Drag for swipe-based navigation or click/tap interactions for previous and next controls.
Swipe Left
↓
On Drag
↓
Next Slide
Tooltips can be created using hover-related triggers and Open Overlay actions.
Hover Icon
↓
While Hovering / Mouse Enter
↓
Open Overlay
↓
Tooltip
Confirmation dialogs typically combine Open Overlay, Close Overlay, Navigate To, and other actions.
Click Delete
↓
Open Overlay
↓
Confirmation Dialog
↓
Confirm → Action
Cancel → Close Overlay
Form interactions can use click or tap triggers to simulate submission, success states, error messages, confirmation messages, and navigation.
Submit Button
↓
On Click
↓
Set Variable / Conditional
↓
Success or Error State
Enter Credentials
↓
Click Login
↓
On Click
↓
Conditional
↓
Valid → Dashboard
Invalid → Error State
This creates a more realistic authentication prototype than simply navigating directly to the Dashboard.
Product Card
↓
On Click
↓
Product Details
↓
Add to Cart
↓
Set Variable
↓
Cart Updated
↓
Checkout
↓
Order Confirmation
Restaurant Card
↓
On Tap
↓
Restaurant Details
↓
Add Food
↓
Set Variable
↓
Cart Count Updated
↓
Checkout
↓
Place Order
↓
Success Screen
Home
↓
About → Navigate To About
↓
Projects → Navigate To Projects
↓
Project Card → Navigate To Details
↓
Contact → Navigate To Contact
↓
Social Icon → Open Link
| Requirement | Desktop | Mobile |
|---|---|---|
| Primary interaction | Click | Tap |
| Hover behavior | Common | Generally unavailable |
| Drag interaction | Mouse drag | Touch drag |
| Navigation | Click | Tap |
| Menu interaction | Hover/Click | Tap |
| Requirement | Suitable Trigger |
|---|---|
| Button interaction | On Click / On Tap |
| Mobile control | On Click / On Tap |
| Desktop hover effect | While Hovering / Mouse Enter |
| Drag or swipe | On Drag |
| Automatic screen change | After Delay |
| Keyboard interaction | Key/Gamepad |
| Video timestamp | When Video Hits |
| Video completion | When Video Ends |
| Requirement | Suitable Action |
|---|---|
| Move to another screen | Navigate To |
| Return to previous screen | Back |
| Display popup | Open Overlay |
| Dismiss popup | Close Overlay |
| Replace an overlay | Swap Overlay |
| Scroll to a section | Scroll To |
| Open external website | Open Link |
| Modify prototype state | Set Variable |
| Use if/else logic | Conditional |
| Switch component variant | Change To |
| Control video | Video Actions |
Welcome Screen
↓
After Delay
↓
Navigate To
↓
Onboarding Screen
↓
After Delay
↓
Home Screen
Automatic flows are useful for splash screens, presentations, onboarding sequences, and timed prototype experiences.
A single object can have multiple interactions, each with its own trigger. For example, an object can have one interaction for clicking and another for a different event such as video completion.
Object
├── On Click → Navigate
├── Mouse Enter → Show State
└── Other Trigger → Additional Action
Always test multiple interactions carefully to avoid unexpected behavior.
The Interaction details panel is used to configure prototype behavior. Depending on the interaction, it can contain the trigger, action, destination, animation settings, state management, and additional actions.
Interaction Details
├── Trigger
├── Action
├── Destination
├── Animation
├── State Management
└── Add Action
Prototype state management determines how object properties and states behave when users navigate between frames. This becomes especially important when using interactive components and variables.
For example, a selected tab, toggle, checkbox, or menu may need to preserve or reset its state depending on the intended user experience.
Figma allows multiple prototype flows to exist within a single page. Each flow can have its own starting point and can use triggers and actions to represent a separate user journey.
Flow 1
Login → Dashboard → Profile
Flow 2
Sign Up → Verification → Home
Flow 3
Guest → Browse → Product Details
A user journey is a sequence of interactions representing how a user completes a task. Triggers and actions connect individual steps into a complete experience.
Landing Page
↓
Login
↓
Dashboard
↓
Search
↓
Product
↓
Cart
↓
Checkout
↓
Success
If an interaction is not working, check the selected hotspot, trigger, action, destination, animation, component state, and variable values.
Interaction Not Working
↓
Check Hotspot
↓
Check Trigger
↓
Check Action
↓
Check Destination
↓
Check Animation
↓
Check Variables / States
↓
Preview Again
Product Page
↓
Click Add to Cart
↓
Set Variable
↓
cartCount = cartCount + 1
↓
Open Confirmation Overlay
↓
Click View Cart
↓
Navigate To Cart
↓
Checkout
↓
Conditional
↓
Success / Error
Create a complete e-commerce prototype using multiple triggers and actions.
Home
↓
About
↓
Projects
↓
Project Details
↓
Contact
↓
External Social Link
Use Navigate To for internal pages and Open Link for external websites or social profiles.
1. Design Screens
↓
2. Identify Interactive Elements
↓
3. Define User Journey
↓
4. Select Hotspots
↓
5. Choose Triggers
↓
6. Choose Actions
↓
7. Set Destinations
↓
8. Configure Animations
↓
9. Add Variables / Conditions
↓
10. Preview
↓
11. Test
↓
12. Fix
↓
13. Share
| Term | Meaning |
|---|---|
| Trigger | Event that starts an interaction |
| Action | Response produced by a trigger |
| Hotspot | Area where the interaction takes place |
| Connection | Link between a hotspot and destination |
| Destination | Where an interaction ends when applicable |
| Animation | Visual transition associated with the interaction |
| Overlay | Frame displayed above the current frame |
| Variable | Stored value that can change prototype behavior |
| Conditional | If/else logic used to determine an outcome |
| Interactive Component | Component that can switch between interactive variants |
Triggers and Actions are fundamental to creating interactive prototypes in Figma. Triggers define the event that starts an interaction, while actions define the response. By combining these with connections, destinations, animations, overlays, interactive components, variables, and conditional logic, designers can create realistic and testable website and mobile application experiences.
Mastering Triggers and Actions is an important step toward advanced Figma prototyping, usability testing, stakeholder presentations, interactive UI design, and professional UX workflows.
Recommended Learning: JustAcademy Figma Training | Register for Figma Course Demo
