2.2 Working With Lines and Shapes
Welcome back to the course. In this lesson, you’ll learn how to work with lines and shapes in Adobe XD. These, along with the text tool, represent the bread and butter of any UI design. We’re going to go into a lot of detail for these, so let’s begin.
1.Introduction1 lesson, 01:20
2.The Basics of Working With Adobe XD4 lessons, 56:12
3.The Advanced Functionality of Adobe XD8 lessons, 1:13:40
4.Prototyping With Adobe XD2 lessons, 15:57
2.2 Working With Lines and Shapes
Welcome back to the course. In this lesson, you'll learn how to work with lines and shapes. And these, along with the text tool, represent the bread and butter of any UI design in Adobe XD. We're going to go into a lot of detail for these tools so let's begin. First, let's work with the line tool. And you can quickly select the line tool from this panel here on the left or you can press the letter L. And to create a line, simply click and drag, and whenever you're happy with the result, just release it. And you've just created a line with a starting point and an ending point. If you're not happy with how this looks like, you can grab any of the points and you can move them to make the line longer or shorter and also change its position. Now, if you want to draw a straight line, which is gonna happen in most of the cases, you can do it in two ways. If you've already drawn a line like this and you wanna make it straight, then grab one of the points and hold Shift on your keyboard. And this is gonna snap it at 45 degree increments. So this is a flat horizontal line, this is at 45. This is at 90, so a vertical line, and it just goes on and on like this. And whenever you're happy, just release and now you have a perfectly horizontal line. Or if you're drawing the line from the start, you can also hold Shift and then click and drag. And you can create the line directly like this, either perfectly horizontally or at increments of 45 degrees. So right now, I just drew a perfectly vertical line. Now, when you select a line, you have a couple different options in the inspector. And we're going to focus on the appearance tab right here. You can change the opacity of a line either by moving the slider by manually entering a value here or by using the number of keys one through zero. So one is 10%, 2 is 20, 3, 4, 5, and so on. If you do these in rapid succession for example, 5, 6 It's going to give you 56%. If you just do 5, it's going to give you 50%, 0 will give you 100%. Then, to change its color or thickness, you will change the border property because a line doesn't have a field property. It just has a border property. So if you remove the border that line is gone, you cannot see it anymore. So on the border you can change the color, only solid. So you cannot do radial gradients or linear gradient on it. And you can change the size. Three pixels for example makes a thicker line. And then you can also make a dotted line by using the dash and gap options. So if I do five dash, five gap, this is what you get. Also, let's remove these. On the line you have the option to specify how the end of the line will look like using these options here. This is a Butt Cap but here is a Round Cap and here is a Projecting Cap. So Projecting Cap, basically has this extra space right here. The Butt Cap doesn't have it. It just starts where the original point started. You can also add shadows to a line and you have the option to change the x, y and also the blur values. Also the color and opacity of that shadow. And if you want, you can also add a background blur but we'll talk about this in a future lesson. But yeah, that's how you can work with the line tool. Now let's move on to the shape tool. And this is probably the one that you're going to be using most because with it you can create rectangles or you can create squares by holding down Shift. This will make sure that the width and height are both equal. And in terms of customizability, you can also change its opacity. This is available for pretty much every object you select. But special on the rectangle or square is the ability to add rounded corners. So if you can see these handles on each corner of our object, if we drag on them, click and drag, we can change the border radius or corner radius. If you want, you can manually input this value, and that's gonna apply the same radius to all four corners. But if we switch from this option to this option, we can change each corner radius individually. So I can have 15 on this one, I can have 0 on this one. Now also, when I select a shape like this, it doesn't matter if it's a square, a rectangle, besides the ability to change the border, I can also change its fill color. So I can choose between a solid color or a linear gradient or a radial gradient. So these are all options. And since we're on the topic of the color picker, let me just show you this. You can save color swatches by clicking this little plus button. And these will be available later on. If you decide you want to create another shape and you want to use the exact same color, you can do that in two different ways. So select the shape, go to fill, and now you have these available to choose from. Or you can grab the eyedropper tool and you can pick a color from the screen, either from the canvas or from anywhere inside the application. So click that and it's gonna pick that exact same color. And this is actually a shortcut key that's available inside XD regardless of where you are and what you have selected, you can hit I on the keyboard and it's gonna open up the eyedropper tool. Now apart from the Being able to change the fill the color, you can also change the border color, just like I showed you on the line tool. But now you have some additional options for the border. So let me change the fill to white here so you can see this better, you can change where the border is positioned. So is it an inner border or an outer border or a central border? So actually let me change this to a very light gray so you can see the difference, okay? So the border here currently it's set to center. So, part of the border is inside the shape, part of it is outside the shape, here is outer. So the entire border is outside of my fill area. And this is inner so the border is now inside my shape. We also have the same controls for the caps here but we also can decide how the border joins are made. So we have a minor join here by default we can choose a round join or we can choose one, this is called bevel join, it just creates this nice cutoff here. On shapes you can also add shadows and background blurs. So that was the shape tool. Now hand in hand with the shape tool, we have the ellipse tool, and this is used to create ellipses or if we hold down Shift, we can create perfect circles. So this is the preferred way of creating circles, even though you can create, a square and then just round off its corners completely and that will also create a circle. The difference is by using the shape tool or the rectangle tool, excuse me. You can still change the corner radius. But if you're using the ellipse tool, you don't have that option anymore. This is an ellipse by default and you can make it into an ellipse or hold down shift and resize it as a circle. Another very useful tool is the polygon tool, which is this with the shortcut y. So with polygon, again you can drag and drop, and this is used to create polygons. That means triangles, rectangles, and so on depending on how many sides you have, he will decide what kind of shape you want. So by default, you would create a triangle with three points or three sides. But if you change this to four. That's gonna be a rhombus, five is gonna be a pentagon, six a hexagon and it can go as high as you want. And it can also specify a corner radius, either with this handle or by changing this value here. And star ratio, well basically allow you to create a star using your polygon. So to demonstrate, let me actually create a triangle here. And if I hold down shift, I'm gonna create an equilateral triangle, so all three sides are equal. And if I start changing the star ratio for example 90. You can see that these points here will start falling inwards. And that's going to allow me to create a star. And if I hold down Shift, I can now move in increments of 10%. And if I let go, It's basically free form. And I can change this bit to do the exact same thing. So this is an example of a star created with a triangle. But let's do, A Pentagon here with five sides. And I'm gonna change the ratio To about 30% to create the star shape that most of us know. Now the final tool you can use to create shapes is the pen tool. And this is probably the one that gives you the most freedom because you can basically create shapes from a variety of points, that you draw. And you can create any shape you want with this technique. And this is also editable, so you can double click, and you can select each point afterwards and change it to whatever you want. And a shape that was created with the pen tool has pretty much the same properties as one created with either the rectangle, ellipse or polygon tool. You can change its opacity, fill, border, you can add shadow, and background blur. So those are the tools you can use to create shapes in Adobe XD. Before we wrap things up, there are just a couple more things that I want to show you. The first one is about radial gradients, because I did briefly touch on them but, I never got into a lot of detail. So, to add a radial gradient you would go to fill, you would change the color mode from solid to radial. And this will basically let you define the center and also the actual radius of your gradient. And to change the colors, you simply select them from here, and then can then use these controls to to pinpoint your color. And then you'd select the second color and you would then choose it in the same manner from here. If you want to add another color to this gradient you simply click anywhere in the slider, and that's gonna create another color stop. And then you can use that to to define your own color. Since we have the the color picker open here, there is something else I wanna tell you. And that is, you can now switch between color modes using this drop down menu. You can switch between hex, RGB and HSB which is Hue Saturation Brightness. RGB is red, green, blue and hex is this color format that we're accustomed with. Now, if you have multiple objects created and you wanna add or change The same property on all of them at the same time, you can simply select all of them. And you can go and change any of their properties here. Or you can also group them by selecting all of them, right-click, Group or hit Ctrl or Cmd+G. And that's gonna create a group. You can see it right here in the Layers panel. So I can now select this group and I can do the same thing, and this is super, super handy. Now, since we're on the Layers panel, let's say that I have a big, big project with lots of layers and groups, and I can't seem to find a specific layer. Let's say that this ellipse is called, I don't know, circle, and this rectangle here is called cart, okay? And if I want to quickly find them, I can use the search option, click here, search for the term that you're looking for and there we go, it automatically finds it. What about cart? It finds it as well. Now, I wanna tell you a little bit about layer or shape transformation. So let's say that I have this rectangle here, and I wanna change its dimensions, its width, its height. How do I do that? Well, I can use the handles from either side. If I get the corner handle, it resizes both in width and height. If I hold down Shift, it's gonna resize proportionally but I can also flip it, I can flip it horizontally, or I can flip it vertically. And you actually cannot see any change right now, let me switch to a linear gradient that goes from like here to here, okay? So if I flip it horizontally, it's gonna look like that. If I flip it vertically, it's gonna look like that. To rotate an element, I can hover with my mouse cursor over one of the corners until the cursor changes, and I can grab that, rotate it. And I can also hold down Shift to rotate it in increments of 15 degrees, like so. Alternatively, I can also input a new value in the rotation here. Now, something very, very useful is that I can use this inspector to define dimensions or different values for different properties for the selected object. I can change the width, the height, the x and y position are relative to its parent element, in this case its the art board. So if I wanna put this right in the corner there, I can change its x to zero and y to zero. I can change the width from here, let's say I want this to be 800 pixels by 300. And something very, very cool is you can now do math calculations in the property inspector. So I can say 800 plus 50, and that's gonna automatically do the calculations for me. Or I can say height 300 divided by 2, and that's gonna give me a 150. Super, super helpful feature, especially when you have large numbers and you have some pretty complex calculations to do, that's it. Easy peasy for with this new feature. And finally, another way to transform or position an object on your canvas is to use the keyboard shortcuts. You can use the left and right arrows to nudge elements into place, one pixel at a time, or you can hold down Shift and do 10 pixels at a time. And you can use up and down, to nudge it up and down. And it can also hold down Shift to nudge it 10 pixels at a time. And then you can hold down Alt and use left, right, or top, down, to change its width and height respectively. And you can also hold down Shift to do that in increments of 10 pixels. So with this technique, it's really easy to quickly change the size of an object to a desired size. So let's say for example, that I want this rectangle to be 500 pixels in width. It's 468 now, so I'm gonna do Alt right to right to get it to 470 and then I'm going to hold down Shift, one, two, three, and I got it to the exact size that I want it. And that concludes this rather lengthy lesson on working with lines and shapes. As I was saying previously, these alongside the text tool are hugely important. So why don't we cover the text tool in the next lesson? I'll see you there.