How to Create an Interactive/Functional Dropdown in Figma
HTML-код
- Опубликовано: 2 июн 2024
- 🔥 Start using Figma for FREE → bit.ly/TryFigma
🔗 Join our design community here → bit.ly/DX-Community
How to Create an Interactive Dropdown in Figma. In this video, I show you how to create a functional dropdown list or dropdown menu in Figma on a single frame using the Interactive components feature.
#Figma #Dropdown #FigmaTutorialSeries
⏱️Timestamps:
0:00 - Intro
0:44 - Demo/Preview
1:04 - How to easily use it in your Figma project?
1:44 - How to create it?
5:14 - Demo Output
📄 Figma file link: www.figma.com/community/file/...
🔴 Don't forget to Subscribe. Trust me it's absolutely FREE - bit.ly/SubToDesignXstream 😅
🎉 Join our Whatsapp Community now, it's FREE: bit.ly/DX-Community
You have got some ideas or topics in mind? Please do comment below we will make sure to check it out and do it if possible 🥳
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🌍 Social Media:
↪︎ LinkedIn - / designxstream
↪︎ Instagram - / designxstream
↪︎ Facebook - / designxstream
↪︎ Twitter - / designxstream
↪︎ Website - DesignXstream.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
🏷 Tags: How to Create an Interactive Dropdown in Figma, How to Create a Functional Dropdown in Figma, dropdown in figma, dropdown menu in figma, dropdown list in figma, how to create dropdown, functional dropdown, interactive dropdown, dropdown animation in figma, listbox in figma, listbox animation, working dropdown in figma, clickable dropdown in figma.
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
⭐️Duplicate the Figma file from here: www.figma.com/community/file/978009302809014736/Interactive-Dropdown
Also, do follow on instagram for more updates: instagram.com/designxstream/ 😊
Thank you very much
This is a beautiful design, I just wish we could've watch you create everything from scratch. Would be much easier to follow
I did not want to make a 20 mins long video so tried to keep it short. But i'lll try to make a detailed video on a similar topic!
I love how the tutorial is divided into 3 sections. Very well explained and I was able to recreate the component easily. Thank you!
Wow, glad you found it helpful! Cheers ✌🏼
Incredible. Thank you so much!
Glad you liked it! :)
Thank you so much !!! this was very helpful :)
Glad it was helpful! Cheers ✌🏼
This is awesome do you think you could do a tutorial video how to build this from start ?
I would really love to understand how the combined variants all work together with each other :o !
Hey Crystal, Sure I'll try to come up with a more detailed video. Meanwhile you can find this file URL in the description and try to see how it works.
Coool!!
Thank you so much for this!!!
Glad you liked it! :)
bro, it's amazing, thanks !!
Glad you like it! :)
That's great you're the best
I couldn't understand how anyone describes this but you are the only one who described this easily
thank you
I'm glad you found it helpful! Thanks for sharing your feedback :)
Thank you! Took me a minute to figure out how to put in into my project. But it works great! Thank you
Glad it helped! Cheers ✌🏼
This is awesome ! Thank you
Glad you liked it! :)
Thank you ... this was very helpful for me
Glad it helped :)
Thias is amazing, saves a lot of time, definetly subscribing
I'm glad you found it helpful ✌🏼😊
Man, I love you, you saved my project!
Glad to hear it! :)
Thank you so much for this! I wanted to clarify - is this a use of variants? I'm new to Figma lingo, so checking :)
This is using 'Interactive Components' which basically uses variants. This feature is still in beta make sure to apply for the beta program to use this.
This is great thank you so much! I was wondering if it is possible to select one of this options and it shows you another drop down. When I try to add a connection on the prototype I don’t have the options showing… how can you go around this?
This is not directly possible in Figma as you cannot add conditional logics however you can try to workaround but it would be too complex!
Thank you for the quick tutorial☺
Glad you liked it! Cheers ✌🏼😇
Life saver for me right now. Bundle of thanks.
Cheers buddy! ✌🏼
Thank u so much!!
You're welcome! :)
great! I was fighting with it 2 days before finding your video!
Glad I could help! :)
Thanks for the tutorial!
Cheers ✌🏼
Thank you so much!
Glad it helped! :)
thanx for this video ♥
Cheers! Glad you liked it ✌🏼 :)
Thank you Its really helpful,
I want to add navigation for each selection that it will transfer to anther page can you please explain to me how, its my first project using Figma and I’m struggling a bit.
For this you need to use variables & advanced prototyping... pls check my latest tutorials.
Thank you so much.
Always welcome!
Great stuff, and very polished! If anyone is out there lol I'm getting snagged on a few things with a modification I'm making to this (I added two items to the dropdown list). 1) the first item in the dropdown list automatically selects itself when hovering over it, 2) the last three items on the dropdown list ease into the wrong item when selected, and 3) the none of the selected states are able to revert back to the open dropdown list (with the exception of the last item, which only allows me to do this once). I'm kind of running out of things to troubleshoot at this point.
Not sure what's that issue. If you can ping me on insta @designxstream I can try to help!
Try redownloading the app. That worked for me when app was making no sense and not performing properly.
good presentation!
Glad you liked it! :)
Pls do check our insta page for cool design bites: instagram.com/designxstream
Hey! How do we add more options to the drop down menu? For eg: I want to make a drop down menu for countries/ states and I can’t find a template or a component with those many no. of options! So, how do we add them to your component?
Hey Sree, You need to duplicate the selected state variant to the number of option you want to have. This is just to demo how the dropdown behaviour can be shown I wouldn't recommend to show all countries/states that would be lots of options = lots of variants.
Hi! Thanks for a great tutorial, just what I needed!! Unfortunately, it doesn't seem to work anymore... Is there i bug maybe? It worked a couple of days ago... Any thoughts?
Hey Amanda, I just checked the file after you told and found there is some bug. Interactive components beta just went live 2 days ago and looks like there is some issue with auto layout. I've put in a temporary fix you can duplicate the community file once again and try it.
@@DesignXstream Thought so too... Thank you so much!! What did you do to fix it? I have built a bigger drop-down menu from your tutorial in my own project..
@@amandaeriksson32 Looks like turning the opacity down is causing some issue in Auto layout so I've kept them at 100% and reduced the frame size to hide the elements. You can duplicate the file and see the updated version.
It's unfortunate that you have to create so many workarounds in Figma in order to be able to create something as simple as a dropdown list. Imagine how much connections you'd have to make if you wanted a dropdown with 10 items! When it takes less time to actually code the design instead of prototype in Figma, that's a sign that Figma is inefficient for prototyping purposes.
Yes, agree on that! Figma is just for basic prototyping. For Advance prototyping I prefer Protopie or Framer! or even AzureRP.
I think you're being harsh with it... it's not that bad when you get used too and realize just by looking what should be a component or not. But I agree that Figma have a loooooooot of room to improve.
If I just wanted to create a simple drop down that shows list and hides the list if you click outside, it's a 2 minute job and so so simple in axure. It's all about hide unhide. Hover features are inbuilt in each shape text.
You actually don't understabd what UI is lol!
Thanks, great tutorial. But when I try it, I can't click the 'change to' option. Seems disabled or am I making mistakes?
'Change to' will only be enabled if you choose a frame it will not work on layers!
Hi, How did you get the chevron arrow to rotate? I tried with smart animate but it doesn't rotate when clicking.
Thanks
In the open state you just need to keep the chevron at 180 degrees and it should rotate.
@@DesignXstream oh ok thanks.. I have been using icon components to replace the down chevron with up chevron but i see for animation, you have to make property changes to the same icon. Thanks again 👍
Awesome vid!!!! Is there a way to duplicate it and then change the labels for a second dropdown list?
Yes you can do that. Or you could use the new dropdown component that doesn't need you to duplicate component instead you could use one component at different instances.
link: ruclips.net/video/Xit-5MFHM88/видео.html
Hi, Can you please explain how to create a nested component? So that I can change all the data at once and it reflects in all variants of the parent component. Please let me know how did you create "change data here" component in the video.
For creating Nested Components: First you need to create a component in this case I created a text within a frame so this frame becomes our first component(comp. A) then you need to place this component in a new frame(comp. B) that you are creating and then convert this new frame into a component. This was comp.A becomes a nested components in comp B.
@@DesignXstream Gotcha!!! Thanks for the reply. I have to place the instance of comp A in all the variants created. So the changes made in comp A reflects in the variants also. I tried now and it works. Thanks a lot man. Got the logic.
Great video!
Is it safe to apply for a beta program and use this funcionality in a real project file? No file crashes or so?
If you use too many interactive components the file might lag a bit but other than that I found it works fine just like normal.
Got to know you from Pinterest from your curved carousels pin! 🤩Great work
Awesome! Yes, we posted curated content from others on Pinterest and tutorials here! Hope you like it ✌🏼 :)
I have a vertical menu bar instead of a horizontal one. How can I make it so the dropdown menu will make the items underneath move further down and retract when mouse scrolls elsewhere?
Try using autolayout and use while hover animation. So using autolayout will make sure the items underneath move further down on expanding.
@@DesignXstream thank you so much for the explanation
thank you
Cheers! 🤘🏼
Lovely tutorial..so easy and straight forward. However, while dragging the instance to my project, I noticed it's blocking the elements under it. When I want to click on those elements, the drop down opens up, like it has covered the elements under. Please is there a way to fix this
Are you using it inside a Auto layout? Then you need to change the stacking mode.
@@DesignXstream Do I need to use autolayout to create the drop down list? And please what's stacking mode? Thank you so much for replying me
@@christianahfolakemi8507 It is not mandatory to use Auto layout. If you are not using Autolayout then all you have to do is make sure the dropdown component layer is above all. If you still facing issue ping me @designxstream on Insta.
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!
sorry, I don't get your query. Can you DM me on instagram @designxstream I can try to help.
hey, this is amazing and thanks for making it, just wanted to know if it's possible to add more options to the dropdown menu?
Yes it is possible but you have relink it again I showed it on the video.
@@DesignXstream I was wondering the same thing, but I don't see it in the video.
@@IAmKeishaPendleton Ohh I thought I explained this part! Anyway you can check the new free UI Kit I shared that has a dropdown component where you can easily choose the no of options you want. Shared it on this video: ruclips.net/video/e2VwKIMOQYI/видео.html
@@DesignXstream awesome! Thank you!
Can you explane UX concepts that designers must know or the ux solutions that changed the design industry.
Sure! I'm soon planning on making content on UX.
A simple ass dropdown is this complex. Nice
This is an older method... check this the latest one: ruclips.net/video/Xit-5MFHM88/видео.html
hello! very cool element! However, when I copy paste the file into my page it stops working... do you know what could be the issue? Thank you in advance :) (I am VERY new to figma)
Hope you copied the whole interactive component set with all variants. And then in your new file you need to make a copy of the first/default variant onto your frame.
If it still doesn't work then ping me @designxstream on Insta I can help you!
Thank you for the tutorial! One question: How do we link the options to another page in Figma?
Update: Figured it out!
Awesome :D Cheers ✌🏼 :)
how u did it
How if I have a huge dropdown menu? For example, with a Country list? :/ It doesn't seem like I can use this tutorial. Please let me know. Tks
Figma is jst a basic prototyping tool. For such full fledged prototypes you should look for other advanced prototyping tools like Protopie, UXPin, Framer, etc. They have real input fields and dropdown lists etc. that yu can use for proper prototyping.
I get a interactive beta component error for my prototype and so I can’t use the component. Do you have any insight on this? Great tutorial btw !
Hey Micheala, Interactive components is a feature in beta. So you need to be signed up for the beta program in order to use this.
@@DesignXstream However, it would have been great if you would have mention that in the video.
@@kindasport I've mentioned it in my previous videos... so in this video I jst put it in the description.
Hello everyone, i have a problem i don’t know how to solve. I have a desktop frame (i think it is called prototype frame) in which i am putting all the components to create the home page of my website. For every section of the page i have created a frame. However, when i link the elements of my navigation bar to the sections of the page (i drag the arrow to the component and i put “on click” → Navigate to (the section of the page) and after that i put the linked section inside the main frame, nothing works both in the presentation and preview mode. Do you have any suggestion? Is it a Figma’s problem or did i do something wrong?😓😓
I think you should be using 'Scroll To' instead of 'Navigate to'. Try this, if it doesn't work you can dm me on @designxstream on instagram and I can have a look at your file.
Super nice, but when I'm using it in a form, the expanded version goes "under" the item below.
I'm stuck here, impossible to find a dropdown component in Figma which overlay properly when expanded, and that keeps the selected item.
If you are using it inside AutoLayout then I think there is no way! If it is not Auto layout then you can just put listbox component above the below below layers in order and it should work fine.
@@DesignXstream Yes, exactly, that was my missing "constraint" > in a AutoLayout.
But I'll try to search on this side. Thanks!
@@Cuervaud Sure. Do share with us if you find any workaround. Would love to hear it.
@@DesignXstream there is a rather messy hack called "the double-180", on Figma forum ("Layers order + Interactive components in auto layout").
Otherwise, Figma guys are aware of the issue, but adopting the z-index logic in addition of the layer order looks like a massive logic change > could take some times.
@@Cuervaud That sounds like a really messy hack :D But did that work?
One question, how do I do the hover effect? I mean the transition effect, it doesn't work for me! Thanks!
Each row in the list is a component for which you can assign a hover state.
I can’t get that to work. Can you elaborate?
thanks sir
Most welcome :)
Soooo helpful!
Glad you found it helpful! Cheers bro ✌🏼
Hey, it was very useful and very informative video but please can you make one video in which you step by step show and teach how to make this dropdown menu component, please i want to learn this how to make this component.
Hey Niteen, Sure I will plan on making a longer video!
how can i add scrollbar incase i needed more drop list can you make an video
I think you just have to set scrolling behaviour for the main list parent frame and give it a fix height to scroll. Have you tried this way?
Bro just wanna. I wanna become like you... I mean you do all this on your own right thinking and doing. And I wanna learn UI/Visual design. How can I do it any suggestions.
Hey Ajeeth, Thank you! You can reach me on Instagram @designxstream I can provide you some advice there! 👍🏼
you are going little fast so plz take your time and create it for bigginers, we can understand easily and more.
Point noted! Will improve 👍🏼
can i export this as a interactive pdf with the dropdown menue working?
No this cannot be exported to PDF. Only static frames can be exported to PDF.
Currently evaluating Figma, and if I can't figure out how to add a dropdown in a few minutes, and have to start looking up RUclips videos on it, then the product isn't very user friendly or discoverable.
True that! Figma is not good at this detailed level of prototyping yet... hopefully they come up with these features.
How do you make each of the items bold on hovering them?
Each row/item is a separate interactive component so you can modify in that.
How do I even get there in the first place that is what I was trying to find :/ finding the component first
Can you elaborate the issue?
I'm beginner
Is anti glare TN panel good for ux ui?
Can't afford ips monitor now
Hey Kris, Definitely IPS monitor is much better as it enables you to see your design in good clarity and colors. However, if you are a beginner and cannot afford then that shouldn't become a hurdle to get started... UI design can be done on an anti glare panel as well.
In fact.. you can use the mirror feature to constantly preview the design on your mobile that could let you see the real clarity and colors!
@@DesignXstream thanks for d reply sir
I can see colors perfectly in my old tn panel, it distorts when viewing from not prescribed angles and i don't mind it lol
Btw r u self learnt or through university?
@@kriswayne7938 Yes, the distortion reduces the clarity and yah views angles too is a problem but that shuldn't be a problem.
And I'm self taught.
@@DesignXstreami think its good coz it has 16.7 mn colour gamut and that's d main thing we need right?
I think you just need to take a wee bit slower on the description. Other than that great tutorial.
Point noted! Thanks for the feedback. Cheers ✌🏼 :)
Thank you
You're welcome! ✌🏼
Very new to Figma, so I feel like I'm missing something here. It's a bit confusing to begin with because the provided screen does not match the one you're working from.
Feels like this should be really simple, but I'm lost.
Hey this is an older method. Now there is a much easier approach to this which I've explain in this video: ruclips.net/video/Xit-5MFHM88/видео.html
Can you do this but on a navigation bar
Yes, you can use the same method for Menu dropdown as well.
It doesnt work for me. Is there any update that removed the functionality?
Hey Leonard, This is Interactive component which is a feature still in beta. You need to sign up for the beta program in order to use it now or wait for the official release.
I'm still new to UX, but I've seen a lot of tutorials. There haven't been any as good or helpful as the content put out by Design Xstream. My projects would be 6 feet under if it weren't for these.
Glad you found it helpful! Cheers ✌🏼
what happens at 2:23? where is the component appearing from?
I created that before hand itself. It is a component created by nesting the smaller components.
A simple task is so complicated to be done from scratch 😭.... M still in the learning phase, but do companies usually expect designers to know only basic or advanced prototyping?
Hey! As a beginner you don't need to be aware of advanced prototyping. Just the basics interactions like navigating and basic animations are more than enough. No company will expect a beginner to create a dropdown like this. So chill you can slowly learn all this after you crack into your first job! All the best 👍🏼
@@DesignXstream Thanks 😇👍
Hey, sorry but the prototype is not working anymore. :(
Hey Angela, I've put in a temporary fix you can duplicate the community file once again and try it.
How can I add more fields? I'm newwbie with Figma lol
You need to duplicate the whole component set along with all variant and then you can add it as a new field.
How can I add more drop down options within your file? Please help lol
You need to duplicate more variants and add to it. And don't forget to link them on the main variant.
Ping me @designxstream on Insta. I can look at the issue.
@@DesignXstream it won't allow me to put any more text options in the drop down with all the other options. I cant move the text or anything
(!) How do you sign up for the Beta program???
Goto this link and register: forms.gle/tAxqMQNXuNU4NYmj9
U should have created n explained everything thing from scratch about creating a component and everything...u have created urself n explained the last part only!
How ppl who r beginner will get to know this????
Hey Snehal, Most of the subscribers preferred quick & crisp videos so I often upload videos like this. But I agree with your point. I'm soon planning to create a detailed course on Figma so probably that should help with all the basics. Until then if yu have any queries yu can reach out on our instagram @designxstream
Apparently interactive components are useless and impossible without this elusive "beta". I have NEVER in my LIFE seen something that's DESIGNED FOR UI DESIGN, be so user-hostile. This is ABSOLUTELY stupid, and NOTHING ANYBODY shows in any tutorial - with multiple methods I might add - makes sense OR WORKS. GIMME a STUPID way to do it and I'd like that more than the fucking shitstorm of a steaming DUMPSTER fire of confusion and contradicting methods/solutions/tutorials. I work for a company that the beta isn't sanctioned for. How the FUCK did people do this BEFORE the beta??? Was it just impossible? EVEN if that were the case it would be more satisfying than what feels like chasing the FUCKING wind for a GHOST who's part of a LEGEND that I THINK I heard some drunk guy WHISPER to a GOAT at a bar 30 million years ago - when I was wasted too. Fucking jesus christ.
@@Beamtup Everything that is done using Interactive components is absolutely possible without it. But it needs multiple frames. Interactive components just elimates the extra effort of having multiple frames.
i cannot do this 2:51 resize the dropdown list
i also cant change the size of the list n=and the arrow why?
Just make sure the 'Clip Content' of the frame is on then when you resize everything will be hidden.
However, this is an old method, Would suggest you try the new one here: ruclips.net/video/Xit-5MFHM88/видео.html
what is he pressing at 5:10
older option? all other option?
That's a method to make duplicates of a component. You need to press and hold Alt (in Windows) or Opt(in Mac) and drag the compoent. This will create a duplicate of the component.
Here is the problem I have with your videos: you start with a number of components already made and do things like "Change data here" and "hide this" but not "Here's how you CREATE these components. I can't follow along as someone who is just getting into Figma. You also don't mention the necessary files at the start of your videos (I understand that they are in the description, but it should be mentioned). You mention not wanting to create these from scratch because that will take too long, but that is what so many of us need!
Hey Antonio, I totally agree with all your points. However, I've tried a few in depth tutorials which dint go well with the audience. I'm trying to find the balance in between both so that it's not too lengthy nor too short. Appreciate your feedback! ✌🏼
Hiurrr
What is the point is you're not explaining how to make this from scratch 😑
Just wanted to keep the tutorial short. But I think I tried to cover the important part of its creation in the @1:44 and also provided the file. If you still find it confusing them do reach out to me on Instagram I can help! 👍🏼
If you don't want to explain in detail, why did you create a video in the first place?
Experts won;t need this, and novice users won't understand anything. What's the use?
I prefer to deliver quick and crisp content. So I try to keep them short. But I get your point i'll try to make my upcoming videos more detailed.
I think he nails it in this video (with the possible exception of adding new items). I mean, he shows you how to modify this example. A complete tutorial on how to make this file from scratch is a whole different level, in my mind.