#ADOBE XD TUTORIAL HOW TO#
#ADOBE XD TUTORIAL PLUS#
#ADOBE XD TUTORIAL MAC#

So come to the rectangle tool, and we'll make this a little bigger first and scale it down.

#ADOBE XD TUTORIAL HOW TO#

You know how to do a lot of stuff already as drawing I'm sure but let's do this, let's talk about how to edit shapes. And we're gonna come above this categories art board and I wanna create a little icon, okay. I'm gonna press the hand tool here or the space bar to get to the hand tool. Alright now we're gonna go in and we're gonna start to create a little bit more, take it a little further talk a little bit about the pen tool and just editing shapes a little bit, kinda give you an idea. You can kinda think of that as a swatch going forward that you can reuse. That's just gonna save it in this document so you can use it again and again.

#ADOBE XD TUTORIAL PLUS#

You'll see that you have the hue saturation and brightness, you also have the alpha slider and if you decide that you make a color you can save it by clicking on this plus right down here. Maybe like a light red or something like that. I'm gonna go in and just kinda pick a color, we'll go with a little bit lighter color.

We have Hex to start, we have RGB, and we have HSB. And then come to that border color and click on the fill color or the border color rather and you're gonna see we have a bunch of different ways here to make colors. This time turn off the fill and turn on the border so you can totally remove the fill just by turning it off which is great.

And we're just gonna do a color change here, this is just another button body we're gonna create. So what I wanna do is you can just Option on Mac, Alt on Windows, drag straight down, release the mouse and then the key. Go to the select tool and what we're gonna do is just duplicate that object. You're gonna be doing a lot of Escape, it's kinda crazy. So what I want you to do is press Escape and what you're gonna do is you're actually gonna deselect. You can go in and do the fill, do all kinds of things if you want to, I'm gonna leave it at white for right now and what we're gonna do is we're just gonna copy that. You can just turn it off if you don't want it, so turn off border. You gonna see the XD actually has a fill and a border so the fill's inside, the border's the stroke or the outside. Now we're gonna go in and I'm gonna show you how to draw something in minute here and show you how to take this further but what we're gonna do is just let's do this, let's just turn off the border. So you've got a couple different ways to do this. And then if you look in the property inspector over on the right, you'll see that you've got the corner radius over there so you can say I wanna do them all the same or I want them to be different and you can type in values over there. Let's just round the corners a little bit, don't get crazy.

#ADOBE XD TUTORIAL MAC#

Just click and drag to round the corners that's great if you wanna do just specific points you can use the Option key on Mac or Alt key on Windows and do just certain radius points if you wanna do that. If you look in here, you're gonna see we have these corner radius points. Once you draw it, you can keep editing it so you don't have to switch tools. Now once you draw in here, it's sorta like Illustrator, you actually have what are called live shapes, they're kind like that. I'm filling out, you can see it snap over to that guide which is pretty great.

I'm gonna go in and create a rectangle here, just click and drag. If you don't have it, you can always set it up like we did. I have, if you look, I've got that grid, the layout grid setup and that's great because I can now snap to it. So why don't you click on rectangle and it'll come out. If you're used to the pen tool, this one's a little different, it's actually pretty awesome. Now, we have a rectangle, we've got a circle, we've got a line and we've got a pen tool. So if you look on the left, you're gonna see the tools bar. So what I'm gonna do is I'm gonna click on the name Home for the artboard and press Command + 3 on Mac or Control + on Windows to zoom into it. You know how to draw a square probably so what I'm gonna do is I'm gonna show you some of the really cool things that Adobe XD can do and you're gonna wish that these were in the other programs by the time we're done. If we need to draw in here, if we need to create things like vector shapes, all that kinda thing, I'm not gonna bore you, I'm sure a lot of us have already created a shape in Illustrator or Design or Photoshop.

Adobe xd tutorial