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!

How to use the pen tool to make image masks in Figma

This lesson is exclusive to members

Course contents

Questions

3

Course info

177 lessons / 16 hours 46 quiz questions 21 projects Certificate of achievement

Overview

Hi there, aspiring Figma enthusiasts! Are you ready to embark on an exhilarating journey with me, Dan Scott, as we unlock the full potential of our Figma skills in the dazzling realm of UX/UI Design using Figma Advanced?

Try Figma for free by clicking here.

This course is tailor-made for those who have already mastered the fundamental principles of UI/UX Design using Figma. If you've triumphed over my Figma Essentials course or have a sneaking suspicion that there's a treasure trove of unexplored tools, tips, workflows, and updates awaiting your discovery, then look no further! This course is your golden ticket to taking your UI/UX prowess to the next level.

Together, we'll start by delving into the depths of multilevel nested autolayouts, and unravel the secrets used by UX professionals by learning:
- Workflow techniques, managing design assets, styles, components, grid and column layouts like true virtuosos.
- Learn how to use Variables and put them to work creating even more complete prototypes.
- Use variables to make Light & Dark Modes + Compact & Comfortable spacing versions of your components. 
- You’ll then take your new knowledge of variables to understand and create your own Design Tokens. 
  • - Unleashing the magic of advanced animation techniques, captivating users with animated background gradients and Houdini Text.
  • - Harness the power of Lottie animation files, breathing life into your designs.
  • - Crafting responsive elements that effortlessly adapt to any device, proving your design prowess knows no bounds.
  • - Unleashing the full potential of powerful images & video masking techniques, amplifying the visual impact of your creations.
  • - Mastering advanced typography features, transforming words into captivating works of art.
  • - Embracing the realm of AI, infusing your process with its genius to elevate your skills as a UX designer.
  • - Elevate your prototyping game, conducting user tests with finesse using advanced techniques.
  • - Unveiling sticky scroll buttons that stack, animated anchor points and booleans, and a host of other captivating effects.
  • - Creating enchanting dropdown menus, hover grow effects for images, and expanding search bars.
  • - Discovering the right accessibility tools & techniques, ensuring inclusivity and usability for all users.
  • - Becoming a variant boss, expertly taming unwieldy variants to just 1 or 2.
  • - Unveiling the secrets of seamless collaboration with designers, developers, and stakeholders.
  • - Mastering the art of exporting production-ready assets, bringing your designs to life beyond the realm of Figma.
  • - Unearthing professional workflow tricks & shortcuts, saving you precious time and skyrocketing your efficiency.
  • - Plus much more exciting advanced Figma goodness along the way!

As you journey through this course, you'll acquire the skills wielded by UX professionals, gaining a profound understanding of the UX Design industry. From concept to a highly polished finish, you'll confidently manage your own UX projects ideal for your portfolio.

Throughout the course, I'll assign assignments and projects that nurture your skills and empower you to create your very own unique UX design masterpiece for your portfolio. Don’t worry if this all seems overwhelmingly advanced right now, because the BYOL crew stands ready to support and guide you, ensuring your questions get answered.

It's time to embrace the call to upgrade yourself and transcend from being a good UX Designer to a bona fide Figma UX Superhero! Unlock your potential, save the day, and let your design prowess soar!

Requirements:

- A copy of Figma (a free plan is available on the Figma website).
  • - Basic knowledge of Figma is required. I recommend watching my Figma Essentials course prior to embarking on this epic adventure.

Who this course is for:

  • - UX/UI adventurers who already have a basic understanding of Figma.
  • - Self-taught Figma enthusiasts yearning for structured guidance.
  • - Graduates of my Figma Essentials Course, hungry for more knowledge and skills.
  • - Visionaries who have developed their own unique Figma approach but crave exploration of the vast universe of tools, updates, and time-saving techniques.

What you'll learn:

  • - Diving deep into multi level nested autolayouts. 
  • - Robust components that are easy to update and hard to break. 
  • - Component properties. 
