Figma Dropdown Menu with Variants | Figma Prototype Tutorial
HTML-код
- Опубликовано: 31 май 2024
- Figma Components: • Figma Components Tutorial
New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
In this video I go over how to create a dropdown menu using Figma variants. I show you how to create variants and then link them up to add interactivity to your prototype. I also go over how to customize the properties of a variant to keep your components organized.
Enjoying this tutorial? Subscribe to stay up to date with my latest content: / @angeladesign737
In this video I show you:
0:00 - Intro
0:16 - Figma Design
1:16 - Dropdown UI Design
1:38 - Create Component
2:13 - Variants
2:57 - Modifying Properties of a Variant
4:38 - Adding Variants
6:39 - Prototyping with Variants
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/angeladelise
Blog: / angeladelise
--
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week! 
Наука
I can't believe this feature was right here all this time. I feel like crying right now. Thank you lady.
I am unable to do this 😭
Great Tutorial, thank you! One quick add: At "3:05" - what you did here on the left sidebar, can also be edited on the right sidebar. Therefore you have to select the component frame (not the variant). after that you can edit the property names in the variants panel on the right - just type the wished name in the field where it says "property 1" - you are now able to edit this. Feels a bit more natural and less "cody" to me :). Hope it helps anyone who was looking for that.
This was so great explained!
I tried to put my head around variants and couldn't figure it out how to use it because some people animate and use them in a way different way and worse imo.
Thank god I found this channel!
This video is really helpful to the UI beginners❤️ You illustrate clearly and professionally. I'm so glad to find your channel while I'm confused doing the variants in Figma.
Great video, thanks for sharing. For anyone watching this, there is an easier way to create the variants: you can make each of the menu version a component first, select all of them and then in the right hand sidebar select "Combine as Variant". That way, you don't have to change the variant values, they will be taken directly from the component names.
Also, naming in the Variants panel is far easier and cleaner than changing names in the Layers panel
Thank you!
thank you.
This is awesome! I’m learning Figma and was seriously struggling with creating this for a project. So glad I found this!
one of the clearest figma tutorials i've seen yet - thank you so much for posting, i'm making my first prototype rn and this really helped!
Help me too bro I m unable to do it 😭
This was an excellent video! Thank you so much for moving so slowly and methodically.
It had the most useful information to start working with the interactive components in a short amount of time that is possible, thank you, Angela.
That was unbelievable useful and you made it super easy to understand, thanks!
This has been an excellent tutorial, Thank you and appreciate your work here :)
I thought this is not what I was looking for, but it is! Many thanks.
I am trying a double function fixed chat list with complete closure, and when it opens, it has a "show less" or "show more" function. And with your tutorial, I think I am on the right way. And it is divided into two; private and group chats but fundamentals I got it. 🌞 😊
THanks
This is one of the most easy to understand Figma tutorial video. Hands up, you got one new subscriber.
Glad it was helpful! Thanks!
Thanks Angela! This is a smart workaround for the Interactive Components which is still in beta right now.
Great tutorial, just what I was looking for!
Thank you! Much more efficient way than how I was going about things. I concur it would be great if they add a way to prototype with variants more directly.
This tutorial is so helpful! Thanks so much for sharing.
AMAZING tutorial! just amazing!
This is one of the most easy-to-understand Figma tutorial videos. Hands up, you got one new subscriber. (2)
It is good to know! Tks, watching now! Lol
Same
Fantastic video, thank you! It's basically a workaround as Figma isn't fit for this purpose. The Axure out-of-box droplist component has this already built in, plus you can prototype a destination for each droplist item.
This has been super helpful! Thank you for sharing :)
Good video! Suggestion: Instead of doing "Hover" as a property you should do it as a Value to the State property, because hover, down, etc. are HTML component states. So you could have Open property with values True and False, and State value with Default, Hover, Down, Disabled, etc. It will make it so much easier for a developer to understand too.
This is the best Figma video I've seen.
Great tutorial. You got a new subscriber. You explain really well.
I've few questions: Why didn't you add Prototype in component it. Also if you're showing a dropdown function then it would be really nice if you could show what happen when you select an item from dropdown list.
I agree that would be a great addition to the prototype features
Your explanations are very clear, thanks
Awesome! built my first drop down in figma because of you!
Love you angela, you're always doing good stuff
Thank you so much!
this design is so sleek... I would love to sneak peek into your figma design process. Not necessary a full tutorial but some comments about approach (inspirations, workflow, advices, etc) would be great.
thats exactly what she just did...
This was soooooo helpful. Thanks a lot!
Great work. Nice easy to understand tutorials!
Glad it was helpful!
This was the first video about how to create a combo box that i understood, great job!
It worked perfectly on figma
Unfortunately the Anima plugin wont understood the multiple overlays, so it wont work on their prototype
thx for the great tutorial.
additional you can, if you got a property with only two states, like "open" and "closed" give it the name "open" and name both properties "true" (for open state) and "false" (for the closed state). Figma will then make a switch instead of a dropdown menu and changing the states/properties is even more convenient :)
Great stuff, I love all your videos! 🙌
Glad you like them!
Great detailed tutorial indeed😊
Thanks for this awesome tutorial.
Hey Girl, you saved my life today. I really needed to know how to do this and your video had everything I needed. Thank you and God
bless you.
Glad it was helpful!
This was sooooo helpful! As a Figma newb, this was so easy to understand and follow.
Glad it was helpful!
Nicely explained and very useful
Thanks a lot!!!!! it was the most hellfull video about dropdown menu i have everseen
Great tutorial, very clearly.
This is life-changing
Hi Angela! One question - isn´t it better to link the component variants directly after you created them instead of creating extra frames? As far as I know (but please correct me if mistaken) it is possible to link variants in Prototype state without the need of extra steps. Thanks!
Great tutorial, thanks for the help.
Thank u so much for this video !
Most useful Figma prototyping video ever! Can't wait for Figma to let us switch to varients in prototyping though
Awesome! Thank you for this!
Excellent tutorial, thank you very much.
Great Tutorial, thank you!
Thanks so much for this!
Thank you so much for the great and quick tutorial, it helped so much!!!
Glad it helped!
Excellent tutorial 🙏
Excellent tutorial, subscribed!
Thanks! Glad it helped!
Angela is a great teacher. This video is well-paced and structured. This might be the first tutorial I've ever watched in its entirety at a normal playback speed :)
That's great to hear! Thanks for the comment Rachel
Thank you so much for this tutorial
super helpful and to the point
Great job describing this.
Beautiful !
Great one!
This is going to 1 million sub channel atleast. Just wait and watch..
Amazing voice... Clear and sticks in mind.
Thank you so much!
Great tutorial! Thank you so much!
Glad it was helpful!
Hey Angela, hope you are ding well. I am facing an issue with this. On clicking present for the screen in which I used the drop down feature, the dropdown is displaying on the centre of the page rather than right below the button. Please help me with this. Thanks
Impress work. good Job :)
Thank you very much Angela. Your tutorials have really helped me a lot. But I want to ask, what is the perfect width size a web page that can open perfectly on laptop and desktop.
Thanks once again.
Thanks Angela for this good video instruction
Question, how do I make it so that I am able to click one option in the drop-down and it takes me to another page.Since the component is closed, i tried by placing the component on a frame, right click->change variant->visible options on yes (so I see the drop down)->dragged the prototype from the drop down to another page->then set visible options on no, but unfortunately it doesn't work that way, please a little help?
Thank you!
I typically work with Axure and feel a bit overwhelmed at the complexity of making a simple dropdown in Figma. I'm glad to see there's a kind of a way to do it, but I would want to go a few steps further and be able to also select an option and see dynamic changes in both the dropdown and elsewhere on the page depending on what was selected. Seems like it could be time-consuming and most definitely not rapid prototyping :(
Axure is still way better at this than Figma - I'm a little bummed Axure has seemed to lost out on this market share.
@@ashleyspixelsI think the main reason why Axure has lost market share is that it is clunky and difficult to get started to. It's definitely a powerful tool, but compared to Figma which anyone can get started on in the matter of minutes, Axure has lost its main user once they get lost in trying to do something as simple as changing the text color.
Thank you professor😭❤❤❤
Great. Thank you 🙆🏻♀️
Great Video! Thank you so much for sharing it! Is it possible after selecting the option to change the value of the closed menu? Thank you
hi angela! i did it! i can make a submenus by following your instructions...however, i got a problem.....when i converted the figma info a real webpage, the submenus is not exact under the menu like it should be. also in my figma file, i have to put my submenu slightly un-aligned with the un-hover menu in a way to get them aligned in the Figma's preview page. can u tell, where is my mistake? thx
Is there a way to create multiple dropdown menus without starting from scratch? As in would I be able to switch up the text if i needed a menu for sizing and then one for color?
Yo so June 30th 2021 update - you don't need to create separate frames in the last step - you can just duplicate the different variants you need and connect them without creating separate frames for each one. I find this useful because frames are always rectangles and I didn't want one of my nav items to the right of the dropdown menu covered up. Just fyi in case anyone else was having the same problem!
Yrr mere se ho nhi rha btaado !!
Thanks for this tutorial!
Glad it was helpful!
Hi, how can I make clickable an option to scroll down one part of another frame? I can create this scroll effect only when my dropdown frame is visible and inside of the frame, If I do what you are doing on the video it doesn't allow me to click and scroll down to an specific place
so helpful!! thnkuuu
Thank you! this was helpful!
Glad it was helpful!
Thanks, I was really struggling with that.
Glad it helped!
Wow it's great tutorial.
Thanks for the video! It helped me a lot
Glad to hear that!
Thanks , this was very helpful
Glad it helped!
Can we add a drop down below a drop down? I see that the first dropdown is overlapping on the second one. Is there anything that can be done in figma?
Great great great great thank you!
This is Amazing tutorial. Thank you so much. If you can add - When user selects any other option (e.g. Selects Large than medium) That would be helpful. Cheers :)
Is the "change to" under variants the new swap you're taking about?
Thank You!
Thanks for the video! It helped me a lot, but is it possible to do it with a dropdown in a navigation bar, without having to copy all the dropdown states in every page?
When I copy the First dropdown menu tô the component It disappear. Why would this happen?
Awesome tutorial! Are you the voice behind Figma's tutorials on their RUclips page? 😉
Is there any way to address the issue with dozens of possible component states? What if I want to change style of all of them, should I do it by hand? It would be nice if Figma had some tool allowing to change all states in one single place.
Thank you!!!
Gracias, fue de gran ayuda! :*
thank you!!!
Thanks for this tutorial and super cute voice 😀
Great video! What techniques do you use to choose colors for an application? You could make a video dedicated to that topic. It will help a lot haha. All of your designs are amazing!
Great topic suggestion, thank you!
I have a little problem. my dropdown menu opens in the center of the frame. how to set its coordinates?
😊 very helpfull video
8:51 is important that Overlay says MANUAL position otherwise it will appear in other places, 45 minutes dealing with this problem smh Thank you for the video
Great tip, you just saved my sanity!
YOU are a godsend, thank you
Thank You.
great tutorial.
but to me this is frustrating I need to do a flow that contains more than 80 fields between dropdowns and inputs.
figma is great except for these cases
that's true. something Adobe XD is good with