Rectangle, ellipse, and polygon tools - Adobe XD Tutorial

- [Instructor] Let's go ahead and break down some of the individual tools in Adobe XD. If you're following along with me, you're going to want to navigate to the illustrator vector section of the exercise file. And then I'm going to go ahead and take a look at the vector shapes art board. So for that, I'll click on it and I'm going to hit command on the macro control on windows and the number three to bring that art board more clearly into view. Starting from the top of the tool panel here on the left-hand side, we have the selection tool and that's the one we've been working with. It's the pointer tool. I can see it here in that upper left hand corner. And it's highlighted to indicate that it's selected. The keyboard shortcut, as you can see, is the letter V. Next on that list is going to be the rectangle tool. I'll go ahead and click on it. Notice that there is a keyboard shortcut, the letter R. Once I come back onto the canvas, you have to look kind of rather closely, but notice that my cursor has changed to a crosshair that lets me know I'm using a shape tool. And then very small in the very lower right-hand corner is a square letting me know it's the rectangle tool. As I toggle between shapes, for example, having those little indicators help an awful lot. So I'm going to go ahead, press and drag to create a rectangle. If I did that a second time and held down option on Mac or alt on Windows and pressed and drag, it's going to draw from the center of that shape. Notice that I can change the height and width by just dragging as I work. If I were to want a perfectly symmetrical height and width shape, I could hold the shift key, which is going to make that the same height and width as I press and drag. After I release, I can see that with the rectangle tool, I have the outer selection handles, those eight different selection handles, and just inside of them are four other circles with a dot inside of those. This allows me to determine the corners of my shape. Now notice here on the design canvas, I still have the rectangle tool selected. I can see that because of the icon. I'm going to go ahead and type V on the keyboard to get to the selection tool. If I now come to any of these control points and just press and drag, it's going to round out the corners of my shape. Now, as I do this, I'm going to stop for a second and point this out. As I do so, notice here in the appearance section of the properties inspector, that I can see that my value has changed from being a square sided shape to rounded corners. And I see the current value at 60. If I come back on the design canvas and you keep your eye there on the properties inspector, notice that I get a real time update, letting me know as those values change. Now, this is representing a symmetrical shape. If I come in and hold down the option key on Mac or alt on windows and press and drag, notice that I can control just one corner at a time. So you can make some pretty unattractive shapes if you're not careful, but pressing and dragging will go in and customize that corner. Looking back at the properties inspector, notice what happened when I created that first custom corner. XD represented instead of a single rounded corner value for all four sides, it started to break them out one for each individual side. So I can always come back and say, you know what? I love these rounded corners. I'm going to make it 50 pixels on the upper left hitting the tab key will advance me. I'm going to tab a second time and change that other corner to 50 pixels, so it makes them uniform. That's rectangle. The next one in the list is going to be the ellipse tool or the circle tool. As I hover over it, I see that the letter E will get me there. So I'm going to switch and just type the letter E, press and drag and I get that circle. Once again, the shift key is going to constrain it for me. Because a rounded circle is already rounded, I don't need to round it up. We can go ahead and jump to the next one, which is the polygon tool. This one's kind of a lot of fun. If I hover over, you can see that the keyboard shortcut is the letter Y, so I'm going to hold down the Y key and things are going to get a little more fancy here. So watch closely as I do this. Next what I want to do is go ahead and switch to that polygon tool. I'll type the letter Y. I can see that little triangle letting me know that I'm now on that tool. Now, as I press and drag, if I do so without releasing, as I mentioned, things get kind of fun. So look over in the properties inspector under the appearance area, notice that I can see that I have a three-sided polygon. I see that as the first value there. If I come to the keyboard and type the up arrow on my keyboard, it's going to add additional sides to the polygon. So I'm up to six sides now. As I type that up arrow, it's going to change that value. I can always go back in the other direction and bring it down, but that's kind of a nice way to, in one move, press and drag to create the shape and then decide how many sides it has. When I release, I have some familiar aspects here that we've seen with, for example, the rectangle. If I come on in and change to the selection tool, by typing V on the keyboard, notice that I can select the rounded corner attribute there, keep your eye here on this properties inspector. Right now that rounded corner value is set to zero. As I press and drag, I'm getting more rounded corners, and that value is changing rather dramatically. There's a third value that's unusual here, and that's unique to polygons. It allows you to create star shapes for example. So if I come on into this value here and change that to let's say 50, and then hit return, I get a very dramatic change. So I can come in and control that visually. Notice as a roll over here on the canvas, I have two different declarations, right? This one is saying, how rounded are the points? And then the next one inside of it is determining the inner shape of this particular object. So I can press and drag that. And it's going to control sort of that indented area there. I'm not sure the formal term. Let's go ahead and hover over it, and we'll both learn together. So if I hover over that, it's the star ratio attribute. If I come back to that rounded corner part there and just press and drag it back up, so I'll select it and drag back up, you start to see why that one's called the star ratio. This is how you're going to create stars. So you'll come in and determine the amount of sides to it. And then with that star ratio, you can pull the shape in to start to get different star shapes. There is one more shape that I would be remiss if I did not share with you. If you come here with this polygon tool still selected in the properties inspector, where you define the number of sides, instead of seven, go ahead and type the greater than symbol. So that symbol there, and the number three and hit return. There's a little Easter egg for you. That's the way that you can come in and design a heart shaped polygon. The final thing that I'll mention is that each of the shapes that we've just defined have different declarations in the layers panel as well. So notice here, we're in this vector shape art board. I can see the name there, but on that art board, I have a number of shapes. There's an ellipse. Notice it has a circle to represent that. I have two rectangles. We went ahead and converted our polygon to something Easter egg like and strange, but it became a path and that's okay. But notice that the path shape has that pen like indicator. It's the same as if I drew the heart using the pen tool. Just for good measure, I'm going to type Y on the keyboard. And once again, come in and I'm going to add additional sides to this shape and press and drag to bring up a star. Notice here in the layers panel, I can now see that additional shape, which is the polygon shape represented by the star. You can always come in and name these any way you would like to, but by default, XD is going to assign sequential number to each of the shapes as you add them on the canvas.