Springing Design Forward

Animation helps turn static interfaces into lively, legible products. In FigJam, for example, emotes and high-fives only land because they move. Figma’s recent launch of spring animations is aimed at letting designers build that same kind of fluid motion into their own prototypes.

Getting there meant going back to basics. Spring animations are physics simulations, not hand-drawn motion paths, so the team had to revisit some classroom fundamentals to make the feature both natural and accurate.

From Curves to Physics

Previously, Figma’s animations relied on bezier curves. Those give precise control over easing, but they can also produce unnatural results—objects that accelerate from nothing, reverse direction arbitrarily, or stop without a clear reason if the curves are pushed too far.

Springs sidestep that problem. Rather than plotting a path, you define physical properties and let the math generate the motion. The core variables are:

  • Mass: Heavier objects need more force to move, per Newton’s F = m * a.
  • Stiffness: Springs resist being pulled, and stiffer springs resist harder, expressed by Hooke’s law: F = -k * x.
  • Damping: Friction slows things down; faster motion meets more resistance, written as F = -b * v.

The resulting curves feel weighted—panels overshoot then settle, transitions glide to a stop—rather than just easing in and out.

From Formulas to Handles

The math is settled science, and Figma’s engineers started with the WebKit SpringSolver to plug mass, stiffness, and damping into a timing function. But there was a user-experience problem: tuning three physics constants directly isn’t how designers think.

“Make it faster” or “less bouncy” doesn’t translate cleanly into damping values. Changing mass slows an animation, but so do adjustments to stiffness and damping, leaving designers to triangulate across three knobs without guidance.

The team’s answer was to bring back a familiar Figma convention: handles. Just as bezier curves are edited by dragging handles, the spring curve gets one. Where that handle sits—and what it controls—was the hard part.

Horizontal movement maps cleanly to an animation’s period, which depends on the ratio of mass to stiffness. Vertical placement was more complex. Early attempts to match the handle to the curve using numerical optimization proved unstable. The breakthrough came when the team linked vertical position to the “damping ratio” (damping relative to mass): more damping means the handle should sit lower.

That reduced three abstract variables to two spatial ones. Dragging right or left changes relative speed; up or down changes overshoot. A dedicated duration handle was added later, marking where the animation stops, since physics-based bounces can persist far longer than feels right in a prototype.

Fit for Handoff

Spring values aren’t just a Figma-only affair. The feature pulls inspiration from tools like the react-spring visualizer, and the values can be exported from the inspect panel for developers. Teams handing off should note the naming differences: Figma, like Framer Motion, uses mass, damping, and stiffness; react-spring calls them mass, friction, and tension.

The result is a control scheme that lets designers shape motion directly—no physics degree required—and keeps the results exportable for the rest of the team.