Figma Motion is currently in open beta. Features may change and you may experience performance issues as we continue to improve Figma Motion. Learn more about what's included in the beta.
Before you Start
Who can use this feature
Available on any plan
Anyone with can edit access to a file can add animations
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
- In Figma Motion, select the layers you want to animate.
- Click the plus in the Animations section of the right sidebar to add a new animation.
- Choose an animation type from the menu, then use the settings to configure the motion.
Note: 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.
- In Figma Motion, select the layers you want to animate.
- Click Animations in the Animations section of the right sidebar to add a new composite animation style.
- Choose a composite animation style from the list. This applies multiple preset animations to your selected layers.
- 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.