Design & Prototype a Shopping Widget using Nested Components in Adobe XD

In this Adobe XD video, we're going to design and prototype a shopping widget using nested components. This will allow you to add multiple products and hover between each of them.
MORE FROM HOWARD PINSKY:
Twitter!
/ pinsky
Dribbble!
dribbble.com/pi...
Website!
www.letsxd.com
Facebook!
/ howardpinsky
Subscribe!
www.youtube.com...

[@NiTiSHmurthy]

When I struggled last week, with the nested components hover states i figured there'll be a workaround with custom hotspots but I couldn't get it to work the way it was supposed to. This video tutorial cleared up all my doubts. Thanks Howard!

[@jamievdj2824]

How did you get those images? Love your channel!

[@tinaberger9579]

In this scenario how would you add a hover effect for the thumbnails?

[@tornikechkhvimiani1242]

This helped me to make header dropdowns, but after sharing it as a "presentation" it was blinking while hovering.

[@thattv5890]

as always great tutorial.

[@Mrdardas99]

Beautiful! Never thought stacks can be so useful, thank you for that. Having said that I doubt it is good UX design to hide the 3 thumbnails and only show them on hover - not only do you lose conveying really important information (there are multiple colors available for that model!), you also move the target dynamically (the shop now button) which is incredibly awful for accessibility and a slow device or bad network.

[@HowardPinsky]

I think it depends on where this widget is displayed. If it's front-and-center on a landing page like this (which was just for show), I completely agree. It wouldn't make sense. But if it's part of a list of products, it's very common to only show additional colors on hover. Nike, Adidas, and others currently do this.

[@Mrdardas99]

@@HowardPinsky If the point was to show us how it can be done, than indeed it was enlightening. I still would take care not to have anything move the CTA button. I also tend to design sites that need to work on both desktop and mobile without the devs having to work too hard, so any information hidden before a hover effect can be a problem. Having said that, I appreciate your videos very much - they are a wonderful educational tool. You make everything seem so clear and easy, and so freaking pretty!

[@HowardPinsky]

More good points! Really appreciate the feedback, Oren!

[@Eric-Denton]

@howard - Is there a reason we SHOULDN'T leave Type on "Auto-Animate and turn Animation to "None?" If nothing is really happening, I guess I'm not seeing the point of this step (beyond possibly being saving some render time?)

[@adhamelkelany]

Nice tutorial!!! I have an issue with xd line-height, the text box actual height does not reflect line-height value.

[@ahmethallul2738]

thank you Howard

[@amrahmed3312]

from where did you download these photos?

[@tysonkid8804]

Do u have scratch course of this XD course on ur playlist?

[@Sam-rd5bo]

Where do you find such images? Can you recommend places to find such images that are not paid?

[@HowardPinsky]

If you don't have a budget for stock images, Unsplash is a good resource.

[@emkhandigital]

if you didnt change the auto animate to transition and animation to none, you wil have the display images switching when their respective thumbnails are hovered

[@georgesmile13]

Great tutorial, what are the fonts you are using on this project ?

[@HowardPinsky]

I'm using New Spirit for the product title (Everyday Runners) and nav links. I've been toying around with it lately and it's pretty fun! The body copy is Avenir Next.

[@georgesmile13]

@@HowardPinsky Thank You for the information.