Smart Animate when using Component Overrides

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.

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) 🧐

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.

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)

hmm… 🙃
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. 👀

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

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.

Thanks! 😳

Hey @andre, yesterday my Figma updated and now my nested and overrides components are working well with auto animate!