Get comfortable with Components in Adobe XD

All right, everyone. There are two files that we got for the workshop. There is an Adobe Stock image, I just had you guys download this because I wanted you to see how we can just drag this right into an XD layout and have the bounding box of an object inside of XD become the container for this image. And then we’re going to build a component, just like we did, that I showed you inside of the webinar, so we can set up our point type, we can set up our padding, and just to get you comfortable with working with components inside of XD.

So the second file was the web_page_design.xd file.

So to begin, let’s open that up inside of XD.

If you’ve never worked inside of XD before, you can explore the interface a little bit. In the lower left hand corner are the three views you can have for your left panel next to the toolbar. Let’s come over here and click on the layers panel here to make sure that we’re looking at all of our layers. With nothing selected on the stage you should see an artboard that’s just called Web Page Design.

So what you want to do is, you can zoom around inside of XD by clicking on the zoom tool here. If you click on the zoom tool, you can hold the option key, or alt, and you can zoom out, or with the plus sign you can zoom in, again, very much like some of the other tools. You can hit command or control zero to zoom the artboard into full view as well.

So the first thing we’re going to do, from the operating system, let’s grab the JPEG file we got from Adobe Stock. We want to drag and drop it into XD, don’t let go yet, and move inside of XD until you see the gray box outlined in blue. This lets you know that this is where we’re going to be dropping that graphic. Once it’s highlighted in blue, the whole gray box, you can let go, and that’s going to stick that image right into that bounding box there.

Once you do that, you can double click on the image, and now you’re going to be editing the pixels inside of that bounding box area.

So if you want to zoom out a little bit to see the whole image, you can do that. Inside of here you can grab one of the corners, you can scale this up and down, you can hold option to scale from the center, a lot of the same shortcuts you’re familiar with with other design tools. Then you can just move this around and change the area of the crop inside of here.

After the webinar today I have two more circles down here, rounded corners that you can add additional artwork. You can go on Adobe Stock, search for glass art, and try out different photos inside of the bottom area here as well.

Once you have the photo looking like something that you like, let’s come up here to the upper right hand corner, to the right hand side of the navigation, and let’s create our button. So let’s start by coming over here to the tools, let’s come over here and select the rectangle tool at the top.

Then come back into the canvas, and over here to the right side of the news navigation item, let’s click and drag, let’s draw a rectangle that’s about 175 pixels by about 40 pixels.

You can see that over here in the inspector panel.

Once you’ve drawn that you can click on your selection tool at the top or hit the letter V key, move this into place.

Now let’s go back over to the tools and let’s click on the text tool.

Now we want to create something called point text here, because we want to have our component be able to expand to match the size of any artwork that we have placed on the stage. So to do that with your type tool, come over here to the canvas area, click one time, anywhere, and that’s going to give you a cursor that’s blinking.

Let’s type in the word label.

For your font size, let’s set this to about 20, to a value of 20, you can pick any font that you want, I’ll just use Helvetica Neue, because that’s what came up, and let’s come down here and change our color. If you click on the color swatch in the inspector panel, you should have three swatches that I saved here. You can save more swatches by picking a color and clicking the plus sign here.

I’ll just set the color of the type to orange, and can click away.

Next, let’s come over here to the layers panel. Let’s rename our rectangle to btn shape. This way, we know that this is the shape for the button.

Then we’re going to select that button shape, let’s come down here to the border in the inspector panel, click on the swatch, and let’s set this to be orange as well.

Going to set this to maybe two points, and then lets come up here and let’s grab one of the corners and just click and drag one of the corners in toward the center. This will create a rounded pill shape for the button.

You may also notice in the inspector panel, you can also change the rounded corner properties down here as well in the appearance.

So once you have a rounded rectangle, let’s come up here and select the label, text object. Let’s drag this down here and let’s drag this until XD snaps it right into the middle.

So our smart guides will come up, you can also select both of the items and use the alignment tools, click the align center and align vertically.

And now, with both of these, the label and the button shape, over in the layers panel, make sure we have just these two items selected, then we’re going to turn this into a component. You can hit command or control K, or on the Mac, you can go to the object menu and choose, make component.

Once you do that, you’re going to get a group in the layers panel, and the group is going to have a diamond shape to it which tells you that this is a component, it will also be named, component. Let’s come in here and just name this to button instead.

Anytime you see these icons over here in the layers panel, you can click on these and open them up and see everything inside. So here are the contents of our button component, we have our label and our button shape.

Now what we’re going to do is we’re going to make use of that padding feature. Again, this is a pretty brand new feature inside of XD, it’s part of the responsive design capabilities for allowing you to adapt your design to different sizes and areas. So to make use of that, let’s select the button component in the layers panel, then over in the layout properties, let’s come over here to padding, let’s click on this lock on here to activate padding, and once this has been activated, XD will go through and measure the distance between any item inside of here and the back-most layer of your component. So our button shape down here is actually acting as the outermost shape for the padding to be measured. If you click on the first letter here you can actually see the padding showing up across the top. Second is on the right, bottom and left, and you can come in here and change these numbers. You can make them all exactly the same, so I might make mine nine for the top and bottom, and 55 for the right and left.

Once you’ve done that, if you come over here and click on the type layer, double click so we can come in and change the text, you’ll now see that as you make text changes the size of that box is going to change.

So let’s come in here and just type in the word, donate, and the width of that box is going to change.

Now, the last thing that we’ll do is, we will make a copy of this and we’ll do a local override. So now we’ve created a component that can be reused, that has padding properties, so it’s responsive now.

Just so I can have a little bit of room I’m going to just move my image out of the way. Grab your donate button, hit command or control D to duplicate that, move the copy down, and you’ll notice on the copy, the upper left hand diamond has now opened.

Over in the layers panel, let’s open up the copy of the button, and you’ll actually see in the layers panel, the diamond shape has a little open shape inside of it as well. So the layers panel’s also letting you know that we’re not working in the master, we’re working in one of the child elements.

Let’s select the button shape, over in the inspector panel, let’s change the background. We’ll change the background to orange just make it a little bit darker.

Go back to the layers panel, select the type layer, let’s make the type white, then maybe for the border, since it’s against white here, maybe I’ll just turn the border off altogether.

So now we have a second copy of our component. If we come in here to the first one, your master component, if you make any changes here, like maybe we rotate the type, you’ll see that those changes will make their way down to the second item. Anything that’s not part of a local override that you put on the child, can still be controlled from the master component.

As I mentioned in the webinar, this will take a little bit of getting used to, having objects that are controlled by other objects, and then you can do local overrides on them, but once you get the hang of this, this becomes one of the most powerful and most effective time saving ways to work with your designs across multiple artboards and even across multiple documents. -