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 the advanced Layer shortcuts in Figma

This lesson is exclusive to members

Course contents

Questions

1
1
1
1
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.

Downloads & Exercise files

Transcript

Hey everyone, hey, welcome to the Advanced Layer video... don't skip it, even though it sounds boring, it is super useful... when you are daily using Figma... I personally be waiting for this video in this course because... I don't know, we've been doing it the long way... there's been a lot of this, double click, double click, double click...

to get inside the stuff... there are shortcuts, and they're awesome, so let's get into them. So the first one is, let's say I want to change the text in this... we can click to the Parent frame, double click it to get inside... double click it to get in there again, I'm inside the button... just going down this layer stack by double clicking...

you can eventually get there, and we've finally, okay... I still can't click on it because I'm in Prototype mode... and that little dot was in the way... but eventually I can get there and change the text to something else... but there is way better shortcut... so if you just select the parent that you want...

to kind of go into, and then just hit 'Enter'... and Enter just ends up diving down inside of stuff, super good... to come back out of that kind of like layer stack, is your backslash, '\'  so look at your keyboard, it's the one that's slanting backward... you can kind of go up and down this list... so 'Enter', 'Enter', 'Enter', can you see it going down over here in the layers... and then '\', '\', '\', comes out to that parent.

If I do want to get to this text here... or at least select everything inside of it... I can just click it once, hit 'Enter', and I'm inside my snack bar... I'm going to delete it, or change it... this is a good way of diving in and out of things. Let's do one more, let's do our button over here, 'Shift 2'...

with it selected just hit 'Enter'... and look, I can actually change the text without actually having to... click it and highlight it at all... I just pushed 'Enter' a couple of times... there you go. To get out of it, you know, the backslash backs you out of it...

if you've hit Enter too many times, I don't use that much, I hit 'Esc'... Esc means, let's get out of here... 'Esc' again, kind of gets back to not selecting anything... so generally, just click on the thing you want, hit 'Enter'... 'Enter', a couple of times, until the text is selected... and then we can go back to, I can't remember what this is called...

then smash 'Esc' a couple of times. Next one I want to show you, is you can actually just leap all the way in... so instead of going, you, and using the--  because this one's quite complicated, right? Great for a button, hitting 'Enter', you just go down the layers... you can actually just jump to it... by holding the 'Command' key on a Mac, 'Ctrl' key on a PC...

I got nothing selected, watch this, just click it... oh, we're in, it dove through quite a complicated card... can you see, it's quite deep, deep, deep... and I'm inside of there, and I can work on this, and break it... so just 'Command' click things to go... straight to the background, click on that...

hold down 'Command', click on this, you don't have to do... all the double clicking we've done in the course so far, happy days. The next one is choosing siblings, so I'm going to select this... 'Shift 2' to zoom in... and I'm going to hit 'Enter' to get inside... and it's selected everything in here, maybe that's not what I want...

what happens is, if I hit 'Tab' on my keyboard, can you see... it tabs along, what's called the siblings... so the parent is the wrapper on the outside... things inside of it are the children of it... but these children have siblings... because the siblings are just like one level deep...

these, that is the parent to this, and it has no siblings... because there's nothing else in there on that same level... but at this level there's the parent, these kids here have a big old family... you can just tab around, can you see... I can tab to the next one, to the next one... that can be handy, I don't use it very often...

you might be dealing with a lot more lists... my problem is, is that it kind of falls apart a little bit... like, let's go inside of this... let's tab, that one worked perfectly. So that's a good way of using it, just tabbing through the different variants... to select them...

and where is-- let's find another one, that might be broken... 'Shift 1', I reckon this one is... 'Shift 2', I reckon it is, because I've already practiced... if I'm here and want to tab down to the next one, look what happens... how do I go up, and I tab again, and I'm at the bottom... and I'm going all over the place...

basically what it does is... it doesn't look at your visual order on your Artboard  it looks at the layer order over here... so can you see, let's move it over so we can--  I have to zoom in so far, so this one's at the bottom... even though it's on the top over here, and this Event card is underneath there... that one is there, so kind of gets a little bit sometimes tricky... when the layer order is not right.

I can rearrange them and that will then work... and I probably want to do that for when I kind of get this ready... for maybe my library to share with other people... or if you want to you can go super nerdy, and go 'Shift Tab'... so it's going the wrong way... can you see it now, so Tab is going backwards...

hold 'Shift Tab' to go the other way... "Is that useful, Dan?"  Some people love the keyboard shortcuts, I do love keyboard shortcuts... some people will just want to click on them, and that's fine too... again, if you are inside of these things, Tab gets you out, the ejector seat. The last thing about siblings, and it kind of ties in with the first point as well... is let's say I just want to delete everything off this...

sometimes you're like, I don't delete the whole frame... I want to select everything in it... and you end up doing these weird selections... what you can do, click the parent frame, hit 'Enter'... and it just selects all the siblings inside of it... and hit 'Del', you can just clean things out quite easily that way...

'Esc' to get out. The next one here is, we've done this before... but I want to kind of include it in this video... there's a nice little wrap up of everything... is we do want to change the order of these... you can use your square brackets, next to the P key on your keyboard...

to move things up and down, so there's two ways of doing it... just holding nothing down and using the square brackets... either open or closed, can you see my Layers panel there... just goes all the way to the top, all the way to the bottom... if you do want to just move it up one or two... in between its siblings, hold 'Command' and do it...

can you see, it goes up one at a time... so now I can say, you're at the top, 'Tab' to the next one... pick this one at the bottom here, so I need to move it up one... so I'm going to hold 'Command', or 'Ctrl' on PC... and just, yeah, you want to be there, right? Perfect, nope, you want to be one down...

so now 'Shift Tab', I've got this one at the top... this next one there, you get the idea what I'm doing there? I'm just moving them around... so they're the same visual order as they are in the panels there... but I know some keyboards out there don't have those square brackets... so what you can do is...

'Command /', or 'Ctrl /' and just type in keyword shortcuts... and then have a little look at 'Arrange' to see what is set for your keyboard... they're trying really hard to get everybody's keyboards kind of aligned... hopefully, there's something in there for you there. Why are some of those blue? Some of them are blue because...

I've used them before, some of them, I don't use... or at least, I haven't used in this course so far... because I kind of reset my version when I start these courses, there you go. Another good layers shortcut is right clicking... so let's say this is somebody else's work, it's quite complicated... there's lots of levels and frames, and auto layouts...

I want to get the action text, or at least just see what's underneath here... I can right click, and I can say 'Select Layer'... can you see, it's showing me... both the parent, in this case, grandparent, parent, the thing that I right clicked... and then, in there, the snack bar action, then there's an auto layout... and then there's the text that I want...

you can supercharge that one by actually just holding down... the 'Command' key on a Mac, 'Ctrl' key on a PC, and just right clicking... and then it goes straight to this, cool, huh... same thing, just kind of goes directly to this layer list... and you can say, actually, I want this bit, copy it... and then paste it to do other things with.

So that is the mastering the layers in Figma... I'll add the shortcuts to the shortcut sheet... remember, that's in the Exercise Files... and I'll try and include them in the rest of this course... or you can ignore them and be the... guy or girl who just keeps clicking into infinity...

and eventually, you will click things, that is totally fine too... all right, that is it, I will see you in the next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025