How Figma put the bounce in spring animations | Figma Blog (opens in new tab)
Figma’s spring animations replace manually tuned Bézier curves with motion based on physical properties. By modeling mass, stiffness, and damping, the system produces more natural movement, including believable weight, overshoot, bounce, and deceleration. The engineering challenge was translating physics-based controls into terms designers could easily understand and adjust. ## Why Figma introduced spring animations - Bézier animations let users control how movement starts and ends, but poorly tuned curves can cause: - Sudden, unnatural changes in speed - Objects to appear to accelerate without cause - Abrupt direction changes or stops - Spring animations define the physical behavior of an object rather than its exact path. - This approach helps create: - Weighted movement - Natural overshoot - Gentle transitions - Playful interactions such as FigJam emotes and high-fives ## The physics behind the motion Spring animations rely on three primary variables: - **Mass (`m`)** - Determines how heavy an object behaves. - More mass requires more force to accelerate. - Based on Newton’s law: `F = m × a`. - **Stiffness (`k`)** - Determines how strongly a spring resists displacement. - A stiffer spring pulls an object back more aggressively. - Based on Hooke’s law: `F = -k × x`. - **Damping (`b`)** - Represents resistance caused by friction or similar forces. - More damping reduces motion and brings the object to rest faster. - Its force is proportional and opposite to velocity: `F = -b × v`. Changing these values produces different animation qualities, such as gentle, quick, bouncy, or slow movement. ## Turning the equations into code - Figma used the WebKit `SpringSolver` to implement the spring timing function. - The solver accepts mass, stiffness, and damping and calculates the object’s position over time. - Although the underlying physics is stable and well understood, directly editing the variables is not intuitive for designers. - Designers typically want controls described as: - Faster or slower - More or less bouncy - More or less overshoot - Each physical parameter can affect multiple perceived qualities, making manual tuning difficult. For example, slowing an animation could involve increasing mass, but stiffness and damping also influence the result. ## Designing usable animation controls Figma needed a specialized interface that combined the three physical variables while presenting them in terms that matched how designers think about motion. The goal was to bridge the gap between precise physics calculations and practical animation adjustments, allowing users to achieve natural results without needing to understand the underlying equations. Figma’s approach demonstrates how physics-based animation can provide more convincing motion, provided the technical parameters are translated into accessible creative controls.