I’ve been working on a system-driven prototype in Figma where a global control (navbar) manages the state of multiple components (cards).
The goal was simple:
-
A button click updates a global state (for example active card)
-
Individual components react to that state
-
Smooth transitions (Smart Animate) happen between states (closed to open)
However, this currently isn’t possible in Figma without major tradeoffs.
Current limitations:
-
Variables can update global state, but components cannot respond to them in a way that triggers variant changes with animation
-
Smart Animate only works when explicitly defined through interactions such as Change to or Navigate, not when state changes indirectly
-
To achieve smooth animation, we are forced to duplicate entire frames or create complex variant systems, which does not scale
What this leads to:
-
Either you build a scalable, system-driven prototype using variables but lose animation
-
Or you build animated transitions but end up with exponential frame or variant complexity
Proposed feature:
Introduce a system where:
-
Components can react to variable changes directly
-
Variant switching can be conditionally tied to variables
-
Smart Animate automatically runs when a variant change happens due to a variable update
Example:
-
Global variable:
activeCard -
Button sets
activeCard = 2 -
Card components check:
-
If
activeCard == 2then switch to Open variant with Smart Animate -
Else switch to Closed variant
-
This would allow:
-
True state-driven prototyping
-
Clean, scalable systems
-
App-like behavior directly inside Figma
Why this matters:
Figma is increasingly used to simulate real product behavior, not just static flows.
This feature would bridge the gap between design prototypes and actual UI systems.
Right now, we can simulate state or simulate animation, but not both together in a scalable way.
This feels like a natural next step for Figma’s prototyping capabilities.