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 use the Figma Motion timeline
The timeline is where you set keyframes, adjust animation placement and length, and preview your animations.
Access the timeline
The timeline is only visible while in Figma Motion. To enable Figma Motion, switch the toolbar toggle to Motion. Once enabled, you’ll see the timeline across the bottom of your screen.
Use the timeline controls
The controls along the top of the timeline let you manage playback and configure your animation's duration and timing units.
A. Play or pause your animation
Click Play or press Spacebar to preview your animation. Click Pause or press Spacebar again to stop.
B. Auto-keyframe
When enabled, any change you make to an object is automatically recorded as a keyframe on the timeline. Learn more about auto-keyframe.
C. Current time
Shows the playhead’s current position on the timeline. Enter a value to jump to a specific point in time.
D. Duration
Shows the total length of the animation. New animations are 2000 milliseconds long by default. Enter a value to increase or decrease the duration.
Tip: You can also click and drag the handle on the right side of the timeline to change its duration.
E. Time unit
Controls the time unit displayed on the timeline. Click to toggle between seconds and milliseconds.
F. Playback
Controls how the animations plays. Click to cycle between playback modes:
- Loop: Continuously repeats the animation
- Once: Plays the animation once and stops
- Ping-pong: Plays the animation forward and then backward
G. Collapse layers
Collapses or expands all layers on the timeline.
Resize the timeline
Click and drag the top edge of the timeline to resize it, or click Collapse timeline to minimize it.
Zoom in and out of the timeline
Zoom in and out of the timeline using the slider on the right side of the timeline, pinching/spreading two fingers on your trackpad, or by holding the modifier key while using your mouse wheel:
- Mac: Command
- Windows: Control
Move layer tracks on the timeline
When you add animations to an object, they are grouped under a layer track on the timeline. Drag a track to reposition it on the timeline, or drag the handles on either side to change the duration of all animations applied to the object.
Learn more about adding animations:
Getting started with animation? Check out the Motion design fundamentals collection to learn the principles behind effective motion design and get hands-on practice creating animations in Figma Motion.