Copy link to clipboard
Copied
Hello Everyone,
I have searched everywhere and can't find any information on this... So I hope you can help me.
My question:
How do I make a dynamic star rating system/bar in Adobe XD?? I would like to use the Hover effect.
I am inspired by the rating system that Goodreads use (see video attached)
Thanks for your help.
Copy link to clipboard
Copied
You'd need multiple hovers, but when I tried layering them you couldn't see the ones underneath. So I don't think you can do this, but I'm curious to see if anyone else comes up a tricky idea to get this to work.
Copy link to clipboard
Copied
Hi Dan,
Thanks for trying.
Yes it's a tricky one indeed...
Hope someone have a good solution
Copy link to clipboard
Copied
I want to create this effect with the stars:
2 rectangles (2 colours) in a component, the component is a scroll horizontall bar. I keep only the dark part visible usinng the sliders.
Then I crop the starts on a rectangle who has the same colour as the BG
I put the stars on top of the scroll component
component probably needs some explanation...
Copy link to clipboard
Copied
Alternatively,
you can create a component that has a star on it, when click star changes its color; so that's for the first star.
For the second and next stars, you can copy past the component and deplace in next position, on click you can add a nnew star where prvious star was and change its color.
it works
Copy link to clipboard
Copied
Here's an example setup, it's a bit fiddling around, but it works nicely - stars change on hover, and you can click the selected rating to "set" it permanently.
The file:
https://www.dropbox.com/s/t20hznfnd22wmnx/Rating.xd?dl=0
The prototype:
https://xd.adobe.com/view/69b69220-8436-4db6-81d9-894f8f7afea4-3ce5/