- Variables
- Design Tokens
- Advanced Prototyping using Variables
  • - Learn Workflow tips and tricks for managing your design assets, styles, components, grid and column layouts.
  • - Advanced animation techniques
  • - Animated Background gradients. 
  • - Houdini Text
  • - Animate along a path in Figma
  • - How to add Lottie animation files in Figma
  • - Build responsive elements ready for any device size.
  • - The best shortcuts & plugins to make you a more efficient UX designer.
  • - Absolute Positioning of Autolayouts. 
  • - Powerful images & video masking techniques. 
  • - Advanced typography features. 
  • - Learn to use AI in your process to make you a better UX designer. 
  • - Advanced prototyping techniques to level up your user tests. 
  • - Make prototypes better and faster using tricks & shortcuts. 
  • - Sticky scroll buttons that stack. 
  • - Video playback controls. 
  • - Animated anchor points and booleans.
  • - Create a Dropdown menu
  • - Create a hover grow effect for images.
  • - Create and expanding Search Bar 
  • - Learn the right accessibility tools & techniques  
  • - Become a variant boss. Cutting down those 100 variants to just 1 or 2. 
  • - Learn the best ways to work with other designers, developers and stakeholders. 
  • - Build a UX project from beginning to end ready for your portfolio.
  • - Export production ready assets.
  • - Learn professional workflow tricks & shortcuts.
  • - Forum support from me and the rest of the BYOL crew.
  • - All the techniques used by UX professionals
  • - 160 videos of detailed Figma Advanced Content.
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.

How to earn your certificate

Work your way towards your certificate for this course by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz (Merit level courses only)
  • Complete the Distinction Certificate Project (Distinction level courses only) - look out for the video marked with
  • Upload your Distinction project to the My Projects area in your account
  • Request your certificate when you've completed the requirements for the certificate level you're working towards

Good luck!

Pass certificates

We’re awarding ‘Pass’ level certificates for this course.

You can work your way towards your ‘Pass’ certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Don’t forget to request your certificate when all your projects are complete

Good luck!

Merit certificates

We’re awarding ‘Merit’ level certificates for this course.

You can work your way towards your ‘Merit’ certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz
  • Don’t forget to request your certificate when you have passed the quiz and completed all your projects

Good luck!

Distinction certificates

We're awarding 'Distinction' level certificates for this course.

You can work your way towards your 'Distinction' certificate by following these simple steps.

  • Watch the course videos
  • Complete the Class Projects - look out for the videos marked with
  • Upload your class projects into the My Projects area in your account
  • Complete and pass the Knowledge Quiz
  • Complete the Distinction Certificate Project - look out for the video marked with
  • Upload your Distinction project to the My Projects area in your account
  • Don't forget to request your certificate when you have passed the quiz and completed all your projects

Good luck!

Downloads & Exercise files

Transcript

Hi everyone, in this video we're going to make this mask here using the Pen tool... we're going to use it to create a Vector Mask... it's not really a Pen tool exercise, like how to use the Pen tool... it's a bit outside of the scope of this course... but for those of you who kind of know it already, aren't petrified of it... I'm going to show you how I go and make these masks...

the pros and cons, the dos and don'ts, all right, so let's jump in. Before we go too far in this video... the first chunk of this is just drawing this outline, around our coffee cup... with the Pen tool, so that we can turn it into a mask later on... that bit could be particularly boring for everyone... depending on your knowledge of the Pen tool...

whether you care enough about the Pen tool... but there is some good stuff in this video about doing masks inside of masks. There'll be a time code on the screen now... thank you to the editors, Jason and Tayla for making all the editing magic happen... and numbers appear, round of applause... so you can just jump to there, to the interesting bits...

if you would like to learn a little bit more about the Pen tool... and watch me do it, my technique... watch the whole video, otherwise jump to there... all right, into the video. So I've got an image that I've bought in from the Exercise Files... it's called Pen tool, it's in the Images folder, bring that in, it's really big...

just kind of pop mine up the top here, it doesn't really matter how big it is... remember, this is for people who already have Pen tool knowledge... it's kind of outside of the scope of Figma... we do cover it a bit more in drawing later on, so Pen tool, you're like... "Man, it's too hard," it's okay... you can just watch this because there's some interesting stuff that goes on...

