Figma Dropdown Menu with Variants | Figma Prototype Tutorial

Поділитися
Вставка
  • Опубліковано 2 жов 2024

КОМЕНТАРІ • 237

  • @J0hnR4nd0m
    @J0hnR4nd0m 2 роки тому +48

    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.

  • @luismorales6351
    @luismorales6351 3 роки тому +22

    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
      @alystdesign 3 роки тому

      that's true. something Adobe XD is good with

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

  • @mateuszb4387
    @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
      @captnphilip 3 роки тому

      thats exactly what she just did...

  • @IBRAHIMSSEKABEMBE
    @IBRAHIMSSEKABEMBE 3 роки тому +24

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

  • @vikrammahto5010
    @vikrammahto5010 2 роки тому +11

    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.

  • @xXVenezuelaXx
    @xXVenezuelaXx 3 роки тому +5

    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

    • @lukemyers665
      @lukemyers665 3 роки тому +1

      Great tip, you just saved my sanity!

    • @Cremulox
      @Cremulox 2 роки тому

      YOU are a godsend, thank you

  • @remusb
    @remusb 3 роки тому +6

    I thought this will cover the interactive components feature. Make sure to join the beta, they should accept you right away.

    • @angeladesign737
      @angeladesign737  3 роки тому

      Great tip, thanks!

    • @EPSTomcat11
      @EPSTomcat11 3 роки тому

      Interactive components feature? That sounds very promising. How to apply for the beta?

  • @fesa2696
    @fesa2696 3 роки тому +2

    When I copy the First dropdown menu tô the component It disappear. Why would this happen?

  • @michellel1383
    @michellel1383 3 роки тому +13

    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
      @ashleyspixels 2 роки тому +3

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

  • @ikayesdesigner
    @ikayesdesigner 3 роки тому +11

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

    • @karismoffat1968
      @karismoffat1968 3 роки тому

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

    • @SAMRI
      @SAMRI 2 роки тому

      Same

  • @varshajade
    @varshajade 2 роки тому +1

    Nice, but too time consuming, also probably should have shown what happens after you make a selection. Thanks.

  • @anaarmando2491
    @anaarmando2491 Рік тому

    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

  • @Dragiboom
    @Dragiboom 2 роки тому +1

    Why you just don't put a componet with hover animation in each section of the menu ? will automaticly make this hover animation without using so much frames

  • @DyanBermeo
    @DyanBermeo 3 роки тому +2

    How come i have 3 properties ? You didnt explain that you put all your elements onto Frames in the beggining of the videoo. When i copt and paste the things into the variants it doesnt show up.

    • @ashlynpieri6096
      @ashlynpieri6096 3 роки тому

      This would be great, I am having the same problem

  • @klagebeat
    @klagebeat 3 роки тому +10

    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.

  • @AlexRemo
    @AlexRemo Рік тому

    Nicely explained and very useful

  • @Phoca_Vitulina
    @Phoca_Vitulina 3 роки тому +7

    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!

  • @vince2nd
    @vince2nd 3 роки тому +1

    States didnt make sense to me.
    And the frames near the end of the video almost undid everything.. meaning it almost didnt make sense to create a variant in the first place.
    That being said Figma has come a long way and its kinda cool using variants

  • @FernandoLins
    @FernandoLins 2 роки тому +4

    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.

  • @Pixie2678
    @Pixie2678 3 роки тому

    Angela the most charming tutor on the internet.

  • @Macedvisioned
    @Macedvisioned 3 роки тому

    Thanks Angela for this good video instruction

  • @afiahali7891
    @afiahali7891 2 роки тому +1

    Thank you for the tutorial. I am currently stuck at the copy pasting the element to the component at 3:59 where the elements under the medium is not visible. Can you assist?

    • @qjay56
      @qjay56 2 роки тому

      When you copy and paste you have to use the Paste to Replace option.

  • @XXXXalexandre
    @XXXXalexandre 3 роки тому +1

    Make this dropdown available for download

  • @jonstevens3500
    @jonstevens3500 2 роки тому +1

    Hi, thanks so much for the tutorial Angela! it all works but when I preview and click on the dropdown it appears in the middle of my design..any reason why this would happen?

    • @Cremulox
      @Cremulox 2 роки тому

      Yep mine is slightly off center and driving me crazy

  • @CRiStiCole
    @CRiStiCole Рік тому

    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!

  • @Tamurakafka
    @Tamurakafka 3 роки тому +1

    6:40 can't swap instances because this action doesn't show up in my menu???

    • @chorazin2811
      @chorazin2811 2 роки тому

      You need to have an instance of the component, I feel to make that more obvious she should have deleted the original dropdown and dragged an instance from the assets menu(right next to layer) onto the canvas and then moved it into position.

  • @marcsill453
    @marcsill453 2 роки тому

    I've been doing this tutorial literally step-by-step and it's simply not working for me. When I try to replace the content of the second Variant (that is automatically created when you change the component to a Variant), with the content of the "Dropdown/Open/None" once pasted ... it blows up.
    All the elements pasted into the variant are then stacked (overlapping each other) and strung out to the right.
    I can NOT keep this from happening and I have NO IDEA what is making it do this.
    If anyone has any solution to this, please let me know. Thanx!!

  • @lisaadams2600
    @lisaadams2600 5 місяців тому

    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.

  • @APerson-lk3ys
    @APerson-lk3ys 3 роки тому

    Axure does this out of the box, can create the same thing in minutes. To do this for any menu in Figma is excruciating and will take you 100x as long unfortunately. And it took forever for this tiny simulated interaction - and the menu still shows "medium"... ugh... In axure or framer you'd have an entire selected menu state with all hover states + you could use it as a conditional to change the images... something that would take a week to do in Figma for all variations of states + you could have a medium + blue + accessories = compiled image with all variations. Axure = 10-20 minutes, Figma= 4-10 days even with its new interactive components beta... at least Figma is far better than invision, but I wouldn't want to call anyone an interaction designer who is using Figma...

  • @bernhardcr7665
    @bernhardcr7665 Рік тому

    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

  • @wouterkirstein1629
    @wouterkirstein1629 Рік тому

    I don't understand why Figma would make it so difficult... just switch back to Axure already! :)

  • @stevemalone6062
    @stevemalone6062 2 роки тому

    Was doing fine until around 4:11 Just would not paste into the duplicate dropdown even after I reran the video about a dozen times. I need to try again with something else.
    I've noticed on several of Angela's videos that she does something and I'm like "Whoa, what happened there???"
    Are there any other Figma variant tutorials here that anyone would recommend?

  • @hugodasilva9050
    @hugodasilva9050 3 роки тому

    but we can't export prototyping from figma into html and css code, why is this useful? I mean, we can't use the app directly on figma, it needs to be hosted before as a website 😐...

  • @navvyavishal3977
    @navvyavishal3977 Рік тому

    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

  • @vicariouscato9555
    @vicariouscato9555 3 роки тому +1

    Hey what if we wanted a dropdown and then choose when it drops down so the label shpws that you've chosen Medium, Large etc????

    • @angeladesign737
      @angeladesign737  3 роки тому +1

      You can add click events to the rows and add frames for the closed state with the other options selected. I'll expand on this tutorial when their Interactive Components feature becomes available.

  • @belsnickel5538
    @belsnickel5538 3 місяці тому

    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.

  • @dw9822
    @dw9822 2 роки тому

    ok so I followed it through, but I noticed, if a person clicks on say large, they will not be able to see the larger size as the overlay is closed. Only medium.

  • @Sirwebbsiv
    @Sirwebbsiv 2 роки тому

    Surely there must be a way to create components/variants with the dropdown you already created? Rather than doubling the work?

  • @zofiahajkova3961
    @zofiahajkova3961 2 роки тому +1

    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!

  • @androthebot
    @androthebot Рік тому

    This is way too complex for a drop down menu. Figma is not intuitive at all in that regard. Thanks for the video tho.

  • @tori2040
    @tori2040 2 роки тому

    i tried your way and for some reason it would not work for me. this is what i did. i created a frame for medium closed design, then i created a frame for medium open and a frame with the 3 sizes. i took the medium open and the 3 sizes and made that an auto layout. i then took the medium closed and the auto layout and made a combined variant set. inside this i made copies of only the auto layout and made changes to the bg input box on the 3 copies. i found that it was easier to click on each component and change the properties and names. from there i did the prototype and took only the medium closed component and did alt to drag it out and place it in a blank frame to test it. i was also able to go to the properties with the instant and click on the variations if i did not want to go into prototype as well.

  • @Carroty_Peg
    @Carroty_Peg 3 роки тому

    Can anyone explain how Angela has done a blue box around the three rectangles? I cannot for the life of me work it out!

  • @farezjourney
    @farezjourney 3 роки тому

    i don't i know i think adobe XD has better prototype cause its easy to use than figma, figma is so complicated

  • @mikebarkersvideoshop7932
    @mikebarkersvideoshop7932 2 роки тому

    So has variants now changed and you can do all this within the variants, so you don't have to create the extra frames at the end. I've done this all in the variant

  • @JB-tk4rt
    @JB-tk4rt 3 роки тому

    This is so bad compared to adobe XD states. This is just not intuitive and it's super limited. Hope they get it better soon

  • @SangramBandsode
    @SangramBandsode Рік тому

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

  • @bahruzseyfullah
    @bahruzseyfullah 2 роки тому

    I have a little problem. my dropdown menu opens in the center of the frame. how to set its coordinates?

  • @emadelsammad5513
    @emadelsammad5513 2 роки тому

    I watched the video 4 times and still couldn't understand. I feel so stupid :(

  • @kimberlyikenye7971
    @kimberlyikenye7971 2 роки тому

    Hello the video was really helpful though you didn't show us how to select the options in the drop down you just showed us how to hover

  • @raywindow123
    @raywindow123 3 роки тому +1

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

  • @AdrianoReisDesign
    @AdrianoReisDesign 3 роки тому

    There's an update to the Auto Layout feature and now it works with interactive components so you can stack accordions in a prototype using only one component variant! quick demo:
    ua-cam.com/video/IHgaG6_asjg/v-deo.html

  • @bahruzseyfullah
    @bahruzseyfullah 2 роки тому

    Thank you!!!

  • @Underhills
    @Underhills 3 роки тому

    Hm, very tedious and quite quirky compared to XD for instance. Figma needs dynamic components. Would save a ton of time and frustration.

  • @PlantMusicLife
    @PlantMusicLife 2 роки тому

    When I paste the Dropdown/Open/None menu into my components, it pastes the content in a weird way. Do you have any autolayout active in any of your frames?

    • @qjay56
      @qjay56 2 роки тому

      Use the Paste to replace option

  • @youkba
    @youkba 3 роки тому

    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

  • @sandhyaselmon7258
    @sandhyaselmon7258 2 роки тому

    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?

  • @quansahjozef1018
    @quansahjozef1018 2 роки тому

    Awesome tutorial! Are you the voice behind Figma's tutorials on their UA-cam page? 😉

  • @losk2010
    @losk2010 3 роки тому

    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.

  • @Rachel-xd6tk
    @Rachel-xd6tk 3 роки тому +4

    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
      @angeladesign737  3 роки тому

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

  • @CarlosGasca
    @CarlosGasca 3 роки тому

    Now you have interactive components. No such mess is needed anymore. You can update this Video now.

  • @2SaltyRecipes
    @2SaltyRecipes 3 роки тому +1

    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!

  • @bakersentamu4725
    @bakersentamu4725 2 роки тому

    Is the "change to" under variants the new swap you're taking about?

  • @Cremulox
    @Cremulox 2 роки тому

    Anyone know why click to close overlay no longer works like this?

  • @shouma9
    @shouma9 2 роки тому

    How to make a full width dropdown menu plz someone help me

  • @diga1test193
    @diga1test193 3 роки тому +1

    Thanks for this, very helpful! I have my dropdown on a form with a few other fields. Whenever I select from the dropdown that I have made based on this video, Figma no longer respects the paths to other screens. Do you know why?

    • @highflyjule
      @highflyjule 3 роки тому

      i have exactly the same problem, did you find a solution?

    • @diga1test193
      @diga1test193 3 роки тому

      @@highflyjule No unfortunately not :/

    • @Cremulox
      @Cremulox 2 роки тому

      Hey, a little late here, but at 8:52 she clicks the checkbox for close when clicking outside and that seems to solve this problem

  • @RealRyanDeLuca
    @RealRyanDeLuca 3 роки тому

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

  • @brandondeweese7123
    @brandondeweese7123 2 роки тому

    Good tutorial but this is far too complicated just to create a simple drop down. I hope they make it easier in the future.

  • @mkkm120
    @mkkm120 3 роки тому +1

    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.

  • @АнастасияМакарова-п2щ

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

  • @jeffesoncosta14
    @jeffesoncosta14 2 роки тому

    It wont work if u use containers with auto layout

  • @Omarmangin
    @Omarmangin 3 роки тому +1

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

  • @HolisticPython
    @HolisticPython 3 роки тому

    Interesting, I'm not familiar with Figma, but it looks a bit like visual scripting. Personally, I'd just code it in CSS, then put it in a jinja macro (from Flask + Python) so it can be reused in other HTML pages.

  • @xTheBlackCatxd
    @xTheBlackCatxd 3 роки тому

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

  • @Degirolaamo
    @Degirolaamo 3 роки тому

    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?

  • @0402Amy
    @0402Amy 3 роки тому +1

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

  • @chandralekha1231
    @chandralekha1231 3 роки тому

    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?

  • @shedrackmbah1668
    @shedrackmbah1668 3 роки тому

    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.

  • @dadashlorgar
    @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 :)

  • @EPSTomcat11
    @EPSTomcat11 3 роки тому

    Wow this is tons of work just to create one interactive drop down...
    Also not all drop downs have the same number of options... so the reusability as a component is very limited, right?

    • @angeladesign737
      @angeladesign737  3 роки тому

      Yes that's a great point; it is quite limited. With the new interactive variants feature it should make prototyping a bit easier, without having to create an extra frame per instance.

  • @tspaziovirtuale3615
    @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

  • @cliptsix
    @cliptsix 3 роки тому

    @Angela Delise it is posibble to make this fully working i mean if you click medium shows medium on size and click again on medium and when you hovere its not swaping to 1 dropdown idk if you understand me :/

    • @mrnickb
      @mrnickb 3 роки тому

      It's possible. If you take the example in the video, create a variant of the closed version of the drop down with "Large" displayed instead of medium. Then, on the open version of the drop down, link the "Large" item to the large version of the closed component I just described above.

  • @ellenerrico1776
    @ellenerrico1776 2 роки тому

    Do you have the step-by-step written instructions for this?

  • @alistairburch3820
    @alistairburch3820 3 роки тому

    Very helpful video. SO much vocal-fry - painful!

  • @thearthematix
    @thearthematix 3 роки тому

    Next step is to delete the dropdown menu and make bullets instead))

  • @nishakatti361
    @nishakatti361 Рік тому

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

  • @tguncurrit
    @tguncurrit 3 роки тому

    Could you build all of the interaction behavior into the component, so you don't have to make all of the overlay frames again? Just insert the one instant of the component? Or not possible?

    • @angeladesign737
      @angeladesign737  3 роки тому

      With the new Interactive Variants feature (in beta right now) you can add interactivity directly to the variants without adding the overlay frames.

  • @mooretto
    @mooretto 3 роки тому

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

  • @yumpiri
    @yumpiri 2 роки тому

    why not create interactions between variants?

  • @jenna_t214
    @jenna_t214 2 роки тому

    Excellent tutorial, thank you very much.

  • @anirouDS
    @anirouDS 2 роки тому

    Thank u so much for this video !

  • @Niruvanism
    @Niruvanism 3 роки тому +1

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

  • @johnwca
    @johnwca 2 роки тому

    AMAZING tutorial! just amazing!

  • @ranaahmed-uf5lr
    @ranaahmed-uf5lr 3 роки тому

    I have to admit that this step in xd is so much more simple

  • @minhazulrony01
    @minhazulrony01 2 роки тому

    this is very hard process you did!!

  • @poncardas
    @poncardas 3 роки тому

    Thanks for this tutorial and super cute voice 😀

  • @까미유-e4m
    @까미유-e4m Рік тому

    Thank you professor😭❤❤❤

  • @julian42x
    @julian42x 3 роки тому

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

  • @kuso851230
    @kuso851230 3 роки тому

    could you explain how did you copy the bar into variants, I was failed to paste in it.

    • @DyanBermeo
      @DyanBermeo 3 роки тому +1

      She did a terrible job explaining things.

  • @Ptc417
    @Ptc417 3 роки тому

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