By Howard Pinsky
Hey everyone, Howard Pinsky here. And in this Adobe XD video, we're going to take a look at using nested components to create this shopping widget that contains multiple products. Here's a landing page I've been working on and, right over here to the left, I have a shopping widget that contains an image at the top, some information down at the bottom and a button that will link to another page. And what I'd love to happen is, when this widget is hovered on, additional colors will appear right here at the bottom... and as those colors are hovered over, the image at the top will change.
So to start that process, we need the nice large image at the top. I'm going to hop over to Finder, or Explorer on Windows, and we're going to start with this image of lovely, orange shoes. I'm going to drag this directly in. And with that in place, we can start the process of adding the additional colors at the bottom. And to make our life a little bit easier, what I'm going to do in the Layers panel, I'm going to select all the elements that make up this card, pop them into a group, Command or Control+G, I'm going to call this Card, and then over within the Properties Inspector I'm going to enable a Stack which is automatically going to define that as Vertical -- since the layers are going top to bottom. Now, I can dive into this group and, with my Rectangle tool, shortcut key R, I can go ahead and drag out a thumbnail. And you'll notice, because a Stack is enabled, everything else moved out of the way really nicely. I'll go ahead and round out the corners of the shape by about 8 pixels and just for now, I'll change the color to a nice gray. Now, this first thumbnail is going to correlate with this image at the top, so I'm going to hop back over to Finder, grab this image and drag it into this shape as well. And then within the Layers panel, I'll just name this Orange Thumb.
And now what we want are two additional thumbnails over to the right. And to make that process a little bit easier, I'm going to use a Repeat Grid, Command or Control+R, and drag out two more. I'll adjust the padding just a little bit. Then I'll hop back over to Finder. And I have these two images I want to use as well. And I'll pop them into the grid. And I'll go ahead and name this Thumbnails. All right, so with the thumbnails now complete, we also need two additional images at the top for the pink and the brown shoes. So with the orange image selected, I'll go ahead and duplicate this, Command or Control+D, and what you might run into is this situation here. When I duplicated this because a Stack is enabled, it did exactly what it was supposed to: it duplicated the image and pushed everything else downwards. Now, if you don't want that to happen, simply go ahead and hop into the Layers panel and select the elements that you want to stay in place, group them and give it a name, like Top Section. Now we can dive into this group and duplicate the image with Command or Control+D. Next, I'm going to hop back over to Finder, grab the image of the pink shoes, drag it in, name it Pink in the Layers panel, duplicate one more time, and then drag the brown shoes in, And I'll go ahead and name this Brown.
So, at this point, we have all the images at the top and we have our thumbnails. And what we're going to do now is, before we create the overall component, we're going to create the individual components for each color, which will be nested in that larger component. And the reason we're doing that is because when you create a component that contains additional components, those main components are converted into instances. So it's a little bit easier to edit this way. Now you might be thinking, we're going to take the thumbnails of each of these colors and the large image and turn that into a single component. But what we're going to do is use invisible shapes for the hover targets... and this may make a bit more sense in a moment.
So what I'm going to do is, I'm going to grab the Rectangle tool and draw out a box across this orange thumbnail at the bottom. And then give a little bit of room on the right-hand side. Then, I'm going to duplicate the shape over, I'm going to hold down Alt or Option and make sure it snaps to the left-hand side, and then give a little bit of room on the right. And one more time, I'll duplicate the shape over to the right, making sure it snaps to the left-hand side and, for this one, we can snap it to the right as well. And using targets like these, if I go ahead and drop the opacity a little bit, this will ensure that, as we're hovering over each of these images, there are no areas in between the images that will cause our components to cancel out. And in just a moment, we're going to turn the opacity of these hotspots down to zero. So I'll leave it as this for now. So what we'll want to do now is, select the image at the top and the corresponding hotspot and turn that into a component.
And since we can see the brown image at the top, we'll start with that one. So I have this image selected. I'm also going to go ahead and select this hotspot right at the bottom. And then within the Properties Inspector or your assets, you can go ahead and create a component. And I'll make sure to name this in my Layers panel to keep things organized. Now on our default state, since we don't want the brown shoe to be displayed initially, I'm going to dive into this component. I'm going to hide the Image at the top. And I want to make sure that the opacity of this hotspot layer is at zero. And that's very important to pay attention to, this will ensure that this hotspot still remains active. And as you'll see in just a moment, if you were to hide this hotspot, it would affect the bounds of the overall component. And now that our default state is set up for this Brown component, we're going to go ahead and press that plus button one more time in the Properties Inspector and then we can create a new hover state. And for this, what we'll want to do is, go back into the component, reveal the image and then for that hotspot we're actually going to want to hide it. And what you'll notice, if I turn this on and then off, the balance of this component squeezes on into the image at the top. And the reason that's so important is, as you're hovering over these images, if the bounds of the component at the very top were all the way to the bottom, covering these additional images, we would not be able to continue hovering.
So with our Brown now in place, I'm going to go ahead and switch back to our default state. And now we can move on to the Pink. So I'm going to go ahead and select this image at the top. I'm also going to select the corresponding hotspot and, just like we did before, we're going to create a component. I'm going to name this Pink and then on the default state, we're going to hide the image at the top and make sure that hotspot is down to 0% opacity. Next, we're going to press that plus button one more time to create a hover state, dive into the component, reveal the image, and then hide the hotspot. All right. Let me switch back to our default state and now we can finish up with our Orange.
So I'll select the image at the top, select that hotspot. Turn these both into a component. I'm going to name this one Orange. And since the orange shoes will be displayed by default, I'm not going to hide this image at the top, but I am going to go ahead and drop this to zero, and then we can create our hover state. Now, for this one, in particular, because these orange shoes will be displayed by default, I'm thinking when this overall card is hovered, we may want to switch up this image a little bit. So I'm going to hop over to Finder one more time. I'm going to grab this image here, which is slightly different than the orange one, and pop this into the shape. And then I want to make sure, inside of this hover state, to hide the hotspot at the bottom. All right. So we've gone ahead and created all of our default states. We have our Orange. We have our Pink. And we have our Brown. And all of them have hover states as well.
And speaking of hover states, when they're wired up, by default Auto-Animate is the chosen action. And in this case, there's nothing really to animate. So I'm going to switch over to Prototype mode. I'm going to make sure to select all the components that we just created. And then, over within the Properties Inspector, I'm simply going to switch the Type to Transition with no animation. And now, if I launch the preview at the top, we can go ahead and hover over these two different shoes and the animation takes place immediately. So now that we have all three of these components set up and looking pretty good we can create our overall component. So I'm going to select the group that contains all the information in this card. And then over within the Properties Inspector, I'm going to hit the plus button to create our default state. And like I mentioned earlier, all the components that are nested inside the larger component have now been converted into instances.
Now, on our default view, we want to make a few changes before we move on to our hover state. And initially, we do not want the thumbnails of the different colors to be seen. So I'm going to dive into this component. I'm going to start by hiding the thumbnails at the bottom. And you would think, because we have a Stack enabled on this component, this information would now move up. But we also have those hot spots that we have to hide as well. So, diving into Orange. I'm going to hide this hotspot, Pink, and then Brown. And that will then allow all the content to automatically move up nicely. And now that our default state is now in place, I'm going to select the component, hit the plus button one more time, and create a hover state. And since we now want the thumbnails to be displayed, I'm going to dive into this component into the top section, go ahead and unhide those thumbnails. And when this overall component is hovered over, I want the Orange to switch to its hover state. So I'm going to go ahead and switch it over in the Properties Inspector. And then, I want to make sure that our other components are revealed as well, including their hotspots. All right.
Now before we go ahead and preview, I'm going to go ahead and switch into Prototype mode just for a moment. Make sure our default state is selected and then switch the Type over to Transition and the Animation set to None. And with that now all set, we'll go ahead and press that Play button. We can now hover over this card to reveal the additional orange image. And we can hover over the additional colors at the bottom very smoothly.
And that's how you can create a shopping widget using nested components and Adobe XD. Thanks for watching everyone. Make sure to follow me on Twitter. Subscribe for more videos and I'll see you all next time.
Use nested components to create a shopping widget featuring multiple products. In this tutorial, you’ll see how to build projects efficiently by making several components, then combining them to create a parent component with nested instances. See best practices for laying out elements using Repeat Grids and Stacks. Draw out shapes with the Rectangle tool and set the opacity of shape fills. Use transparent rectangles as hotspots to wire up the interactivity with hover states. As you roll over three thumbnails, the corresponding larger photo displays in the main product area.
