When Figma variables sprint
Taught my team Figma variables by building them a playable two-player chase game
I had to teach a roomful of designers how Figma variables work. A slide deck and a live demo on product mocks puts a room to sleep, so I built them a video game instead. In Figma. Two players share one keyboard, pick their fighters, and chase each other around a looping track. First catch wins.
- There is no position variable. The rectangle's width is the position: a keypress widens it, and Smart Animate catches the picture up.
abs(), assembled at home. Figma's expressions have four operators, so "are these two in the same place" becomes two stacked ELSE IF branches.- Every lap is faster. At the end of the track the width resets and the speed multiplier shrinks, and the transition's duration is bound to it.
- The floor grows, not the sprite. Animating a sprite's position inside auto layout snapped mid-transition, so the sprite rides the edge of a rectangle that widens.
Designers played one round, then opened the file and traced the wiring on their own. A few shipped variable-driven prototypes the following week.