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.
@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.
@2SaltyRecipes
3 жыл бұрын
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!
@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.
@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
@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 :)
@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 😭
@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 !!
@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
3 жыл бұрын
that's true. something Adobe XD is good with
@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!
@xTheBlackCatxd
3 жыл бұрын
Thanks Angela! This is a smart workaround for the Interactive Components which is still in beta right now.
@fesa2696
3 жыл бұрын
When I copy the First dropdown menu tô the component It disappear. Why would this happen?
@0402Amy
3 жыл бұрын
This is awesome! I’m learning Figma and was seriously struggling with creating this for a project. So glad I found this!
@xXVenezuelaXx
3 жыл бұрын
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
3 жыл бұрын
Great tip, you just saved my sanity!
@Cremulox
2 жыл бұрын
YOU are a godsend, thank you
@raywindow123
3 жыл бұрын
This has been an excellent tutorial, Thank you and appreciate your work here :)
@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.
@Omarmangin
3 жыл бұрын
That was unbelievable useful and you made it super easy to understand, thanks!
@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
@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.
@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 :)
@skinnysmitty123
3 жыл бұрын
Awesome! built my first drop down in figma because of 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!
@julian42x
3 жыл бұрын
Most useful Figma prototyping video ever! Can't wait for Figma to let us switch to varients in prototyping though
@АнастасияМакарова-п2щ
3 жыл бұрын
Thanks a lot!!!!! it was the most hellfull video about dropdown menu i have everseen
@joseiniguez2313
2 жыл бұрын
Great tutorial, just what I was looking for!
@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.
@omuniz1
3 жыл бұрын
This tutorial is so helpful! Thanks so much for sharing.
@alfonsoabril290
3 жыл бұрын
Your explanations are very clear, thanks
@Ptc417
3 жыл бұрын
This has been super helpful! Thank you for sharing :)
@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
@RealRyanDeLuca
3 жыл бұрын
Great tutorial, but wow, so much work and complexity just to make a dropdown. Keep refining, Figma.
@jonstevens3500
2 жыл бұрын
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
2 жыл бұрын
Yep mine is slightly off center and driving me crazy
@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
@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!
@bahruzseyfullah
2 жыл бұрын
I have a little problem. my dropdown menu opens in the center of the frame. how to set its coordinates?
@Sirwebbsiv
2 жыл бұрын
Surely there must be a way to create components/variants with the dropdown you already created? Rather than doubling the work?
@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
@까미유-e4m
Жыл бұрын
Thank you professor😭❤❤❤
@sarinkay1078
3 жыл бұрын
Thanks for this awesome tutorial.
@lamiwilliams
3 жыл бұрын
This was soooooo helpful. Thanks a lot!
@jenna_t214
2 жыл бұрын
Excellent tutorial, thank you very much.
@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.
@yevheniiatrofimova3646
3 жыл бұрын
Thank you so much for the great and quick tutorial, it helped so much!!!
@angeladesign737
3 жыл бұрын
Glad it helped!
@vincentho6212
3 жыл бұрын
Great tutorial, very clearly.
@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.
@dguy687
2 жыл бұрын
Great job describing this.
@calvinogood
3 жыл бұрын
Interactive components make life easier now.
@amandanajem9739
3 жыл бұрын
Awesome! Thank you for this!
@kettenbach
3 жыл бұрын
Excellent tutorial 🙏
@bakersentamu4725
2 жыл бұрын
Is the "change to" under variants the new swap you're taking about?
@Karthikbrow
3 жыл бұрын
Great one!
@GraveRave
3 жыл бұрын
Excellent tutorial, subscribed!
@angeladesign737
3 жыл бұрын
Thanks! Glad it helped!
@leslieleslie336
2 жыл бұрын
Beautiful !
@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?
@pavliny
3 жыл бұрын
Great tutorial! Thank you so much!
@angeladesign737
3 жыл бұрын
Glad it was helpful!
@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!
@uiuxlearner1769
3 жыл бұрын
Wow it's great tutorial.
@ranaahmed-uf5lr
3 жыл бұрын
I have to admit that this step in xd is so much more simple
@diga1test193
3 жыл бұрын
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
3 жыл бұрын
i have exactly the same problem, did you find a solution?
@diga1test193
3 жыл бұрын
@@highflyjule No unfortunately not :/
@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
@stevanusdewangga7453
2 жыл бұрын
Great great great great thank you!
@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 😐...
@SS-ec6gt
2 жыл бұрын
so helpful!! thnkuuu
@nataliasoares6236
3 жыл бұрын
Thanks for the video! It helped me a lot
@angeladesign737
3 жыл бұрын
Glad to hear that!
@shirleyjoseph5395
3 жыл бұрын
Thank you! this was helpful!
@angeladesign737
3 жыл бұрын
Glad it was helpful!
@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...
@DrEstigio
3 жыл бұрын
cheers from Argentina! YOU SAVE ME! ahahhaha thx!
@angeladesign737
3 жыл бұрын
Glad it helped!
@tobechukwuedimeh
Жыл бұрын
Thank You!
@shouma9
2 жыл бұрын
How to make a full width dropdown menu plz someone help me
@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
2 жыл бұрын
Use the Paste to replace option
@ericnjanga3245
3 жыл бұрын
Bravo, braaaaaavo lady!
@praneethBillana
2 жыл бұрын
Thank You.
@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
3 жыл бұрын
With the new Interactive Variants feature (in beta right now) you can add interactivity directly to the variants without adding the overlay frames.
@createpeace2124
2 жыл бұрын
Variant option not showing
@CarlosGasca
3 жыл бұрын
Now you have interactive components. No such mess is needed anymore. You can update this Video now.
@minhazulrony01
2 жыл бұрын
this is very hard process you did!!
@zl5217
2 жыл бұрын
thank you!!!
@Donly101
3 жыл бұрын
You helped me, ty
@angeladesign737
3 жыл бұрын
Glad it helped!
@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
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.
@jeffesoncosta14
2 жыл бұрын
It wont work if u use containers with auto layout
@sepehrui
2 жыл бұрын
Thank you
@kelvinsixtus3646
3 жыл бұрын
So easy to grad
@burningguitarsoul
3 жыл бұрын
c'mon Figma. get that interaction happening!
@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.
@timothydamilola614
3 жыл бұрын
Your video images is blur
@parangparangpangpangpum2055
2 жыл бұрын
tthanks
@tulsisoys
3 жыл бұрын
Luv u..!
@TheShmrsh
2 жыл бұрын
4:00 lol doesn't work
@bl1tz_x
3 жыл бұрын
🥰🥰
@marinastreletska8441
3 жыл бұрын
💜💜💜💜
@angeladesign737
3 жыл бұрын
🎉
@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
@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.
@JB-tk4rt
2 жыл бұрын
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
@emadelsammad5513
2 жыл бұрын
I watched the video 4 times and still couldn't understand. I feel so stupid :(
@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.
@sydh3334
Жыл бұрын
i'm losing my mind
@alistairburch3820
3 жыл бұрын
Very helpful video. SO much vocal-fry - painful!
@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 😭
@Abi-gf2wp
3 жыл бұрын
This was so useful, thank you!
@angeladesign737
3 жыл бұрын
Glad it was helpful!
@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.
@ikayesdesigner
3 жыл бұрын
This is one of the most easy-to-understand Figma tutorial videos. Hands up, you got one new subscriber. (2)
Пікірлер: 237