Skip to content
← Experiments
Figma · Prototyping · Variables

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.

Loading Figma prototype...
The actual game. Grab a coworker and share a keyboard.
  • 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.
Two players, one keyboard: pick your fighters, then chase. First catch wins.

Designers played one round, then opened the file and traced the wiring on their own. A few shipped variable-driven prototypes the following week.