Adding a veriant to an old, in-use component

If you created a master component and all the variants are symbols wrapping the master component, this is super easy, but I’m guessing this is not the case. If each variant is an independent symbol you are in troubles.
Solution 1: create a master component that holds the hover animation. Create a variant component wrapping that component and apply the necesario changes.
Nonetheless is hard to see the problem from that explanation

So I hope this explains this better because I didn’t quite understand your explenation, I’m still a student who’s weak on terminology.

So you can see my frame from the right, and the master component in the bottom left corner. I already have all those subcomponents with different pics scattered and I would like to NOW add a (hover) veriant to that master without it changing the pics or anything and leave everything as is.

Is it possible?

@Noam_Azoulay grab that component:
1 : make an instance of it (drag and make a copy)
2: grab that copy and turn it into a component again (meaning that now you will have a new component with the nested initial component.
3: repeat step 2
4: now you have 2 copies, select them both and turn them into a variant
5: create the desired animation inside that variant
6: go to your design and select one of the old instances.
7: go to main menu > Edit > select all with same instance
8: once you have them all selected, on the right property panel were you see the master component name, replace it with the new variant component name you did.

damn, didn’t get it right. first of all I couldnt resize anything after I combined the two copies (I want the hoverin veriant to just make the object bigger), so I tried making it a circle just for the learning (for some reason, I could do that).

Then, when i replaced the name in the last step just some of the objects became the new circular version but they didn’t even kept their pictures.

I probably missed something, maybe there’s a video? what’s the name of this proceedure?

Hard to explain via chat, but seems that you should play around with your main component structure, make the image bigger than the wrapper for the initial state, remove clip content, and play with auto layout and 0 width frame hack, I’ll see if I can come up with an example tomorrow

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.