Do the interactive components and variants actually work?

No, I didn’t before but I just signed up. I had no idea that this was needed as none of the videos, etc have mentioned this. Hope this is the real reason it doesn’t work.

Wait for you to be accepted into beta and see the help center article: https://help.figma.com/hc/en-us/articles/360061175334-Create-interactive-components-with-variants

I hope it’s soon so I can finish my project. Do you know if there is another way for me to make the ❤️ heart icon change in my prototype, from and outline to filled when it’s clicked on? If you do let me know or even send me a link to an example. Many thanks. 😊

Yes, create a frame, place a component variant in this frame, then duplicate this frame and select a different variant of your component. Thus, you will have two frames: in the first - an outline heart, in the second - filled. Select the component in the first frame and open the Prototype tab. Create an interaction with the following settings: “On Click / On Tap” trigger, “Navigate to” action to the second frame, animation of your choice. Do the same for the component in the second frame, with “Navigate to” to the first frame. Run the prototype by clicking the “Present” button.

I created a file, duplicating which you can see all the settings: https://www.figma.com/file/5xt5jL2L1ldfmVx0px7IEY/Hearts
Page 1 - without interactive components;
Page 2 - with interactive components;

Thank you. I will check it out. Let’s say I have a bunch of photos that I want the hearts in the corner of each photo, so people can indicate their favorite, will it work there as well?

It will, but without interactive components, you have to create a screen for each combination of “likes”. It’s not worth it. To demonstrate the work, it is enough to show it once.

Thanks.

I have another question. I am doing a prototype where when the person clicks add it add it to a cart and a number appears in the cart. How would I do this in a prototype? Is it possible? Is this also components and variants? Thanks

You can do it in the following ways:

1. When you click on the “Add” button, go to (“Navigate to” action) the screen with the “Basket with badge” icon.
2. Or create a component set, which should contain Variant 1: “Add” button and “Empty Basket”; Variant 2: “Add” or “Remove” button and “Basket with a badge”, in which, when you click on the “Add” button, Option 1 will change to Option 2.

Thanks. So the first I would actually have another screen, the bad screen. I don’t want that.

I want to do the second one but like you said previously I can’t unless I get an ok to use the beta. I emailed Figma three times since I originally posted about the variants, because I really want to use it. They have not answered me back. 🙁

@darren

@Marlene_Horwitz looks like you were added to the beta on June 22 but the welcome email was never sent to you. We’ve manually resent the email so you should see it in your inbox now.

Please let us know if you still have issues with this.

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