Hi All,
I have an app design I am doing for a course. I want to have a heart outline icon in the prototype that when you click it changes to a fill icon. Seems pretty simple. However regardless of what I do and I have been following many videos and it does not work. First I tried it in my actual project and it did not work at all. Then I tried it separately in a new window, it does not work either but in a different way. This is the last video I tried to follow. Figma Interactive Components Tutorial - Figma Interactive Components Beta [New Update] - YouTube. I don’t even get the same items in the interaction detail box.
This is the Figma file. It’s the latest update.
Should I just stop trying? Is there a better way to accomplish this? Should I forget it altogether? Thanks
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.
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.
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.
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
When you click on the “Add” button, go to (“Navigate to” action) the screen with the “Basket with badge” icon.
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.
@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.
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. 
