Figma Support Forum

Smart Animate when using Component Overrides

Hi! I’m not sure if this is a current limitation or intended behaviour. But it would be really nice if you could Smart Animate when using Component Overrides.

For example, if I have a ‘Modal View’ component with a nested Progress Bar (using % as variants). While prototyping it will highlight both layers as if they’re going to animate.

But it doesn’t seem to work as intended:

It only works if I detach the Parent Component:

Any ideas on how to workaround this issue? Or if I’m doing something wrong? :sweat_smile:

2 Likes

You just have to make sure you have the same name everywhere (make the layers match), so that the system understands that it’s the same element that changes state. That’s the secret with the smart animate.

1 Like

I’ve run into something similar with text changes … If a text layer name follows its content, Smart Animate won’t work for me as intended (a label I just want to change text gets pushed of the off the screen and replaced, for example), so I have to ensure to commonly ‘hard name’ all text layers that I don’t want effected by a transform.

I’m not sure how that works within an instance of a complex component, but I guess you’d just name whatever visible layer you’d want to show with a common name, as mentioned by Steven above

That’s the part that doesn’t seem to work when using Nested Components and overriding them. It will highlight both layers on the Editor (while using the same name), but it won’t animate between them. (Unless you detach everything) :face_with_monocle:

Can you share a little video ?

Sure! As you can see from this video, both layers have the same name and match according to the editor, but Smart Animate only works when detaching the parent component.

1 Like

As @Steven also mentioned, I think the names of your frames are different inside. Not just the parent but also the one with actual progress. Have you tried naming them all the same?

Hi @Shaunak! Yes, both layer have the same name and hierarchy. (Modal > Navbar > Progress Bar > Progress)

1 Like

hmm… :upside_down_face:
that is weird indeed… I’ll try to replicate this at my end and check for a solution…

Here’s a link to the file if you want to take a look. :eyes:

PS: I accidentally moved a layer when you entered. It’s fixed now.

1 Like

Thanks! Just a heads up: I am able to go to your Components file through this and duplicate it. Don’t worry, I won’t look but since this is a public forum, you might want to limit that.

1 Like

Thanks! :flushed:

I was able to get nested progress bars to work with Smart Animate using another hack (Using an Auto Layout gap). Apparently Smart Animate doesn’t support nested variant overrides, maybe due to how the naming works internally. :thinking:

Thanks for all the help!