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

Making a star rating hover effect

Community Beginner ,
Feb 29, 2020 Feb 29, 2020

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.

TOPICS
Design , How to , Prototyping

Views

2.7K

Translate

Translate

Report

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

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.


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

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

Hi Dan, 

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

 

 

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

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

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

Votes

Translate

Translate

Report

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

Copy link to clipboard

Copied

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/

Votes

Translate

Translate

Report

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