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 make a drop down using overlays in Figma

This lesson is exclusive to members

Course contents

Questions

1
2
0
2

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

Hi everyone. In this video we're gonna make this. Look at this. It's a dropdown menu. Ooh. And you can hover above stuff.

Ooh, fancy. You can go to different pages. A giant page too. It gets better. We're gonna have a second level. We can go to more options.

And look, there's a second level. Now, this particular method, there's a couple of ways  of making dropdown menus work in Figma. This is, this is probably the easiest way. We'll do another one in the next video  that's slightly harder, but a little bit more robust. You'd use this one to get started. Okay?

And it's really good if you've just got one or two menus. You want to add a bit of interactivity  to this particular method uses a bunch  of open overlays, okay? Where we just have a menu on the side  and we just open it in a position underneath the button. It's a nice, easy way to get it working. Alright, let's jump in and show you how it works. Alright, to get started, I've created a new design file, uh,  just to keep it separate from everything else  'cause it can get a little messy, confusing.

Uh, and I've created three frames. Uh, a page one and page two, I'm using a desktop view, okay? Mainly 'cause in this drop it,  like you said at the beginning, there's a hover action  and you can't do a hover on a mobile device,  but people wanna do it on desktop. So that's what we're gonna preview on  and we'll have our components here. Okay, let's make two buttons, okay? Uh, I'm gonna use the type tool, click once  for some reason using Giant,  for some reason I'm using giant text, okay?

Uh, I'm gonna make mine more appropriate. Escape Shift A make it, uh, auto out. I'm gonna give it a background color and some padding. You wait there, okay? There's nothing fancy about it. I'm gonna have two of them.

I'm gonna have my filter. And when you click it down, I'm gonna have menu item. This menu item, because they're gonna be lots  of different lengths, okay? What in at least bits of type. I'm gonna say I want it to be a fixed high and width. Okay?

And I want this one to be 180 by 48. And I'm gonna make sure it's kind of lined  to the center of my auto layout. Not important, actually, right in the middle. There we go. So two auto layouts. That is it.

We should make them both components  so we can easily update it later on. Okay? So create multiple components,  not a set, not anything else. Rename them both. Command R call this one button,  shift tab to go up to the next one. And you are gonna be called menu item.

Alright, so what I want to do is this filter. Okay? I wanna grab an instance of it actually this filter,  when it is clicked, I would like  to open up a bunch of these. So I'm gonna grab some instances of it, okay? And grab one, I'm gonna duplicate them out. Command, D, D, D, grab a few of them, select them all.

And what they need to be is they need to be in a frame. Remember when we did overlays, we click on the button  and say Open overlay. And it says which frame do you want? Okay? It doesn't say which group of  instances or which stack of them. We need to group them all together.

We need to bring them all together in a frame. So that's command option G to make it a frame,  skip out frame and name. Let's call it list one. The thing with overlays is,  let's go back to this button here. So this kind of, we used just,  we'll move him down outta the way we used him so  that we can update him. And he updates all of these items.

Okay? So that's what he's for. But let's forget about him. Sneak him down there. Okay,  what I wanna do now is say this button,  when you are clicked, let's go shift A to go  to prototype mode. Say interaction is going to be when it's clicked,  I would like it to open an overlay of which I can't see.

Why can't I see this one called, uh, list one. Okay. Overlays have to come from no man's land. They have to come from outside of another frame. So it can't be nested inside of it. Let's put it over here.

Now I can say I want the interaction on click. I want you to open an overlay of which one there he is. This one, where do I want it? Let's go manual. And then let's just move it around where we want it. I'm gonna have mine dropping out the bottom.

Put yours where you like and we're gonna have the  close when clicking outside. So when everybody just clicks around, it kind  of closes up the unofficial way to escape a menu. So let's see if that works. So I'm keeping my components over here. Let's drag out a version over here. Okay, on page one.

