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!

What are some advanced drawing tips and tricks in figma

This lesson is exclusive to members

Course contents

Questions

1
0

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

Hey everyone, hey, this video is all about... my kind of advanced drawing tips and tricks, and techniques... just to help you when you are building things, making things, drawing things... they're all kind of small stuff, didn't really deserve a video on their own... so they get all smooshed into this video, loads of good stuff, let's jump in. My first and favorite one is, when I'm bringing in a bunch of stuff...

so I'm going to import everything from Icons 2... bring it in, go 'Place All'... and they just end up being all on top of each other, you're like, "Huh."  I can't use the Tidy Up option, what do I do? If only there was a way to unpack all of these... you can, use your quick actions and type the word "pack"... and you can go vertically or horizontally...

and it just kind of like unsmooshes them, cool, huh... there's obviously vertical and horizontal there... depending on which way you need to go... obviously you know about smart selection and tidy up... we can just drag these to replace them, and the gaps in between... to adjust the sizing.

Next fun useful tip is that when you bring in logos, and they're all weird sizes... I've just used a plugin called Vector Logos, let's bring one in... and you'll notice that, I don't know, you... come through in all different sizes... I'm going to select them all, and the way I kind of beat them into order... is I make sure that the little locking icon is on, Mixed is '100'...

so they're all just 100 pixels now, width, they're all an appropriate size... now this is where a few shortcuts are useful, the Align ones... so they are relatively easy to remember... so hold down the 'Option' key on a Mac, 'Alt' key on a PC... and if you look at your keyboard, this is for English keyboards... can you see, A, S, D, F, and W, they're all on the left hand side...

if you're an old gamer you'll know that these keys got used a lot... for like moving up, down, left, and right... so that works for the alignment. So if I hold down my 'Option' key on my Mac, 'Alt' key on a PC... and if I hit 'W', it's up... it aligns everything to the top, can you see them there...

if I go 'Option S', which is down, it aligns everything at the bottom... if I go... 'undo', 'undo', and if I go 'Option A', it does everything on the right... 'undo' that, 'Option D', is that useful? Kind of, mainly the left and up, A and W. The other two handy ones are, that same key, and there's V and H...

so vertical, horizontal... so you can align them along vertically, along the middle, which is handy... and horizontally that way... there is probably a Distribute Centers shortcut but it's too complicated for me... so mine is 'Command Option V', not too bad... why do I never remember that one?

I don't know, I'll add it to the shortcut sheet. Now for a weird little shortcut is that, let's say that you do spend some time... getting your logos kind of in some sort of order... maybe they don't line up perfectly and you kind of do some sort of... like, interesting, you know, when the weights are... the logos don't quite balance technically right in the middle...

so you do some sort of movement... and you want to align this to something, either the top or the right... if I select these, I'm inside this frame... if I want to right align it to this it's not going to work... what I can do is, watch this, if I hold down my 'Shift' key and I hover above... can you see, shift on, shift off...

basically what it'll do is it'll put it in a temporary group... because what it have to do is group it, then... right align it to select to the side and then ungroup it... and that works but you can temporarily group something... so you hold down the 'Shift' key and it does... basically, that groups it, lets you align it...

it doesn't mess with any of my stuff so without it on just goes, smoosh... but if I hold down 'Shift' key, click on that... it aligns it in this, like temporary group, and I let go, no longer in a group. It obviously works for any of these... puts a temporary group around it and then starts aligning it... let's get this to align vertically...

and horizontally, there you go... all, without having to do a group. Next drawing tricks that I use, I'm going to use the O tool to draw a circle... hold 'Shift', drag it out, I use this quite often, 'Shift X'... basically, what it does is it toggles the Fill with the Stroke... whatever the Fill was, is now the Stroke...

let's make this a little bit more obvious because maybe we'll add a Stroke... it's great when you're designing icons... and you kind of either put it into the wrong one... or you just want to invert it to see what it looks like. So now I've got a couple of more interesting colors... any color, as long as it's a green...

so with it selected, 'Shift X', just toggles between the two, cool, huh... if you've got something that you want to remove the Fill of... it's 'Command /', to get rid of it... you can remove the Stroke by going 'Shift /'... so you, 'Option /', or 'Alt /', this one, 'Shift /'... Stroke gone, or the Fill gone...

or 'Command X', toggles them, cool, huh. While we're talking about Strokes, a little thing that not everyone knows... got a Frame, I'm going to add a Stroke to it... I'm going to 'Shift', move up one to jump 8... and did you know, this little option here, Strokes per side... you can decide, I just want something on the top...

or you can go into here, or you can go into there, go to 'Custom' and say... I just want it on maybe the top and the bottom, 90, a bit much... there you go, Strokes per side of a frame or a rectangle... weird shortcut is, let's say these logos here, they're the same width... but this one's occupying more kind of like visual real estate for me... if you just use your, hold 'Command' key down on your keyboard...

'Ctrl' key on a PC, and use your up and down arrow... it will scale it, it's not like you got to go, up 2, left 2... so it'll go, it'll scale it up a bit and left a lot... if, you hold 'Shift' as well, so hold down 'Command Shift' on a Mac... 'Ctrl Shift' on a PC, up 1, up 2, left two, you can scale things, weird, huh. Another tip is Outline mode, let's say that we make this one white...

it's hard to see, so show outlines, 'Shift O'... will actually just show you like an X-ray version of your documents  you can actually see all the details, man, the forward logo is complicated... but all of these, you can start to see, even though it's kind of white on white... that can be really handy when you're trying to align things up... if you're old school Illustrator, 'Command Y'... is the shortcut from Illustrator, that works as well...

'Shift O', I think, works for a little bit more keyboards around the world... and it's Mac and PC... whereas 'Command Y', or 'Ctrl Y' on a PC... sometimes there's two shortcuts to do the same thing. For a little bit more detail, let's go to this one here and let's hide it... so 'Command Shift H' to hide...

or 'Ctrl Shift H' to hide, will just turn the eyeball off... what you can do is, I can't select it, or see it  and if I go to Outline mode, 'Shift O', I can't see it either... what you can do is, you can actually turn that on, you can go to Figma... you can go to 'View', there's one in here called 'Outlines', where is it? Outlines, those actually include hidden layers... there you go, so I can actually see this one even though it is hidden...

and I can actually select it in Outline mode... sometimes that's useful, sometimes it's not... but now you know it can be turned on and off, 'Shift O' to get it back on. One last thing is, we know this from earlier, is the spacebar key... whenever you're like drawing with these, let's go 'Shift X'... and you want to get it close to a frame, and it jumps out...

who remembers what the shortcut is, just a little reminder... that's right, if you hold space bar, and you want to get something close... or get it to the edge, like this... hold space bar while you're dragging it... so drag it, drag it, drag it, hold spacebar, it means it'll get... it won't escape the frame that it's in, it's great for these, like, I don't know...

large circles that you need on the edge of the page, there you go. Those are my tips and tricks for drawing in Figma... little roundup for you, how good is pack? So good... all right, that is it, I'll see you in the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025