but there'll be a lot of you out there with Pen tool knowledge... you'll either be a master of it, which will be a few... and everyone else, that's scared of the Pen tool, and use it if they have to. So I'll go through my process, but also some tips and tricks... for getting masks within masks, and stuff... so what are we going to do?

To do to make this easier I'm going to open up my Quick actions... so it's 'Command /', and just type in the word "snap"... and turn that off, that off, and that off... it just means, the Pen tool is going to try and snap to a bunch of stuff... and it makes it tricky to draw these kind of more natural shapes... so I turn all of mine off...

and try to remember to turn them back on later on, but you'll forget, that's okay. The other thing is that I don't need all of the frame, or the Chrome of Figma... so remember that shortcut earlier on... 'Command \' or 'Ctrl \', instead of forward slash... just cleans it up, you can still work it... and if you know your shortcuts, like P for the Pen tool...

you can just use a lot of your screen real estate for this... so what we'll do is, I'm going to... not try and explain the Pen tool... but I'm going to, as I go around, because I can't help myself... so click once for a corner... now down the bottom here what I like to do is...

I could click once and then try and do a curve there... a lot of people would try and do... nothing really wrong with that but I find everything flows better... when you get down here, click, hold, and drag... even though it's bendy I like to line it up, kind of straight-ish... and that means that when I click, hold, and drag over here for a curve...

everything just flows nicer when there's less anchor points. I'm using my space bar a lot, and I'm using my shortcut for the mouse... I'm holding 'Command' or 'Ctrl' on a PC, and using my scroll wheel... I find it a nice way to get around... but you can use '+' and '-' to zoom in and out if you like... over here, one equal distant over this side...

and when I drag it out, kind of the same as the other side... can you see, these kind of match now... you're like, "What about the big gap in the middle?"  There's lots of times we have to come back and fix things... because yeah, later on we'll come back and we'll sort that out like this... for the moment, just going to leave it, click, hold, and drag one up here... clicking once here...

if you get in the wrong spot don't sweat it... this one here is an interesting one, how do you tackle... it's a curve here and a corner there, what do you do? I click, hold, and drag... to get the kind of curvy bit... then I hold on my 'Option' key on a Mac, 'Alt' key on a PC, kind of snaps it...

and I drag it up here... where to drag it? So much experience comes with a Pen tool... it's hard to kind of know exactly, it's not up and to the left... it's, do it a million times and get better at it... hands up who's had problems with the Pen tool, who is still having problems...

who is a master of it, because they did Dan's Illustrator course, cross sell. So I'm going to go up here, click, hold, and drag up... even though I want it to be straight I want that curve there... kind of sticking out the top... then I probably want a really big wide one up here... so that it's curving up, but really flat...

and I want to kind of mimic this one over here, so I'm going to go... didn't quite work, it's all right... click once for this corner, because it's an inside corner... click, hold, and drag over here... and if you're far enough away like I am all your lines look good... I click once, what I'm looking for...

if nothing else, when you get to the end, can you see, the little icon changes... it's all joined up... now I switch to the Selection tool, which is the 'V' key... and I work my way around fixing it up... sometimes they're just not in the right position... and sometimes the handles that poke out of them are the wrong ones...

so again here, how much do I care about this? I should care a lot more... but this doesn't quite line up... but I don't... because it's just a really small little mask... that's going to be used quite small in my design...

would I jump out to Photoshop to do this, I totally would, I would jump up... where did you come from? If you've got a stray point that you don't want... what you can do is with the Selection tool you can click on it, hit 'Del'... but it got rid of that whole line, so what you can do is, use the Pen tool... hold down the 'Option' key, 'Alt' key on PC, see the minus, '-'...

kind of leaves the line there but gets rid of... that anchor point that we didn't want... so back to the Selection tool... do I have any handles to work with? I do not... hey, you're back...

minus you, Selection tool... that keeps coming back, all right... go away... 'Esc'... he's back, why you keep coming back, man? Gone, you watched me get rid of it, and now it's back...

