I’m experimenting with refactoring a loading spinner component to use the new Figma Motion features, to leverage the new motion variables (duration and timing). Previously we had animated the loading spinner by creating a looping rotation using prototype interactions.
I’ve set it up to rotate 360deg with a duration of 1000ms. I’ve dragged the motion timeline to 1000ms. Previewing the animation on the master component works as expected.
However, when I add an instance of this component in another Frame, Page, or another Figma file the motion timeline changes to 2000ms. The spinner is no longer continuously spinning, it pauses in the middle.
How can I ensure that all instances have the set 1000ms timeline duration?
Question
Lock duration of animated components
From some digging it appears that each new Frame on the canvas defaults to the stated 2000ms. You can adjust the Frame’s duration (1000ms, 3000ms, etc.) and every animation added (whether a component instance or not) adopts that set Frame duration.
If I add my component instance (1000ms) to a new Frame (2000ms) I get the undesired effect.
You could manually change the duration of each frame which has an animated component instance, but that would be time prohibitive. Also, it would seem that you couldn’t have two animations in a frame that have different durations.
There’s a work around where I can have two Rotate animations (1st: 1000ms, 2nd: 1000ms with 1000ms delay) so the total time just happens to be 2000ms.
Seems like I shouldn’t have to do that though.
Yup .. this is very frustrating. I designed a 6300ms duration animation that is just perfect as I wanted.
However, it is a subcomponent inside another component and now, every time I instantiate it gets cut at 2000ms :(
I guess we’ll need to wait for a fix.
Based on my investigation and the Figma documentation, this seems to be the expected behavior in Motion: instances of animated components don't inherit the timeline duration from the main component. Instead, each instance appears as a separate track in the timeline and starts with the default duration of 2000ms.
This definitely needs to be fixed.
Hey hey
To make sure I've got the mechanic right, here's what's going on:
- Each frame on the canvas has its own timeline duration, and new animations default to 2000ms.
- An animated component's duration is set at the main component level — it can't be edited on the instance. When you drop an instance into a frame, it shows up as a track you can reposition, but you can't change its duration there. (From the docs: "the animation's duration and properties can only be edited at the main component level.")
- The component's animation isn't being altered or "cut" — it's that the host frame's timeline is a different length than the instance's animation. A 1000ms loop inside a 2000ms frame reads as a pause; a 6300ms animation inside a 2000ms frame gets clipped by the shorter frame.
The practical options right now are all manual:
- Set the host frame's duration to match your animation (1000ms, 6300ms, etc.) via the Duration field, or drag the handle on the right side of the timeline.
- There's no "fit frame to instance duration" option today — and I agree that gap makes looping animated components fiddlier than they should be.
- Jonathan's stacked-rotation trick works, but treat it as a stopgap, not the intended path.
My questions to y’all:
- Does this match your experience?
- Did I miss anything?
I’d be remiss if I didn’t mention that Figma Motion is in open beta, so this is an area that's actively evolving. I'm passing your feedback along to the Motion team — specifically the ability for a frame to inherit or auto-fit an animated instance's duration.
One ask: if either of you can share a quick screen recording of the issue in action (full-screen, not zoomed in, so we can see the whole context), that'd help a lot. Thanks again for all your help so far! — Jaycee
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.