And I am, and I've got a flow going on this one,  if you don't, I'm gonna say you have a flow on this  page so I can preview it. Okay? And hopefully, ooh, right up there. Ah, for reset, huh? Anyway, uh, click on this. Hey look at this.

I get a menu. Click, click, click. That might be all you want. What if you wanna hover? What if you wanna connect it to a  page, let's do both of those. Uh, so what I wanna do, I'm gonna go  back to my main component.

As you know I'm not, I'm gonna go to this menu item here  and let's add the links. So I'm gonna say when menu item go to design mode,  I'm gonna have menu item one, tab down two, three. There you go. I've changed the names. Now I'm gonna go back to prototype mode. Say when this one is clicked, go  to page one when this one's clicked, go to page two.

I'm gonna make sure the filter is on both my pages. I'm gonna copy it and paste it so  that when I preview this I should R for refresh. Go filter page two. Filter page one. There we go. We've got a menu that works.

Okay, we want some hovers. 'cause hovers are what menus do normally. So that is why we've got this main component here. And this one here we can say I want a variant. Okay? And I want the second one in design mode to be a fill  of this uh, hue saturation brightness.

I'm gonna hit shift and hit down arrow  to go down my brightness, okay? Make it a different color and it's not gonna quite work  unless we add our prototype interactions. So switch to prototype mode to say when you are  what clicked no while hovering change  two, property, one, variant two. That's not quite what we want. And we'll use dissolve. Same thing here.

You go back that way it'll work. We've got some terrible naming, let's just prove it works. First, test, test, test. Okay, let's hover. Ooh, look at us. Awesome, well done us.

Let's name these variants properly. Uh, I have been using the design mode  and using this option over here a lot. What a lot of people do though is they'll double click over  here and say state equals hover. Tab. Tab. Uh,  state Equals default.

It depends like if you're more of a web developer,  you might do it that way. Or if you're like me, I end up doing it this way. Clicking on properties, gimme the state  name and then doing it this way. And then getting really OCD  and going default should be above hover. It makes no difference except  that's the order they are visually anyway. So now just double check.

We haven't broken anything. Nice. It still goes to the pages. Alright? And that my friends is the first level of dropdown menu. Now if you're like me and everything's working, you're like,  huh, how proud am I?

This next step, we'll probably break it. So what we're gonna do is go show version history. So have nothing selected to escape, escape,  escape this little chevron here  and say I want to show version history. Let's save one. Hit the little plus button  and we can add this one before I went  and broke it Just so that we can come back  to when it was working and give it another go. If we break it, why do I do that?

And I haven't done it before is  'cause you'll probably end up breaking it. It's tricky to do this next step. I'm gonna try and explain it nicely. Alright, so what we want  to do is basically do the same thing. We have this main component here when prototype mode,  when it is clicked, it has this menu dropping out. What we wanna do now is we want to do the same thing.

We wanna find this menu item, okay? Which is this little component down here  and when it's clicked have another option. Okay? I don't wanna do it to all of them. So what I'd like to do is down here, you know,  give ourselves some room is I want  to grab this first one command  or control D to duplicate it, okay, I want a third variant. So let's name them.

We've got hover default  and we're gonna have this one called state  equals state three. Nope. We'll call this one second level  and we'll change the name of it to make it clearer. We'll call this one more so  that you know you can kind of click on it. We'll put arrows on it as well in a bit. But you know that you can click on this  and you get another level of menu items.

Okay? So what we're gonna do is we'll duplicate this list. Okay? So that's our kind of like level one. Let's duplicate it. It ended up very far away.

Let's go over there. Okay,  it's automatically called it List two, which works for me. Let's rename these to make them a bit clearer. Alright, so we've got this list that's gonna appear. So over here we wanna say I'm prototype mode, not hover. We can do both of them.

We're going to say,  when I'm clicked, I would like to open a overlay  of list two. I can see it 'cause it's all the way at here. It's not nested in another frame. Where do I want it? Kind of over here to the side. Slightly different place than the last one.

Close. When clicking manual all looks good. Is it going to work? Not straight away. Let's have a look. Uh, filter.