is that a handle? It's not... I'm going to have to open and close Figma... yeah, 'Pen' tool, hold down 'Alt' or 'Option', you've gone... hit 'Esc' to come out of it... hit 'Esc' a couple of times come out of it, double click it, and it's back, man...

is it me or is it Figma? I'm going to close Figma down and open it back up, you wait there. All right, we're back, let's see what we got... double click it to get inside of it, got a point that I don't want... 'Pen' tool, hold down 'Alt' or 'Option', gone... and it's back, all right.

undoing it, getting rid of that way, 'Pen' tool... and then drag that one out, and then drag that one out to connect them up. Why was that bad? I have no idea, that normally doesn't happen... we're going to ignore that from now on... if it happens to you, there you go, sometimes it happens...

that's looking good... down here, all looking good... let's get this one to be balanced... and the trick with good nice curves like this... is that this should be kind of the same on this side, similar... you can see, they're not perfect but the same kind of lengths...

hitting the same sort of direction, gives me the... kind of a nice consistent curve. Now we're at the jump bit... now for those of you who stayed around and watched the whole thing... we're here, of course, we're here... for those who jumped along and scrubbed back and forth in the timeline...

and eventually found it... you're here, welcome, we missed you. So we've got a vector, it can be drawn by you or somebody else... the trick with it is, a couple of tricks, actually... is that the stroke around the outside, yours is probably black... is not important, it's the Fill, if I try and--  actually, let's hit 'Done', or hit 'Esc'...

so there's my vector, it has a Stroke, if I put it at the back... like we did before, select them both, make a mask... it's making a mask, it's just making a really thin tiny one... the coffee cup is in there somewhere, but not that useful... so I'm going to undo, I'm going to undo so my Stroke's on the front... or move my coffee cup to the back...

select the Stroke, I'm going to get rid of the Stroke, add a Fill... and it's the Fill, no matter what color it is... is what's going to give the mask its kind of muskiness... so I'm going to send it to the back, I'm using my square brackets... using the first of the square brackets, to send it to the back... select both of these...

make mask, look at us, we made a mask... let's stick it in a circle, 'O' key on your keyboard... hold down the 'Option Shift' key on a Mac, 'Alt Shift' key on PC... to kind of drag a perfect circle from the center... get it kind of, so it's peeking out the top, send it to the back... give it a color, I'm going to use my 'Local Primary Color'...

get it kind of positioned there nicely, and I'm going to add a Drop Shadow... for no reason other than it looks cool. So I'm adding it to the coffee cup... and what I'm going to do is... I want this kind of big wafty one, so I'm going to go '50'... actually, that's not wafty enough, 100...

and if you blur it, like 200 you get this kind of like... I don't know, I quite like it... can you see what I mean by the blur there... blur off, on, off, on... anyway that is a way of using the Pen tool to do masks in Figma... there's nothing wrong with it, it works really good, with nice crisp edges...

it just took a lot longer. So many people still use the Pen tool technique... instead of some of those Photoshop tricks... it's totally fine, just takes longer. The thing you will run into problems with is... think I got one in my junk drawer...

where is it, junk drawer, there it is, there... junk drawer is where I keep the stuff that you don't see, is like my test stuff... can you see, masking this would be easy... and then it would be easy till about here, and then... who knows how easy that would be... then you really need something like Photoshop...

anything that's out of focus, kind of blends in with the background... got light overlapping it, makes it tricky with the Pen tool... but product stuff like this is super easy... here, terrible with the Pen tool, great in Photoshop. That is it, that is how to use the Pen tool in Figma to do a Vector Mask... the big thing to remember is that...

the Fill needs to be in your mask for it to work properly, otherwise it doesn't work... all right, that is it, I will see you in the next video. You thought it was over, I'm back, I've come from the future... I was doing some other work for a different project... and I forgot to turn my Snap back on... so just when you finish doing the Pen tool, at least in this exercise...

remember, your quick actions, 'Command /' or 'Ctrl /'... and go "Snap", then go, you back 'on'... 'open' it up again, "snap"... you back 'on', and do all three of those... all right, there you go, now you can carry on.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025