Using the same variant component for multiple frames

Ask the community
1

Hi Everyone,

I am new to the community.

I have faced an issue with using the same variant component across multiple frames. I created a simple variant component with two states:

  1. False state: showing a heart without filling
  2. True state: showing a heart with filling.
    I copied this component into multiple frames. When I tested the prototype, if I click on the heart on one page, it changes to the filled state. However, I noticed that the hearts on all other pages also change to the filled state. I want to ensure that the component state on other page remain unchanged unless I click on them. How do I do that?
    I know I could create a separate variant component for each page, but that would be very time-consuming. Is there a more efficient way to achieve this goal?
2

Try changing the layer name of each heart instances. I’m not sure how you did the heart component, if you used variables on it and all of them is using the same variable then that may also be an issue.

3

Screenshot 2024-09-06 at 10.22.11 AM

Thank you for replying!
I took a screenshot of my hear component. Simply just create a variant state with filling.
I tried to change the name of the heart component in each frame. Doesn’t work.
Should I copy the component for each frame and rename the layer? Is there any other way to do?
I have like 30 frames using the same heart. It’s very time consuming.

4

NVM. I was dumb. I see just simply change the layer name works.

5

Yes. That’s what I’m saying haha. Sorry, i was not clear. :sweat_smile: