The four shapes
linear
Constant rate. No acceleration.
hold
A step. Keep the value until the next keyframe — no tween.
cubicBezier
A cubic-bézier curve
p = [x1, y1, x2, y2]. Solved per frame with Newton–Raphson and a
bisection fallback. y may exceed 0..1 for overshoot / anticipation.spring
A damped physical spring.
bounce runs 0 (no overshoot) → 1 (very bouncy).Segment convention
A keyframe’s easing governs interpolation from that keyframe to the next — out-interpolation, like CSStransition-timing-function. So you set the curve on the keyframe you’re leaving:
How Figma presets map
The converter resolves every FigmaMotionEasing to one of the four shapes:
Springs are a perceptual
bounce approximation (ζ = 1 − bounce), not a re-solve of Figma’s
physical mass / stiffness / damping. The motion reads the same; the exact overshoot can
differ slightly. See Figma Motion coverage.