Hey! 🙂 For the prototype I’m working on, I was intending to use the like button created as in this video but I quickly ran into an issue here. In case there are multiple cases in the design where the like button would be used, is there a way to make each of them independent from each other without having to create a separate number variable and an individual component to each use case? Now if I apply same component throughout all of the items, once the like button is clicked on one of them, the like count is increasing for every item. Does anyone know how to solve that? Or should I just use a simple component without variables to avoid that from happening? Would really appreciate advice on this! 😊
This topic has been closed for comments
I’ve found a somewhat fix for this.
Here’s what it looks like.
I have a component “Like+Count” that is a heart with a number below it. There are two total variants for the component: one is the “not-yet-liked” state and the other is the “liked” state. I added two properties on the component: LikeCount+0 and LikeCount+1. Both properties are Number properties. Their values are “208” and “209”. Both variants of the component have a text box below the like icon. I’ve set the value of the “not-yet-liked”'s text box to the property “LikeCount+0”, and I’ve set value of the “liked”'s text box to the property “LikeCount+1”. The prototype connection between the variants is simply to replace one with the other. Now I can insert the component into a design and then manually change two properties to the values I want them to have for that instance. This way the values on the instance are independent of the component and of any other instance.
Included are a few photos to show the process.
Main component looks like this:
Let me know if this helped!
-John
^correction, caption for last one should be “Properties on Component look like this:”
Components appear in Layers sidebar like this:
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.