Figma Dropdown Menu with Variants | Figma Prototype Tutorial

Подписаться 46 тыс.

Просмотров 354 тыс.

50% 1

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!

Наука

Опубликовано:

3 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 237

@IBRAHIMSSEKABEMBE 3 года назад

I can't believe this feature was right here all this time. I feel like crying right now. Thank you lady.

@shivangishukla3312 2 года назад

I am unable to do this 😭

@MoritzKrog 2 года назад

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.

@andtothewestamerica 2 года назад

Also, naming in the Variants panel is far easier and cleaner than changing names in the Layers panel

@larissagallifontana4293 2 года назад

Thank you!

@zananay 2 года назад

thank you.

@klagebeat 3 года назад

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.

@2SaltyRecipes 2 года назад

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!

@0402Amy 3 года назад

This is awesome! I’m learning Figma and was seriously struggling with creating this for a project. So glad I found this!

@BurningThroughTime 3 года назад

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!

@shivangishukla3312 2 года назад

Help me too bro I m unable to do it 😭

@euniceliu2091 2 года назад

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.

@amir_2mi 2 года назад

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.

@Omarmangin 2 года назад

That was unbelievable useful and you made it super easy to understand, thanks!

@raywindow123 2 года назад

This has been an excellent tutorial, Thank you and appreciate your work here :)

@Niruvanism 3 года назад

This is one of the most easy to understand Figma tutorial video. Hands up, you got one new subscriber.

@angeladesign737 3 года назад

Glad it was helpful! Thanks!

@tspaziovirtuale3615 3 года назад

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

@nishakatti361 Год назад

This was an excellent video! Thank you so much for moving so slowly and methodically.

@russella90 3 года назад

This is the best Figma video I've seen.

@joseiniguez2313 2 года назад

Great tutorial, just what I was looking for!

@skinnysmitty123 2 года назад

Awesome! built my first drop down in figma because of you!

@johnwca 2 года назад

AMAZING tutorial! just amazing!

@ikayesdesigner 3 года назад

This is one of the most easy-to-understand Figma tutorial videos. Hands up, you got one new subscriber. (2)

@karismoffat1968 3 года назад

It is good to know! Tks, watching now! Lol

@SAMRI 2 года назад

Same

@omuniz1 2 года назад

This tutorial is so helpful! Thanks so much for sharing.

@Ptc417 2 года назад

This has been super helpful! Thank you for sharing :)

@mkkm120 3 года назад

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.

@xTheBlackCatxd 2 года назад

Thanks Angela! This is a smart workaround for the Interactive Components which is still in beta right now.

@alfonsoabril290 3 года назад

Your explanations are very clear, thanks

@mooretto 2 года назад

I agree that would be a great addition to the prototype features

@lamiwilliams 3 года назад

This was soooooo helpful. Thanks a lot!

@Karthikbrow 2 года назад

Great one!

@leslieleslie336 2 года назад

Beautiful !

@boya2monkae 2 года назад

Thanks so much for this!

@strugglingElds 3 года назад

Love you angela, you're always doing good stuff

@angeladesign737 3 года назад

Thank you so much!

@ronaldjavier7611 2 года назад

Great detailed tutorial indeed😊

@AlexRemo Год назад

Nicely explained and very useful

@pragtinarang2957 3 года назад

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.

@angeladesign737 3 года назад

Glad it was helpful!

@user-uh9st1xz9r Год назад

Thank you professor😭❤❤❤

@vincentho6212 3 года назад

Great tutorial, very clearly.

@user-uo3ch4vz8z 2 года назад

Thanks a lot!!!!! it was the most hellfull video about dropdown menu i have everseen

@pascal2290 3 года назад

Great stuff, I love all your videos! 🙌

@angeladesign737 3 года назад

Glad you like them!

@aprilvang5236 3 года назад

This was sooooo helpful! As a Figma newb, this was so easy to understand and follow.

@angeladesign737 3 года назад

Glad it was helpful!

@sarinkay1078 2 года назад

Thanks for this awesome tutorial.

@amandanajem9739 3 года назад

Awesome! Thank you for this!

@dguy687 2 года назад

Great job describing this.

@katarzynamrowczynska6510 2 года назад

This is life-changing

@anirouDS Год назад

Thank u so much for this video !

@kettenbach 3 года назад

Excellent tutorial 🙏

@sparkplug964 3 года назад

Great tutorial, thanks for the help.

@qasimraza2744 Год назад

Impress work. good Job :)

@ChrisGiantsFan 3 года назад

Great work. Nice easy to understand tutorials!

@angeladesign737 3 года назад

Glad it was helpful!

@amberspencer544 2 года назад

super helpful and to the point

@FernandoLins 2 года назад

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.

@matheuscampos5190 3 года назад

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

@OzbegimMarketing 2 года назад

