Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
2

Making a star rating hover effect

Community Beginner ,
Feb 29, 2020 Feb 29, 2020

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.

TOPICS
Design , How to , Prototyping
3.3K
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 29, 2020 Feb 29, 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
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Mar 01, 2020 Mar 01, 2020

Hi Dan, 

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

 

 

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 05, 2020 Oct 05, 2020

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

2.png

Then I crop the starts on a rectangle who has the same colour as the BG
3.png

 

I put the stars on top of the scroll component 
5.png

component probably needs some explanation...

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 05, 2020 Oct 05, 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

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 05, 2020 Oct 05, 2020
LATEST

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/

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines