Skip to main content
K
Kristophpher
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

    E
    Eloi_papas
    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
    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/

      E
      Eloi_papas
      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
      Dan RodneyCommunity 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
      K
      KristophpherAuthor
      Participant
      March 1, 2020

      Hi Dan, 

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

       

       

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices