3.1 Combining Shapes
In this lesson, you’ll learn how to combine two or more shapes in Adobe XD; this is very useful for creating more complex shapes. The tools we’ll employ, common to most vector design applications, use four distinct methods called boolean operations. Let’s check them out.
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
3.1 Combining Shapes
Welcome back to the course. In this lesson, you'll learn how to combine two or more shapes in Adobe XD. This is very useful for when you want to create a more complex shape. And it's possible, thanks to four methods called Boolean operations, so let's check them out. Just to show you a quick demo, I have I just got two circles here, I can also give them a fill. And to get access to the Boolean operations, you need to select two or more shapes. So after selecting these, we can see that the four operations are as follows; Add, Subtract, Intersect, and Exclude Overlap. So here's how each of these work and to demonstrate, we're gonna quickly duplicate these shapes so I can show you the different results. So first is Add, Add will basically merge the two shapes together. So it's gonna merge this, With this, and the result is gonna be this. So this creates an entirely new shape and the layer here is named after the the operation that we used. We can also see the operation being highlighted here in the inspector. And with this new shape, well, I can do the exact same things I can do with each individual shape, change its fill, border, size, opacity, and so on. But the nice thing about this is that you can go in and you still have access to the old shapes. So you can move them around, make them bigger, smaller, you get the idea, so that's Add. The next operation is called Subtract, and here's what it's doing. I'll just group these first. Notice that Ellipse 3 is above Ellipse 4, and I wanna select both of these, and I do Subtract, Ellipse 4 is subtracted from ellipse 3. If I do Ctrl+Z to go back, and I change the order of the layers, so Ellipse 3 is now under Ellipse 4, and I do the same operation, the result is going to be different. So the idea is whatever layer or object you have on top will be subtracted by the one that's under it. So in this case, Ellipse 4 is subtracted from Ellipse 3, and this works with multiple shapes. So for example, if I'm gonna move this like so, And then I'm gonna select all of them and do Subtract. You'll notice that the top one, Or parts of the top one were cut off by whatever was under it, so that's what subtraction is doing. And again, you have access to the original shapes and you can edit them at will. If at some point you want to remove this operation, you can simply right-click, Ungroup, and it's gonna take you back to the original shapes, or with it selected, you can click on this button here and it's gonna revert back. All right, now moving on to Intersect. And Intersect is basically gonna keep the parts of the object that intersect with one another, right? So in my case, they're intersected like this only this portion here, and that's what we get. I think you can see it better if I open up the original shapes. So only that part there in the middle, got saved. And finally, Exclude is basically the opposite of Intersect, it's gonna keep everything but the parts that are intersecting with one another. So those are the four Boolean operations. Now, as I was saying you can use these to create more complex shapes, for example, You can create a house, Very easily. So let's add a nice fill color to this. Let's remove the borders, add a fill color, the fill color here doesn't matter. And then I can take these shapes, I can unite them. And I think I actually have a slight misalignment here, yeah, and there we go, so let's take this and this and let's unite them. And then I can take, I don't know, another shape, we'll make a window here and we'll make a door here. And I can take all of these three and I can do Exclude Overlap. Okay, so now, I'm only left with this, and then maybe I want to add a chimney. I can do that here, no problem, select the chimney, select the house and hit unite. And now, I have a house with a chimney. There we go. All right, so to get to this shape, there were actually several Boolean operations, first we have a union, then we have an exclusion, and then we had another union. But now, I have a much more complex shape that I can work with, and I can customize just like any other shape. Boolean operations are extremely helpful when creating icons, for example. All right, and those are the four Boolean operations you can use to create custom shapes in Adobe XD, Add, Subtract, Intersect, and Exclude. Now, with this out of the way, let's learn about aligning layers, okay? Because XD has some amazing built in Smart Guides and features that will assist you with aligning different objects on your canvas. We'll learn more about those in the next lesson.