Highlighted

Component states not working with repeat grids

Community Beginner ,
Jul 04, 2020

Copy link to clipboard

Copied

I've been following every tutorial I could find step-by-step and have tried at least 10 times so I want to check if this a bug by any chance. I cannot get the hover state to work on a repeat grid. I duplicated an overlay on top and everything but it just doesn't work, it applies the same opacity and fill on both default and hover states and is not doing anything. 

 

Thanks in advance! 

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

Okay, so you didn't leave the "failed" attempt in, and I'm not sure what the issue was, but I set it up on your HOME PAGE artboard, on the repeat grid with the images. You can examine it and see how it is different from what you were doing. 

 

https://we.tl/t-zxpkEuCSsf

 

If you're still having trouble, record a video of your process and I can guide you from there.

Cheers!

Views

66

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

Component states not working with repeat grids

Community Beginner ,
Jul 04, 2020

Copy link to clipboard

Copied

I've been following every tutorial I could find step-by-step and have tried at least 10 times so I want to check if this a bug by any chance. I cannot get the hover state to work on a repeat grid. I duplicated an overlay on top and everything but it just doesn't work, it applies the same opacity and fill on both default and hover states and is not doing anything. 

 

Thanks in advance! 

Adobe Community Professional
Correct answer by Spas K. | Adobe Community Professional

Okay, so you didn't leave the "failed" attempt in, and I'm not sure what the issue was, but I set it up on your HOME PAGE artboard, on the repeat grid with the images. You can examine it and see how it is different from what you were doing. 

 

https://we.tl/t-zxpkEuCSsf

 

If you're still having trouble, record a video of your process and I can guide you from there.

Cheers!

Views

67

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
Jul 04, 2020 0
Adobe Community Professional ,
Jul 05, 2020

Copy link to clipboard

Copied

Can you please share a screenshot or the file if it's not a problem? I'm not sure what you're trying to do exactly.

If you have a hover state on a component, and you make a repeat grid with that component, the hover state works on the "copies" in the grid. Also, not sure what "duplicated an overlay on top" means.

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...
Jul 05, 2020 1
Community Beginner ,
Jul 05, 2020

Copy link to clipboard

Copied

Sorry, I'm not that great at explaining. 

Basically, I have been following this tutorial x 10 at least step by step and the hover state is just not working. https://www.youtube.com/watch?v=2_cuB9dcpzM&t=48s

I tried it even without the repeat grid, just on an image. It works fine if I create the component and hover state for a button but it doesn't work on any images. 

Thank you!

A while back I showed off how you can use Adobe XD's components within a repeat grid to override elements, like icons, but now that states are available, additional interactions can be included within your designs, including hover. Download the tutorial file: https://letsxd.com/freebies MORE FROM

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...
Jul 05, 2020 0
Adobe Community Professional ,
Jul 05, 2020

Copy link to clipboard

Copied

Can you upload your Xd file somewhere and post the link here, so I can check it out and see what you're missing? It might be a number of different things.

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...
Jul 05, 2020 0
Community Beginner ,
Jul 05, 2020

Copy link to clipboard

Copied

https://wetransfer.com/downloads/b5834e7f956b456b28cb44d5d9f5de7420200705095116/cb0ef7a551d33b28ac34...

 

Here's the download link. I'm not sure if it's going to be any help. 

 

You'll be able to see that the hover state works fine for the 'More Posts' button so I do sort of know what I'm doing. The issue comes up when I'm trying to apply a darker overlay for the blog post images as well as the 'shop music/shop zines/shop merch' as a hover state. It just sets it as default whenever I try to make it a hover.

 

Thank you!! 

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...
Jul 05, 2020 0
Adobe Community Professional ,
Jul 05, 2020

Copy link to clipboard

Copied

Okay, so you didn't leave the "failed" attempt in, and I'm not sure what the issue was, but I set it up on your HOME PAGE artboard, on the repeat grid with the images. You can examine it and see how it is different from what you were doing. 

 

https://we.tl/t-zxpkEuCSsf

 

If you're still having trouble, record a video of your process and I can guide you from there.

Cheers!

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...
Jul 05, 2020 2
Community Beginner ,
Jul 06, 2020

Copy link to clipboard

Copied

I realised what I did wrong!! Thank you very much for all your help, I appreciate it. 

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...
Jul 06, 2020 1