You jumps to the pages. I can't see it here. Why can't I see it here? What I can do is on list one,  I need to switch out one of these for my more one. Okay? And because they're a variant, I should be able to go  through and say, actually let's just click on this one.

Go to design view and say Yes I want it to me. Menu item, which is this thing. It's like uh, component set down here  but not the default one, not the H one but the second level. Look at this. How we doing Inception? Man, this is weird.

Took me a few times to record this in any sort  of like non pulling my hair out, what's left of it. But let's give it a go. So filter is gonna activate this one  of the items in here and this one has some special  ingredients where it shows this other list Here,  let's give it a go reset filter more, click it. Look at us. We're doing stuff now of course we could go  through and when we click these,  go somewhere the moment they're not. But we learned that at the beginning.

Alright, how's yours going? If you need to kind of go back,  remember you can go into here, show version history. Go back to before I broke it. You can click on this one and say wait for a second, go  to there and say restore this version. It's not what I wanna do 'cause  mine's working, but there you go. Other things you might do to tidy it up.

I just moved it around and resize  this to make it look nicer. Um, the one thing is, is we can't have a hover on  this option here. 'cause at the moment if I prototype  and I say I want also a hover, okay,  let's make a duplicate of this. Let's change the color of it real quick, okay? And if I say shift E, you go there  When hovering change two, state four, I should name it. Okay?

Um, but also do the click. Can you see? You get this little warning to say you can't do both. You just kind of like hover above it. Okay? It says indirection cannot be triggered whilst  another one's triggered first.

So I can't make both of those work. I used to be able to, they used to just both work, okay? I used to be able to change the layer order here of these,  but I can't make it work anymore. You might try it and I might try and do both,  but for the moment if I try it, filter, hover, hover works  and I click on it, oh, they're both working again. Oh, if I close it down  and reopen it up, all right, it's working again. Ah, I'll leave that in the course.

'cause man it used to work  and then when I was preparing  for this video, I couldn't make it work. Did the exact same thing, I swear,  but then just couldn't make it work. So hey ho, it says it shouldn't but it's working now. There you go. You might have more problems, no problems. And the other thing I wanna do is I am gonna add a little  chevron there so that people know to click it, okay,  I'm gonna shift, click all of these  to say actually left align them.

'cause I wanna put the little Chevron in. So I'm gonna open up a plugin, okay? I'm gonna use Icon Scout. I like to toggle between all the  different icon plugins I use. I'm gonna use Arrow and I'm gonna click once  SVG insert. And mine's kind of randomly put there.

I wanna grab the outside frame of it. I'm gonna make sure it's uh, the size I needed to be. Actually let's get it to go right around  and actually that's a pretty good size, don't you think? Let's make it a component. Let's grab an instance of that component  and let's put it in with my uh, order layout. And depending on which way you want it, you might, instead  of having four arrows, you can just go  rotate this 90 degrees.

Whether you are dropping down or pushing out. I feel like over here it is dropping down,  but that way is pushing over. So on this one here, we just need  to make sure I'm gonna go centered. Maybe left aligned. Same with this one. Okay, this one's already centered.

The only thing with this is I  probably want it on the outside. It's all kind of squished in the middle. Even if I go center, remember that trick we can do  to push them to the outside to kind  of like space, the middle. So under here, under auto layout instead of packed,  we can go space between. That was the word I wanted. I'm gonna do the same thing.

I'm gonna grab you, copy it inside of this, grab the parent,  go here, say packed space between. You should do this at the beginning when you're creating it. I just didn't want to add too much confusion to this video. Let's go, let's reset it. Filter more. Look at us doing stuff.

Yes, not very pretty  buttons, but hey, they're working for us. Alright, that is gonna be it. That is one way of doing it. Remember this way, here's just really good. If you've got one  or two menus, you need to kind of just prototype. It's quicker, it's easier to understand than the next video.

But the next one's a little bit more robust. People can build more component sets  for a bigger design system. Yeah, let's go and do that now.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025