Great Tutorial, thank you!

@Rachel-xd6tk 3 года назад

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 :)

@angeladesign737 3 года назад

That's great to hear! Thanks for the comment Rachel

@jenna_t214 2 года назад

Excellent tutorial, thank you very much.

@lydia1256 2 года назад

Thank you so much for this tutorial

@julian42x 3 года назад

Most useful Figma prototyping video ever! Can't wait for Figma to let us switch to varients in prototyping though

@SS-ec6gt Год назад

so helpful!! thnkuuu

@yevheniiatrofimova3646 3 года назад

Thank you so much for the great and quick tutorial, it helped so much!!!

@angeladesign737 3 года назад

Glad it helped!

@GraveRave 3 года назад

Excellent tutorial, subscribed!

@angeladesign737 3 года назад

Thanks! Glad it helped!

@mateuszb4387 3 года назад

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.

@captnphilip 3 года назад

thats exactly what she just did...

@dadashlorgar 3 года назад

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 :)

@uiuxlearner1769 2 года назад

Wow it's great tutorial.

@pavliny 3 года назад

Great tutorial! Thank you so much!

@angeladesign737 3 года назад

Glad it was helpful!

@agungkrisnawijaya9565 3 года назад

Thanks for this tutorial!

@angeladesign737 3 года назад

Glad it was helpful!

@stevanusdewangga7453 Год назад

Great great great great thank you!

@deepakvishwakarma2043 3 года назад

This is going to 1 million sub channel atleast. Just wait and watch.. Amazing voice... Clear and sticks in mind.

@angeladesign737 3 года назад

Thank you so much!

@Macedvisioned 3 года назад

Thanks Angela for this good video instruction

@fionanguyen7308 2 года назад

Great. Thank you 🙆🏻‍♀️

@lisaadams2600 2 месяца назад

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.

@tobechukwuedimeh Год назад

Thank You!

@vikrammahto5010 2 года назад

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.

@shirleyjoseph5395 3 года назад

Thank you! this was helpful!

@angeladesign737 3 года назад

Glad it was helpful!

@mubashirjamali 3 года назад

Thanks, I was really struggling with that.

@angeladesign737 3 года назад

Glad it helped!

@user-py9cy9pb8m Год назад

This video is clear

@alvin_lal 3 года назад

Thanks , this was very helpful

@angeladesign737 3 года назад

Glad it helped!

@vidhiaseri6194 3 года назад

😊 very helpfull video

@bahruzseyfullah 2 года назад

Thank you!!!

@nataliasoares6236 3 года назад

Thanks for the video! It helped me a lot

@angeladesign737 3 года назад

Glad to hear that!

@zl5217 2 года назад

thank you!!!

@praneethBillana Год назад

Thank You.

@babyzoe93 3 года назад

Thank you a lottttt

@dannadayannarojastriana4579 2 года назад

Gracias, fue de gran ayuda! :*

@ericnjanga3245 3 года назад

Bravo, braaaaaavo lady!

@denysivashchenko2080 3 года назад

Thank you, you are the best !!! ;)

@angeladesign737 3 года назад

Glad it was helpful!

@Donly101 3 года назад

You helped me, ty

@angeladesign737 3 года назад

Glad it helped!

@poncardas 3 года назад

Thanks for this tutorial and super cute voice 😀

@sepehrui Год назад

Thank you

@DrEstigio 3 года назад

cheers from Argentina! YOU SAVE ME! ahahhaha thx!

@angeladesign737 3 года назад

Glad it helped!

@quacquac_quacquac 3 года назад

Love it 💕💕

@angeladesign737 3 года назад

Thank you!

@marzbitenhaussen 2 года назад

excellent

@Phoca_Vitulina 3 года назад

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!

@shivangishukla3312 2 года назад

Yrr mere se ho nhi rha btaado !!

@user-yr1is1yl8m 11 месяцев назад

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 :)

@michellel1383 3 года назад

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 :(

@ashleyspixels 2 года назад

Axure is still way better at this than Figma - I'm a little bummed Axure has seemed to lost out on this market share.

@MCasterAnd 2 года назад

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

@isabelledavid5110 3 года назад

wow, thanks!!!

@angeladesign737 3 года назад

Glad it helped!

@tomasnones 2 года назад

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.

@luismorales6351 3 года назад

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

@alystdesign 2 года назад

that's true. something Adobe XD is good with

@cynthiacalixtro8923 2 года назад

Muchas gracias

@RealRyanDeLuca 2 года назад

Great tutorial, but wow, so much work and complexity just to make a dropdown. Keep refining, Figma.

@parangparangpangpangpum2055 Год назад

tthanks

@zofiahajkova3961 2 года назад

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!

@marcosadriano05 3 года назад

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!

@angeladesign737 3 года назад

Great topic suggestion, thank you!