Quickly add motion with preset animation styles

Figma Motion includes preset animations that let you quickly add motion to your designs without manually configuring keyframes. Use individual animations for basic movement, or apply a composite animation style to add complexity to your motion.

Apply a preset animation

1. In Figma Motion, select the layers you want to animate.
2. Click the plus in the Animations section of the right sidebar to add a new animation.
3. Choose an animation type from the menu, then use the settings to configure the motion. Available settings vary depending on the animation type selected.

Apply a composite animation style

Composite animation styles apply multiple preset animations at once, so you can create more complex motion without building it from scratch.

1. In Figma Motion, select the layers you want to animate.
2. Click Animations in the Animations section of the right sidebar to add a new composite animation style.
3. Choose a composite animation style from the list. This applies multiple preset animations to your selected layers.
4. Select an individual animation on the timeline or in the Animations section to further configure the motion.

Move animations in time

When you apply a preset animation, it appears on the timeline starting at the current playhead position. You can click and drag the animation to move it to a different time, or drag the handles to adjust its duration.

Update an animation

You can access an animation’s settings by selecting it on the timeline or clicking it in the Animations section of the right sidebar. From there, you can update the animation type, adjust animation-specific settings, modify the duration, and update the easing.