Prototype easing and spring animations

Before you start

Who can use this feature

Available on any plan.

Anyone with can edit access can create prototypes.

New to Prototyping? Check out our Getting Started with Prototyping guide.

Prototypes have many moving parts. Add easing and spring animation presets, or customize the easing of transitions, to communicate movement, emotion, and make your prototype more like the real thing.

Easing determines the acceleration of the transition between a starting frame and its destination, also known as keyframes, by using a mathematical function. Keyframes can be two frames in an interaction, like the transition from one screen to another, or the beginning and end states of a single frame, like an object changing color.

In the example animations below, easing is represented by a curve on a graph where time is applied to the x axis and the transition, such as Move In, Slide, or Smart Animate is on the y axis. The keyframes are represented by the beginning and end points of the line of curve in the graph.

Learn more about adding interactions to prototypes.

Easing Bezier presets

Linear

This is the default acceleration and is applied in a constant straight line. As objects in nature rarely move at a constant speed, linear curves can look unnatural or robotic.

Ease In

Creates an animation that starts slowly and accelerates as it reaches the end of its duration. This works well for smoothly transitioning objects out of view. One downside is it can feel sluggish.

Ease Out

Ease Out is the opposite of an Ease In curve, where the animation starts fast and slows down as it reaches the end of its duration. It works well for moving objects into view and reinforcing important visual information.

Ease In And Out

Starts the animation slowly, accelerates in the middle, and slows at the end of its duration. For most motion, it feels smooth and responsive, but can feel unnatural or too perfect when applied to everything.

Ease In Back

Ease In Back is when the animation goes past the initial keyframe’s value and then accelerates as it reaches the end. This creates a bounce in the animation that serves as an anticipatory action, preparing the audience for and reinforcing the main action. Much like Ease In, Ease In Back can work well for smoothly transitioning objects out of view.

Ease Out Back

Is the opposite of Ease In Back. The animation starts fast, then slows and goes past the ending keyframe's value. This creates a bounce in the animation that serves as a settle that creates a smooth ending transition for the main action. Similar to Ease Out, Ease Out Back works well for moving objects into view.

Ease In And Out Back

Starts the animation slowly as it overshoots the initial keyframe’s value, then accelerates quickly before it slows and overshoots the ending keyframes value. This creates an anticipatory bounce at the start, a quick motion, with a rebounding motion before the final state.

Custom easing Bezier

Select the Custom bezier option from the Curve menu to manually set and adjust easing values. Figma will show a graph, or Bézier curve editor, based on the preset you have previously selected.

You can use the Bézier curve editor to adjust the curve of an existing preset, or to create an easing curve of your own.

You can copy and paste numerical values to other interactions to replicate easing. It's not possible to save a custom easing curve for future use.

1. A cubic Bézier curve is defined by four points. These points are represented by the square perimeter in the graph.
2. The graph's axes represent a curve on a graph where time is applied to the x axis and the transition, such as Move In, Slide, or Smart Animate is on the y axis.
3. There are two keyframes that indicate the start and end state of the animation. These are fixed at 0,0 and 1,1. Click the keyframe to reset the Bézier handles.
4. A continuous curve shows the object's values over the duration of the animation. This is the easing curve.
5. The adjustable handles allow you to change the values of the curve. If you're customizing an easing curve with no handles, click and drag the keyframe to activate the handles.
6. You can use this field to enter numerical values.

Spring animation presets

Combine spring animations with Figma’s animated transitions.

You can pick from the following presets or create your own:

• Gentle: A gentle animation is the most neutral option of the spring curves. Great for subtle spring movement when scaling content.
• Quick: A bit more spring great for toasts and notifications.
• Bouncy: A quirky preset for delightful animations like a heart bounce.
• Slow: A steady, natural way to scale up fullscreen content.
• Custom: Set your own spring animation curves ↓

Custom spring curves

Customize your spring animation by editing the Stiffness, Damping, and Mass values in the Interaction details modal and by dragging the animated graph.

• Stiffness: influences the number of “bounces” in the animation and can be adjusted by dragging the graph.
• Damping: influences the level of spring in the animation and can be adjusted from the graph.
• Mass: influences the speed of the animation and height of the bounce. You’ll need to manually adjust the value in the Mass field. Adjusting mass also changes the millisecond value for the duration setting.

You can copy and paste numerical values to other interactions to replicate spring animation curves. It's not possible to save a custom curve for future use.

Learn how to create interactions and adjust animations.