Figma Dropdown Menu with Variants | Figma Prototype Tutorial
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 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! - วิทยาศาสตร์และเทคโนโลยี
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.
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 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 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.
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 😭
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.
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
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 :)
This is one of the most easy to understand Figma tutorial video. Hands up, you got one new subscriber.
Glad it was helpful! Thanks!
This was an excellent video! Thank you so much for moving so slowly and methodically.
This is the best Figma video I've seen.
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
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.
Awesome! built my first drop down in figma because of you!
This is life-changing
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.
Great tutorial, just what I was looking for!
Love you angela, you're always doing good stuff
Thank you so much!
This tutorial is so helpful! Thanks so much for sharing.
Thanks Angela! This is a smart workaround for the Interactive Components which is still in beta right now.
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
This has been super helpful! Thank you for sharing :)
AMAZING tutorial! just amazing!
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.
Your explanations are very clear, thanks
Great stuff, I love all your videos! 🙌
Glad you like them!
Most useful Figma prototyping video ever! Can't wait for Figma to let us switch to varients in prototyping though
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
This was soooooo helpful. Thanks a lot!
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!
I agree that would be a great addition to the prototype features
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 :)
This was sooooo helpful! As a Figma newb, this was so easy to understand and follow.
Glad it was helpful!
Awesome! Thank you for this!
Beautiful !
Thanks a lot!!!!! it was the most hellfull video about dropdown menu i have everseen
Great work. Nice easy to understand tutorials!
Glad it was helpful!
Great tutorial, thanks for the help.
Great tutorial, very clearly.
Great detailed tutorial indeed😊
Thanks for this awesome tutorial.
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.
Thanks so much for this!
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...
Thank you so much for the great and quick tutorial, it helped so much!!!
Glad it helped!
Thank u so much for this video !
Excellent tutorial, thank you very much.
Excellent tutorial 🙏
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 job describing this.
Great Tutorial, thank you!
super helpful and to the point
Thank you so much for this tutorial
Nicely explained and very useful
Impress work. good Job :)
Thank you professor😭❤❤❤
Excellent tutorial, subscribed!
Thanks! Glad it helped!
Great tutorial! Thank you so much!
Glad it was helpful!
so helpful!! thnkuuu
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!
Thanks Angela for this good video instruction
Great. Thank you 🙆🏻♀️
Thank You!
Thanks for the video! It helped me a lot
Glad to hear that!
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
Thanks for this tutorial!
Glad it was helpful!
Gracias, fue de gran ayuda! :*
Wow it's great tutorial.
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.
Thank you! this was helpful!
Glad it was helpful!
Great great great great thank you!
Thanks, I was really struggling with that.
Glad it helped!
Thanks for a great tutorial. I have a question - How do I use the select item in the dropdown menu to now navigate to another screen, or show an overlay? I've tried variables but cannot get it to work.
Thank you!!!
Love it 💕💕
Thank you!
thank you!!!
Thanks , this was very helpful
Glad it helped!
Thank you a lottttt
Thank You.
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?
This video is clear
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?
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
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 TH-cam page? 😉
😊 very helpfull video
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
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!
Thanks! Great video. One quick note, it is possible to define interactions between component variants within the original component so you don't need to make the extra frames.
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 :)
Thank you, you are the best !!! ;)
Glad it was helpful!
Thank you
Thanks for this tutorial and super cute voice 😀
excellent
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?