Skip to main content

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! 😊

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:

image


Let me know if this helped!


-John

Components appear in Layers sidebar like this:

image

^correction, caption for last one should be “Properties on Component look like this:”


Components appear in Layers sidebar like this:

image

Reply


Terms & ConditionsCookie settings