Highlighted

Making a star rating hover effect

Community Beginner ,
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

614

Likes

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

Making a star rating hover effect

Community Beginner ,
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

615

Likes

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
Feb 29, 2020 1
Adobe Community Professional ,
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

Likes

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
Reply
Loading...
Feb 29, 2020 0
Community Beginner ,
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 

 

 

Likes

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
Reply
Loading...
Mar 01, 2020 0
New Here ,
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...

Likes

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
Reply
Loading...
Oct 05, 2020 0
New Here ,
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

Likes

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
Reply
Loading...
Oct 05, 2020 0
Spas K. LATEST
Adobe Community Professional ,
Oct 05, 2020

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/

Likes

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
Reply
Loading...
Oct 05, 2020 0