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:
| Figma preset | Blinn Motion easing |
|---|---|
LINEAR | linear |
HOLD | hold |
EASE_IN | cubicBezier [0.41, 0, 1, 1] |
EASE_OUT | cubicBezier [0, 0, 0.59, 1] |
EASE_IN_AND_OUT | cubicBezier [0.41, 0, 0.59, 1] |
EASE_OUT_BACK | cubicBezier [0.34, 1.56, 0.64, 1] |
CUSTOM_CUBIC_BEZIER | cubicBezier from {x1,y1,x2,y2} |
CUSTOM_SPRING | spring { bounce } |
GENTLE / QUICK / BOUNCY / SLOW | spring { bounce: 0.2 / 0.1 / 0.6 / 0.05 } (approx) |
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.