This lesson is exclusive to members

Figma UI UX Design Essentials

Boolean, Union, Subtract, Intersect and Exclude with Pathfinder in Figma

Daniel Walter Scott

Download Exercise Files

Contents

Certificates

We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
 Hi everyone, are you ready for a mildly better drawing tutorial? We're going to explore Boolean operations, Union, Subtract, Intersect, Exclude, it's very like the Pathfinder in Adobe Illustrator, but here, in Figma, has some really cool perks, let me show you what they do, and what the perks are. Yes, we make a house on fire icon, anyway, it shows all the different Boolean operations, it seems like a good idea, that's why it's there. 

So in the last couple of videos we did some actual drawing, using Shapes, Pen tool, and that's one way of drawing your icons, and, I know, UI components, Page Furniture, is another good word for them, things that are on the page. We're going to use what's called a Boolean operation, it's a bad name, I don't like that name, but basically these are the way these Booleans work. 

So let's create a couple of things, I'm going to go to the 'Rectangle' tool, I'll draw the base of my house, I'm going to use the 'Polygon' tool to draw the top of it, and select both of them, and say, center them, and make them like that, good enough for me. I'm going to select both of them, and I need to pick them to be, a nice color, just because. 

So Union, what does it do, because if I made this, and that was my house icon, I'd be like, "Yep, there's my house," that's all I need to do. Problem is, when I export this it'll export two shapes, so I'll send this off to my developer, and he'll be like, "Why have you sent me a triangle and a square?" We'll do exporting later in the course, but that's a problem, so what you need to do to combine these, or to union them, is to select both of them, you can select-- you can have a bunch of different shapes, it doesn't have to be just two, and this thing appears. 

So without it, not there, one of them, not there, two of them, this thing appears, our Booleans. So drop this down, and we're going to start with Union, you're like, "Look at that." Kind of smooshed it together, it got rid of the, you know, the two shapes, and now it's one, it's called Union. Now we can call this one, I'll call it "Union", because we're using-- we're trying to get used to the names, this is my house icon, and when I export it, it's going to be one unit. 

The cool thing about it though, is that it's always editable, it's magic. So I can double click it to go inside, and look, it's separate, but when it exports, it's one unit, so that's really handy. You've still got things, like I can play around with the Border Radius, that's my smurf house, come back out, and that's the thing that gets exported, so that's what Union does. I'm going to undo, actually, I'm going to copy it, undo it, until this goes away, because what I should have done, is made a few different copies, so there we go, this one, this one, 'Command D', 'Ctrl-D', and I'm going to paste my next one back in. 

So Subtract, let's just go through them real quick, so Subtract does that, whoever's on the top subtracts the bottom. So I drew this thing last, so it's on top, I can kind of see, there it is, Rectangle, where is it, Rectangle bottom, and the top of it. So that is on top of my rectangle, if I switch it around, if I say, you, rectangle, are on top, I'm going to use my square bracket, over by the P key, so I know it's on top of everything, and I select them both, the exact same thing, 'Subtract', get a different operation, so whoever's on top will slice out the one behind. Intersect, let's do that one,

'Intersect', it's kind of whatever's left over, where they overlap, that's why you got left, 'Exclude', this one's going to leave a big hole where they overlap, so you end up, they're kind of their opposites, Intersect, Exclude. 

All right, that's all very fancy, but you're like, "How does it work?" Just going to give you a bit more of a practical exercise, I thought this was clever, you might not. So you can keep adding to it, so let's add a 'Rectangle' tool, draw out, chimney, it's a different color, look what happens if I go to Union, you can actually, that's the default one, you just click the icon, whatever the top one is, it'll still smoosh down, but it'll use the top color. 

So Union, you can keep unioning things, let's move it across now. So Subtract, so what I'm going to do is, I'm going to grab my 'Rectangle' tool, I'm going to drag it out here for my door, and because I can go back to my Selection tool, and zoom in a little bit, so I can see my dots, I can go like this, and then, go to these two and use that exact same thing, Subtract, cool, huh, look how fancy I am. This one here, I want a house, this one, I want the house to be on fire, because I do. 

This exercise, it was kind of clever, so I've got an Ellipse, draw out an Ellipse, I'm going to have two of them, and I want to use this one here, the Intersect, it's a little bit hard to see them. So I'm going to go, how do I see Outline view, do you remember that, you remember, 'Command Y' on a Mac, 'Ctrl Y' on a PC, or you can use that other shortcut, the one shortcut throughout them all, 'Command /', just type "outline," there it is, 'Show Outlines'. 

What I'm looking for is the bit in between to look kind of like a flame, I'm looking for this bit, so I want to grab both of these, and go back out of Outline view and use that 'Intersect', this is my little flamey thing, look at that, it shouldn't just be coming out of here, I'm not sure why the whole thing had to be on fire. 

All right, the last one, like how could this get any cleverer? Well, we're going to need some windows, aren't we? So the O key for the Circle tool, hold down 'Shift', I'm going to have to, like terrible windows, I can't really see them, they're there, go to 'Outline' view again, oh, it's getting messy. Outline view is not that helpful this way. Why all these circles here? We'll deal with that in a second actually, let's finish doing all this cleverness. 

I'm going to select all of these, you could change the colors just to be good, but select them both and go up to here, and use the last one. Let's go 'Exclude', hey, we've got our house with holes in it, I can stick them all together, and I can say 'Union'. So now there is one little unit, that will get exported for our terrible house by the seaside, there's a nautical, that is on fire, great icon. 

Now the big thing, I kind of explained at the beginning, that they were still separate, but all of these are still separate as well, that's why if I move him just down over here and go to 'Outline' view, you can see, there's still lots of stuff in here, you might go, actually that, that door there, I'm going to actually come out of this, this door here needs to be different, the rounded corners are terrible, so you can go into it, I can say, where is it, the Exclude one? 

It's a little bit deep in here, but I can say, that rectangle there, has rounded corners of like 2 now, so it's not so weird. Here, they totally fixed it, but you can double click stuff, keep double clicking and go, oh, look at that, it's still excluded, still a hole in it, but it's all still editable, that's why these Boolean things are really cool, it's like the Pathfinder, if you are from Illustrator land, or maybe the Shape Builder, that's quite useful as well. 

 All right, that is going to be it for these ones, yeah, let's get on to the next video, it was good in my notes, flaming house icon, anyway, next video.