figmaDec 11, 2025

Hard Problems Are Still Hard: A Story About the Tools That Change and the Work That Doesn't | Figma Blog (opens in new tab)

Nikolas Klein reflects on seven years building Figma’s prototyping tools and how AI transformed the design landscape. While AI changes the tools and accelerates execution, it does not eliminate the difficult work of framing problems, making judgments, iterating, and collaborating. The central conclusion is that AI is another tool in the designer’s toolbox—not a replacement for human insight. ## A Career in Prototyping - Klein describes moving from Figma designer to product manager. - His work centered on building interactive prototyping tools over several years. - Prototyping involved continual experimentation, iteration, and collaboration between designers and engineers. ## AI Changes the Tools - The arrival of AI prompts fundamental questions about the future role of designers and prototyping. - AI can generate ideas and help produce outputs more quickly. - The shift can feel overwhelming because it changes familiar workflows and raises uncertainty about which skills remain valuable. - Klein ultimately frames AI as an addition to the existing toolbox rather than a complete replacement for traditional design tools. ## The Work That Remains Difficult - AI does not remove the need to understand the underlying problem. - Designers still need to exercise judgment, evaluate alternatives, and decide what should be built. - Complex work depends on iteration, animation, interaction design, and close collaboration. - Human expertise remains important for turning vague ideas into coherent, useful experiences. ## Collaboration and the Future - Designers and engineers continue to contribute complementary perspectives. - AI can work alongside people, supporting exploration while humans provide direction and context. - The tools may evolve rapidly, but the challenge of solving meaningful, complex problems remains. The practical recommendation is to adopt AI as part of a broader creative workflow while continuing to develop the judgment, collaboration, and problem-solving skills that difficult design work requires.

spring-animationsfigmaaiprototyping+2

figmaJun 15, 2022

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.

spring-animationsfigmaui-designanimation+2