Figma: Stacking Multiple Interactions on One Object

Why it exists

Static designs are unrealistic. In a real application, a single element like a button needs to respond to user input in multiple ways—it should react to a hover, a press, and a click. Stacking interactions allows a single design layer to have this rich, multi-faceted behavior without needing to create complex, duplicative screen flows.

The mental model

Treat the interactions panel for an object like a list of event listeners in code, such as element.addEventListener('mouseenter', ...) and element.addEventListener('click', ...). Each interaction you add is a distinct trigger-action pair that the object is listening for. They are independent of each other unless their triggers conflict.

How it works

In Figma's Prototype mode, select an object. In the right sidebar's Interactions section, click "Add interaction" to define your first trigger-action pair (e.g., Trigger: "On click", Action: "Navigate to"). To add another behavior, click "Add interaction" again on the same object and define a second pair (e.g., Trigger: "While hovering", Action: "Change to"). Figma lists all interactions for the selected object in this panel.

When to use it

Use this for any component that needs to respond to more than one type of input. The most common case is a button that requires a "While hovering" interaction to change to its hover variant, and a separate "On click" interaction to navigate to a new frame or open an overlay. This is the standard method for building high-fidelity components.

When not to use it

Avoid stacking interactions that use the exact same trigger on the same object, like two separate "On click" interactions. Figma's prototyping engine will only execute the first one it finds in the panel's list, completely ignoring the second. This leads to confusing bugs where an expected action doesn't fire. If a single trigger must cause multiple outcomes, you need to chain them within a single interaction where possible (e.g., using conditional logic and variables) rather than stacking.

One canonical example

A standard button component needs to show a hover state and navigate on click. First, select the button. Add Interaction 1: set the trigger to "While hovering" and the action to "Change to" the hover variant of your component. Second, add Interaction 2: set the trigger to "On click" and the action to "Navigate to" the destination frame. This single object now correctly responds to two different user inputs.