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 handle files in Figma and become a File Handling Master

This lesson is exclusive to members

Course contents

Questions

14

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.

Downloads & Exercise files

Transcript

Good morning everyone, it's a new day... and today we're going to start with some advanced workflow tricks... in particular this video is all about file handling... seems boring but it's one of those shortcuts that... will over the course of your workday, save you loads of time... and I'm going to use them throughout the course, I'll introduce them all here...

so they're in nice little groups, that we know what we're doing... and I'll try and do them all the way through the course... so that, you, like me, become... a file handling Figma shortcut master... all right, let's get started. The first one's easy, just make sure, in Figma, you've got a couple of tabs open...

even if they're just untitled documents, that's fine... and hit 'Command' on a Mac, 'Ctrl' on a PC... and just hit '1', '2', '3', '4'... so 1 gets you back to home base and 2, 3, 4... just means you can toggle between two different apps, copying and pasting... if you're like me you end up with like all the tabs full.

It works mostly in a browser as well, so the same shortcut... I'm in Chrome, 'Command', or 'Ctrl' on a PC, '1', '2', '3'... except, 1 doesn't go back to home base... it'll go to whatever tab that is... and like Chrome, you can have multiple tabs... if I go out to 5 there, that is just a regular old website...

so it's not specifically for Figma, just all the tabs... it's 'Command' on a Mac, 'Ctrl' on a PC, '1', easy. All right, next file mastery is, you can actually pin these ones here... so this is the main one that I'm working with, Event App 1... so instead of being all through everything you can right click it, and say... actually, just 'Pin Tab', please...

becomes a nice small version, you can have all the other junk over here... knowing that that's your good one... you can also re-shuffle these. So say, untitled is the one you're actually working on... so you want to move it over here, just click and drag it... same in a browser, right click it, pin it, drag it around, easy.

Side note, I do it all the time in Chrome... I have some documents that I always reference all the time... so my, like junk drawer of to-do lists... all the different emails that I have to check... and my calendar, just always open, then gives me space to do my other stuff... like Figma, and searching the internet, all right, now the next one.

All right, next one is these little dots up here have all your recent files... they can be handy rather than going back to this, then being in the community... and needing to go to the right place, just go there, all your recent files... though, if you're like me this can also get unusable... because you've got loads of untitleds, Dan. To make it work, hover above anything you use all the time...

and see this little star here... you can add to favorites, can you see them appearing over here? So the things you're working on all the time... and the things you want to leave behind, and be junk... or get swallowed up by the flow... these ones here are going to be in my Favorites file...

remember, on the desktop version you've got the little Home one, which is what... how do you get to it quickly? That's right, 'Command 1', or 'Ctrl 1'... on the browser version, I can still go to Command 1... but it just goes to the first tab... and all of my files are kind of hidden in the F there...

see, same, all the favorites are ready to go. Next one is, if you are working on really big files... or you're working with a really old crappy laptop... there's this one here, 'View', there's one one called 'Resource Use'... and it'll tell you how many layers you have, it'll tell you... how much kind of like Gigabytes it's using...

basically, your 2 Gigabytes to use in this file in Figma... and if you get close to the end of that, you can kind of see... if things start running slugging, check it out, see if you're at nearly maximum. The other thing that can happen as well... is that things can be stressful on the application... and it'll show you in this last bar here...

look, if I paste a big document or paste a big file... can you see, it kind of went up there, I'll get rid of it... you see, it's doing stuff... sometimes that can get maxed out as well, depending on what you're doing... often it can be a plug-in that is just poorly... or just really system demanding...

you might find that, why is it all broken? Have that open, and you can see, all right, it's trying to do something... is it super helpful? Kinda is, kinda not... if it does start maxing out though what you can do is... like big images like this are just too big for Figma...

and if you have hundreds of them you can just, you can run out of resources... so you need to make them smaller... not just scale them down, they need to be smaller before they come in... and if that's not appropriate just have multiple documents for one file. If your app or website is getting massive in the design... you might have to actually have two separate files...

and kind of divide them up so it's not trying to process everything. The other thing that might happen is... you might be using somebody else's library... so let's go to our 'Assets', let's look at our 'Libraries'... if we've--- I'll turn on one of our libraries... and it will potentially...

our one's only really small, so it's not doing much... but you can have somebody else's library on, that has thousands... it might be a community one that somebody's made... this gigantic thing, that seemed really good... but that's what's slowing your machine down... it might be that you have to pick out the stuff you need...

or make your own kind of like version of the library just to tidy it up... it can be also just, if somebody's made components and variables... and they haven't made them very smartly... they're just like copies, and copies, and copies, and copies, and copies... and you're trying to use those either through a library... or just copy and pasting them in.

I'm going to show you in this course how to tidy those up and make them nice... but you might be working with somebody else's file, just keep an eye on this... you can get rid of it, click it once, double click it, actually... again, this one is in desktop and browser... and the same 2 Gigabyte limit is kind of in both of them... it's kind of a browser thing...

and essentially that's what this desktop version of Figma is... it's just that browser loading without all the Chrome bits. Another one, small one, look at this, you can resize this, did you know that? I didn't know that for a long time, it's really handy... especially when you get into really long naming... you can just go, huh, that's better...

and alternatively you can make it smaller, why is it handy? I thought it was handy when I discovered it... Alright, next tip, actually the last tip... quick actions, we've done this before... it is 'Command /', or 'Ctrl /', the leaning forward slash... and you can type in anything...

like there's so many shortcuts in this course, to learn, in Figma, you're like... "What was that thing, the resource use thing he was talking about?," look at that. "Res", and I can go, all right, let's turn that on... so they have actually made another shortcut for it... for like international keyboards, it's 'Shift P'... it's not Shift P, it's Command P...

and it'll come up again, you can type in "resource", there's that one again... and it works for any shortcut. So what I might do is switch to Command P... just so, myself, I get better at using command P... because Command /, I always, does anybody end up doing that? Command \, or Ctrl \ is, turn the UI on and off...

which is a good tip, there you go... but I do that all the time and then hit this one... because that's the one I actually want... let's use command P, or Ctrl P, two shortcuts to do the same thing. You will notice that happening more and more in Figma... because they went with just, like a USA QWERTY keyboard at the beginning...

and now they're trying to make shortcuts... that are a little bit more universal to different languages keyboards... so you'll find, like, why is there two?, because there's two... all right, that's my file handling wizardry... on to the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025