Note: If you have a different UI than in the course, you can change it back by clicking the '?' in the bottom right corner of Figma and select 'Go back to previous UI'. Happy Figma'ing!

Figma UI UX Design Essentials

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

This lesson is exclusive to members

Course contents
SECTION: 1
Getting Started 30:36
SECTION: 2
Wireframing - Low Fidelity 11:03
SECTION: 3
Type, Color & Icon Introduction 1:12:34
SECTION: 4
Pages 8:32
SECTION: 5
Prototyping - Level 1 30:08
SECTION: 6
Animation Level 1 10:46
SECTION: 7
Commenting 14:09
SECTION: 8
Moodboard - High Fidelity 13:40
SECTION: 9
Columns 13:54
SECTION: 10
Tips & Tricks 7:21
SECTION: 11
Colors 34:48
SECTION: 12
Text & Fonts Advanced 47:48
SECTION: 13
Drawing 35:41
SECTION: 14
Working with Illustrator 4:16
SECTION: 15
Images 17:55
SECTION: 16
Working with Photoshop 11:58
SECTION: 17
Autolayout & Constraints 52:08
SECTION: 18
Effects 15:30
SECTION: 19
Saving & History 5:42
SECTION: 20
Components & Instances 36:15
SECTION: 21
Variants 23:04
SECTION: 22
Making a form 34:05
SECTION: 23
Prototyping - Level 2 43:01
SECTION: 24
Teams & Projects 5:19
SECTION: 25
Libraries 11:03
SECTION: 26
Animation & Micro Interactions 1:05:40
SECTION: 27
Thumbnail update 4:10
SECTION: 28
Exporting 34:21
SECTION: 29
What next 15:53

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

114 lessons / 12 hours 29 quiz questions 22 projects Certificate of achievement

Overview

Hi there - my name is Dan Scott & welcome to Figma Essentials.

Together - you and me - are going to learn everything you need to get started working as a UX Designer using Figma.

You can try Figma for free by clicking here.

We’ll use this UI UX design tool to create beautiful User Interfaces and engaging prototypes. Most importantly... we'll cover the client expectations of you as a new UX designer. 

This course is aimed at people new to design, new to User Experience design. Even if you’re not totally sure what UX really means, don’t worry. We’ll start right at the beginning and work our way through step by step. 

First we’ll describe the brief & how to work with a UX persona.  

Then you’ll learn how to create simple wireframes.  

From there we’ll look at how to implement colours & images properly in your designs.

You’ll learn the do’s & don’ts around choosing fonts for web & mobile apps. 

You’ll learn how to create your own icons, buttons & other UI components. 

You’ll learn some pretty scary terms such as Components, Constraints & Multi Dimensional Variants. They are all really easy to understand once you know how. 

We’ll also make our lives easier by using free UI kits & plugins for Figma which will speed up our workflow dramatically!

We’ll build a simple Style Guide ready for client handoff. 

You’ll understand how to make both simple & advanced micro interactions, page transitions & animations 

Before the end of this course you will have made fully interactive prototypes 

You will take a project all the way through -  collaborating with other team members and exporting the right files ready to hand off to your developer or software engineer. 

We’ll be focusing on the software Figma but I’ll make sure to explain the techniques & terms used in the UX and how real world projects are run. You will develop a great understanding of the industry and will be able to manage your own UX projects.

I will be setting assignments through the course which will help develop your skills and enable you to create something special and unique for your own portfolio. 

Alright - it's time to upgrade yourself & go from Figma Zero to Figma Hero.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

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.

Downloads & Exercise files

Download Exercise Files

Transcript

 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.

Bring Your Own Laptop
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024