Actually you can do this with variables. Create a local one name “#rating=0”

In your rating component have variant prop that has values from 0…5 and bind that variable to that property.

And then use prototype mode to set rating value when clicking each star. Like when I click star number five set #rating=5

I tried that earlier, created a component set but I had to apply same interaction for let’s say 3 star rating, I had to apply the “on tap” interaction on the third star of all the variants, similarly for each star, otherwise the interaction won’t work.

This method is high effort work (25 interactions), and using variables won’t be beneficial.

If there was a way to create a loop that loops from Index Z to 1.

I’d guess that you can apply tap interaction on the instance so it is only x5, not 25, it will propagate to other variants as an override. And then if you wrap it with another component it could work

Would be cool if there was a variable for the index an element is at. Something like #index. For the first star it would be 1, the second 2 etc.

That all the stars can have the same interaction. You’d just need to connect the stars to the same local variable as the rating component.

Would still require a local variable per rating element.

I made this with some color variables and a single icon. Not sure whether this is the correct method.

figma file | prototype link

I did something similar back when Figma didn’t have variables. There’s definitely an easier way to do it now. However, if you need it asap, I’ve just published the file.:

File

I found a way.

We need to create a pseudo-component, for example, an indicator with three colors. The transition from 1 to the second and to the third state with a delay of several milliseconds (set refresh rate to your case) then we close the loop creating a transition from state 3 to state 1.

After creating an indicator, for each of the three conditions, you can add another one that will do.