Skip to main content
Participant
February 29, 2020
Question

Making a star rating hover effect

  • February 29, 2020
  • 3 replies
  • 3582 views

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.

3 replies

Participant
October 5, 2020

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

Spas K.
Community Expert
Community Expert
October 5, 2020

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/

Participant
October 5, 2020


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...

Dan Rodney
Community Expert
Community Expert
March 1, 2020

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.

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor
Participant
March 1, 2020

Hi Dan, 

Thanks for trying. 
Yes it's a tricky one indeed...
Hope someone have a good solution