Up next in 10
How To Create A Dropdown Menu In Figma
2K views
Apr 18, 2024
"Master the art of user-friendly navigation with this tutorial on creating dropdown menus in Figma. Whether you're a UX/UI designer, developer, or enthusiast, implementing dropdown menus can enhance the accessibility and organization of your designs. Join us as we delve into Figma's powerful tools and demonstrate step-by-step how to design and prototype dropdown menus seamlessly. From creating the dropdown structure to styling and adding interactions, learn how to customize every aspect to fit your design needs. With practical tips and techniques, you'll gain the skills to create intuitive and engaging dropdown menus that enhance the user experience of your designs. Watch now and level up your Figma skills with dropdown menu design."
View Video Transcript
0:00
How to create a drop-down menu in Figma
0:02
Hi guys, welcome back to another video and in this video, I'm going to be telling you how you can create a drop-down menu in Figma
0:09
So having said that, let's just jump into the video. Now, first things first, what we're going to do is we're going to go ahead and select
0:14
and create a new option right here. I'm going to select the text tool and I'm going to just simply type in options or just option one
0:22
And then we will zoom in, but we'll press command or control 02
0:30
Make it 100%, as you can see 100%, so this is how it looks like. Now we just simply select the option and click Shift and A to create it as a frame
0:39
As you can see, option right here, frame. There we go. We have a layer as well
0:43
Now, since we've created this frame, we're going to go ahead and rename it to options
0:49
And we're also going to adjust some of the padding right here. And we're also going to change the fill as well
0:54
We just simply click over here. We're going to keep it white. Yeah, that looks nice
0:58
and now we'll just have to increase the padding a little bit or keep it at 20 for now
1:05
Yeah, there we go, 20. Looks nice. Now it is ready to be turned into a component, so we just simply select it
1:12
And we click on this button right here, create component. We can also press Control Alt-Clay to create it as a component
1:20
There we go. Now it's created, as you can see right here. And now we are going to create another one as well
1:26
Let me just select that. There we go. Now this one is going to be called hover, but for now we'll leave it at that
1:32
And we'll also create another one and this one is going to be called selected
1:37
And we'll change this one to hover. There we go. There we go
1:41
All right, now that we have our three options. Now what we're going to do is we're going to go ahead and start creating a option, right
1:49
So we're going to zoom in right here for now. Now what we're going to do is we're going to click over here, click on prototype
1:55
There we go. And now we're going to go ahead and start prototype. So to do that, we just simply select the option we want
2:00
and we click on this little plus icon, and we just simply connected
2:04
oops, sorry, there we go. We just simply hover it, and we just simply connect it here
2:09
and we're going to select a change to hover. There we go, that's already done
2:14
but the only thing we're going to change is on click. We select on click, and we select while hovering
2:21
Right, while hovering, change to hover, probably one, to hover, and the animation, we can choose
2:27
animation if you want it dissolved it's going to pop up like this it depends on you you can go
2:32
ahead and select smart animation that also looks pretty cool and we can also change the ms to 150
2:39
there we go that looks much smarter now also it's getting a little confusing so what i'll do is i'll go
2:46
ahead and differentiate these two options right here so this is the hover and this is the selected one right
2:52
so let's go ahead and maybe add a fill yeah maybe we could add a fill no
2:57
we don't need a fill. Sorry, we could add stroke. Yes, we could add a stroke
3:02
And that is going to show us that this is the selected one
3:06
And for this one, let's go ahead and add a fill. Yeah, we'll change the fill to gray
3:12
Yeah, that's good. So we have the main option, then we have the hover
3:17
and then we have the selected one. Now, let's go ahead and create an instance of this first one, right
3:24
I think we're ready to create an instant. So to create an instance, what we'll do is we'll select this option, press control, and then just simply move it right here
3:34
And then we'll duplicate this, one, two, three, four, and maybe five times, yeah
3:41
There we go. Just move this around so that we have equal amount of gaps in between
3:46
There we go. That looks okay, I think. There we go. Yeah
3:51
Now we're going to select all of these options, and then we're going to select Shift and A
3:56
to again create another option. And we're going to name this option list
4:02
Yeah. And now we just select it and turn it into a component as well
4:07
Now I know we could also do this as well Go to design and maybe select where is it
4:17
Increase the size like so and press enter. And with that, over here, we're going to change it to fill container that way
4:28
I don't know if you could see this, but the color is slightly off, but I can see it
4:34
The whites are now filled. So you don't have to worry about that that way
4:37
If you increase the size of it, the whole bar is going to be, you know, changed
4:43
The whole container is going to be filled. Next, what we can do is we let's go ahead and test it out
4:48
We're going to create a frame right here like so. And now we are going to go ahead and create an instance of that frame here like so
4:58
Sorry about that. The audio was ruined. I completed the whole video
5:03
And now I have to do that again. But, okay, so now we created the test frame, right
5:08
Now all we have to do is just simply select the frame and click on run
5:14
And over here, as you can see, it's going to open up in another tab, and we can see that it actually is working, so we are good to go
5:20
Now, next step, what we need to do is, let me go back over here
5:26
zoom in a little bit, there we go. For now, I'll remove the test frame, right
5:31
I'll get rid of this, and I'll put it right here at the bottom
5:34
because right now we do not need it, but we will use it again in a little bit
5:41
Next, what you could do is you could either go ahead and copy it from here, option one
5:45
or what you could do is create another frame, right, or maybe select the text option and say
5:52
select an option like so. And then convert it into a frame, a auto frame like so, increase the size of it
6:00
and also align it, center align it, or like this. for now we'll go ahead and say it like that like so and for this one we will add a stroke as well
6:11
and we'll also go ahead and oh sorry about that not the whole frame the text but the frame
6:19
we want to add a stroke to the frame like that and we'll increase the size of and we'll add like a
6:27
circle there we go yeah that looks nice rounded corners and also maybe lower
6:34
the opacity of this like maybe 50% or 40%. There we go, that looks much better, you know
6:41
Now that we have that, now what we'll do is we'll select the pen tool
6:45
And let me zoom in a little bit and we'll create a small V like that
6:51
I'll click on done. Like a small little arrow. It's actually not even
6:55
Let me just go ahead and do that. Maybe increase it. I think that looks good. Yeah. Yep
7:04
That is accurate. Now what we'll do is let me just increase the size of it a little bit
7:11
It's too much, there's too much with that. And now what we'll do is we'll go ahead and
7:17
select command s or control x and we select this layer and paste it here. There we go. Now we're
7:25
going to select this and we are not going to worry about it. We're going to do this and
7:31
And thus we're going to select this and also want to change, increase it to two like so
7:40
you know, just to give it a little bit more depth. And also we'll go ahead and select absolute position and go ahead and move it right here
7:50
And then we'll just simply select that. Okay, that's no problem. No worries
7:54
Let me just decrease the, I'll just decrease the size of it
7:58
There we go. But here we go, we have now a option
8:02
Now what we need to do is we need to add more options to it. So let's go ahead and do that
8:07
Before we do that, I also forgot we let's go ahead and add spaces between them
8:12
So that way when we go ahead and increase the size, as you can see, you know, that's nice
8:18
Now let go ahead and add some options So to do that we first turn this frame all right Turn this let me actually rename it to drop down menu We are going to change it to drop down like this and now we are going to turn it into a component like so
8:35
We are also going to add a variant of this component like here, and we're going to call it the default
8:43
And we're also going to call this one default as well. And as you can see, there is a conflict, but don't worry, because we are going to fit
8:49
that we are going to select the entire thing and add a property
8:54
We're going to create a variant and we're going to say options, visible options actually
8:59
like so, click on create property. Now what we'll do is we'll click over here
9:03
Visible options will say yes. And for this one, visible options will be no
9:08
There you go. Now if you select this, there is no conflict
9:12
Also for God, we need to also change the already existing property's name as well
9:18
we'll change it from property one to options or just option there we go now it's option default
9:26
option default there we go but the visible options are going to be now and yes now let's go ahead and
9:32
increase the size of this like so so to add these options now we just simply create a copy or duplicate
9:41
this right here and we press control x and we select this option and we click on control v
9:48
This happens right here, as you can see, this is not ideal. So what we'll do now is we'll go ahead and click on absolute position right here
9:57
We'll fix this. And now we just simply move it down right to the bottom where the lines intersect with each other like so
10:07
And there we go. Perfect. Like that. Now we just have make sure that the line is the borders of this is accurately with the
10:18
aligns with the borders of this option right here. So as you can see, it's one giant box
10:23
Now we also need to rotate this 180 so that it seems
10:28
so that it shows that when we click on it, menu is dropped
10:32
Now let's go ahead and increase the size of it like so
10:37
And now what we're going to do is we're going to copy or
10:42
we'll add a variant of it like so and move it outside here
10:48
and put it right here. And we're going to call this option
10:53
We're going to select this and we're going to say the option is going to be one
10:57
There we go. And of course it's going to stay no as well
11:01
And it's going to also say option one as well. Like so
11:05
We want to go ahead and duplicate as much as possible. We're going to create one, two, three, four, five
11:11
Five options the exact same way. Right? One, two, three, four. There we go
11:18
We all have five options. Now let's go ahead and align them and go ahead and fix them off
11:25
Select this and make it a little bit bigger. There we go
11:29
And option five is going to be here like so. Option one, let's go ahead and fix this
11:37
It's going to say option two, three, four, and five. And we're just simply going to go ahead and name them option one, two, three, and four as well
11:46
two, three, four, five. Now what we need to do is we need to duplicate them as well
11:55
Now we'll go ahead and select all of them. Duplicate all four, there we go
12:01
For these ones, the visible options will be changed to yes. There we go
12:07
And of course the arrows are going to be turned to 180
12:11
Now before we move any further, it's going to get a little complicated, but don't worry
12:15
Don't worry. What we're now going to do is we're going to select option one here
12:20
We are going to go ahead and select prototype. And we're going to select this little circle and connect option one to option one
12:27
Same thing option two to option two option three to option three option four to four and five to five is finally There we go So all the options are selected Let go back to design And now what we want to do is you want to copy this right
12:43
Copy this section. And we want to select these four and we want to paste yes
12:50
Now let's go ahead and unline them properly like so. And now we did this because these ones says option, visible options are going to be. Yes
12:59
So that's why we show visible options right here. Sorry that I messed up. You're not supposed to copy and paste them right now. I've missed a step. Sorry about that. It's because I've already done this and it was very difficult because I've already done this over here. That's why. As you can see, it's quite a lot of stuff to do. That's why I forgot that I messed a step. I missed a step. So what we need to do now is we're not going to copy this right here or we're not going to connect these right now. All right. So let me just go ahead and there we go
13:32
These are not copied or selected in two more. One more, there we go
13:37
Now it's not connected anymore. So what we need to do now is we need to copy this menu and we need to paste it right now
13:44
Otherwise if we did that, they would all be intertwined with each other. We wouldn't want that
13:49
Now what we need to do is we need to go ahead and start connecting these out
13:53
Now let's go ahead and connect these. So option one, again, option one, two, two, three, three, four
14:00
Next, what we need to do now that we've copied, we want to select option one, all right, and we want to change the property to select it like so
14:08
And the second one will select option two and change it to select it for this one, option three, you get the point
14:14
There we go, option five, now go. They're all selected. Now let's go ahead and connect them
14:19
Click on prototype. Now what we need to do is we want to select this option one to option right here, right
14:26
Here we go. We want to select visible option, yes. but we also want to close it back up
14:30
So we'll go ahead and select it like this. Visible options are off
14:34
Do this for everyone. Visible option on. But when you connect the bottom one to the top one
14:40
visible options off. For three for three, on, three with back to three
14:45
visible options off. Connect all of them together, visible options on and off
14:51
There we go. There we go. They're now connected. Okay, we are again, I messed up again
14:57
Sorry about that. But this is an easy fix. So these options that we copied, we really need to delete them
15:04
And now we need to have these connections available with everyone. So of course, we're going to copy it
15:11
And we want to go ahead and select these options. And we just want to paste them
15:16
There we go. This is how it looks like, guys. This looks exactly like the one that I created earlier
15:21
And that actually worked like so. As you can see. So since I created it and this is going to be another, we are going to delete this
15:28
because this is exactly the same as that one and if we run it it's going to cause interference
15:33
so we're going to delete all of this bye bye does not feel good to delete that but it's okay because
15:38
we already have a drop down menu available to us now what we need to do is we need to test it out
15:45
so to test it out what we'll do is let me just go ahead go to asset over here and since we already
15:50
have a test frame available we'll go ahead and move the drop down menu right here and we simply go ahead and paste
15:58
the drop down option right here into the test frame. We select the test frame and just simply click on run
16:04
Give it a couple of seconds because Figma is a little slow because I am recording right now
16:09
It takes a little bit of time. There we go. So now if we just simply hover our mouse, as you can see, it all works
16:15
So this is how it is. Next, what you can do is you can just simply go ahead and tidy it up a little bit
16:21
Maybe change up the colors, right? Change the boxes, shapes, you know, make it a little bit beautiful
16:26
but generally speaking this is it this is how you create a drop down menu in figma so that is it for
16:33
this video guys hope you guys enjoy this video if you did be sure did the like button subscribe to the
16:38
channel i turn out post notifications and if you have any questions let me know in the comments
16:42
sections down below and i'll be sure to answer them as soon as possible so having said that i will
16:46
catch you guys in the next video and until then take care and goodbye
#Action Figures