Figma: Order Matters in Chained Actions

WHY IT EXISTS: To create richer, more realistic prototypes without an explosion of screens. Simple prototypes often require many frames to show small state changes. Chaining actions allows a single screen to handle complex, multi-step logic, like updating data and then reacting to that update, all from one user trigger.

THE MENTAL MODEL: Treat multiple actions on a single trigger as a short, synchronous script. When a user clicks a button, Figma runs your list of actions from top to bottom, one after the other. This sequence allows you to manipulate variables and then use conditionals to make decisions based on their new values within the same interaction.

HOW IT WORKS: In a prototype interaction, after defining a trigger (e.g., "On click"), you can add multiple actions using the "Add action" button in the Interaction panel. Each added action appears in a list. You can drag and drop these actions to reorder them. The sequence is critical, as each action executes based on the state of the prototype at that exact moment.

WHEN TO USE IT: Use this for any interaction that has more than one effect. Common examples include: adding an item to a cart (which might involve setting a variable for the item count and changing the state of the button), submitting a form (setting a "submitted" state and navigating to a success page), or complex component state changes.

WHEN NOT TO USE IT: Avoid chaining for fundamentally separate user flows that should have their own triggers. If an action should only happen after a delay or a different user input, it belongs in a separate interaction, not as part of a long, immediate chain. Overly complex chains can also become difficult to debug.

ONE CANONICAL EXAMPLE: The most common footgun is order of operations with conditionals. Imagine a variable numberVar is 1. If your actions are ordered like this: first, a Conditional action if numberVar == 2, Navigate to Frame 2; second, a Set Variable action to change numberVar to 2. The prototype will NOT navigate. The conditional checks the value of numberVar when it is still 1, so it evaluates to false. If you reverse the order: first, set the variable to 2; second, run the conditional check. The prototype WILL navigate because the variable is updated before the condition is checked.