Prototypes have many moving parts. Add easing 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.
Tip! Hover over the preview window in the Interaction Details panel to see a preview of your animation.
Default easing curves
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.
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 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 curves
Select the Custom option from the list 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.
- A cubic Bézier curve is defined by four points. These points are represented by the square perimeter in the graph.
- 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.
- There are two keyframes that indicate the start and end state of the animation. These are fixed at
1,1. Click the keyframe to reset the Bézier handles.
- A continuous curve shows the object's values over the duration of the animation. This is the easing curve.
- 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.
- You can use this field to enter numerical values.
Tip! You can use these numerical values when translating the Bézier curve to CSS notation:
cubic-bezier(x1, y1, x2, y2)
Note: It's possible to extend the curve beyond the graph's dashed perimeter. You can use this to create an anticipatory bounce at the beginning, or a rebounding effect at the end of the animation. The Ease In and Out Back preset shows both of these effects in action.