How to Create an Interactive/Functional Dropdown in Figma

welcome back everyone so in today's video i'm going to show you how to create an interactive drop-down on figma and for this i'm going to use interactive components and that is because you don't want to have this functionality in multiple frames right you want everything to happen in a single frame and for that we got to use interactive components so i'm going to basically split this into three parts so in the first part i'm basically going to show you a quick preview of how this works and in the second part i'm basically going to show you how to use this in your projects so i'll be providing the link of this file in the description below so you can just download it and do some changes and directly use it in your project and in the third part i'm just going to brief you through the different techniques and the process that i use to create this so i'll be showing you the prototyping methods and all the different techniques that we used so without any further ado let's get started so as i mentioned in the first part i'm just going to preview this so here we go i just selected it and i hit on preview so here we have it and as you can see i can just click on this and it opens and closes and then i can hover on these and you can see the subtle change there and i can just select it and i can repeat this process n number of times and it's going to work seamlessly so this is what we are going to create so moving on to the second part of the video so if you want to directly use this in your project all you got to do is make some changes here so i mentioned here change data here let's take an example of you know occupation so i'm going to make that occupation and the placeholder can be select occupation so just some random data and once you change that everything will get reflected because everything is components here and as you can see it got reflected here as well all you got to do is just preview it and you can directly use this component in your form or whatever project you're using so once you preview that you can see that the data is already changed and as you can see you can scroll through the data and select whichever data you want and it gets populated there so finally moving on to the third part where i'm going to show you how we created this so we are not going to create this from scratch because that's going to take a lot of time but i'm going to explain you the main things that i've used here and the different techniques so that should give you a pretty good idea and also you can check the file to understand it more in detail so these are the basic units that i've used here so one is the title one is a placeholder and one is the drop down list so this is nothing but a label here which i've just converted into a component so that it easily gets changed everywhere and you can use it seamlessly so as you can see here uh these are the different things that i used so inside the drop down list i've also used one more component so this is basically a nested component so if you can see here if i make any change to this one it gets reflected right here so this is a nested component that i've used here and as you can see this is the different components that uh club together creates the main component so the first thing is select all of these right click and say create component and this is going to be the main component so i'll just put it up and to make this an interactive component you basically have to add variance so i'm gonna add a variant here using this button here so in the default view you don't want the drop down list to be visible so let's take care of that so what i'm gonna do is select this drop down list component and just reduce its height so i'll make it something like one and also to completely remove it from the visibility i'm gonna make the opacity as zero so now it's not visible at all and next thing you want the chevron here to be at zero degrees so this is going to be the default state that is set and this is going to be the open state so we have done with the first and the second state next thing we are going to create four more states here but i'm going to just show you one example here to select the businessman here so what i'm going to do is just select on this variant here and click on this button to add one more variant so here we'll basically create the variant which shows that businessman is selected or the first item is selected so for that you basically have to hide the rest of the things and make only this one visible what i mean by that is i'm gonna select item two item three item four and basically make the opacity zero so that it's not visible anymore and the next thing you got to do is even hide the fill of the businessman or the first item here so i'm gonna select the item one and make the fill invisible so that's it we are done handling the drop down list part here and the next thing is you also got to hide the placeholder so i'm also going to make this opacity as zero and finally you just have to move this to the position here so for that i'm going to select the drop down list here and move it exactly to the position where it shows it's populated so we are done creating the states so i'm just gonna as i mentioned i'm just gonna show the example for this one and also you gotta make the chevron here as zero because it's already selected so our variance and the states looks perfect all you are left with is to the prototyping so for that just go to the prototype mode so first off you'll select the default state here and link this to the next one which is the open state and one more thing to note here since we're using interactive components the option that you see here which says change to will be only available if you're signed up for the beta program so make sure you're signed up for that if you want to use this so on click we're going to change to this variant and we're going to set this to smart animate at 300 milliseconds that looks good so on click of this the drop down is basically going to open and next thing we're going to show the selected state for the first item which is businessman here so we're going to link this to the next variant here and the settings can be left to the default which is looks good yes and finally on click of this we also again want to do this multiple times so we are going to link this to the second state here which is open state and smart animate 300 seconds looks good so that's it guys we are done uh doing the prototyping so all you got to do is just copy your instance of this so i'm just pressing alt or option and dragging an instance of this to the main frame here so that's it let's try to preview this and see how this works so there you go it's loaded up and this is the one that we just added so i can just click on this and it opens up and i can hover on these but if i click outside you can see that only this one is clickable that is because we didn't add the interactions for these you have to add it for the demo that i showed only this one has an action and once i click on that it gets selected and i can do this n number of times so you just have to add the interactions for the rest of the things in the same way that we did for the first item so that is how you basically create this and that's it for this video guys i hope you found this informative and helpful a quick note here thanks for all the love and support that you've shown us on youtube and we have just recently started our instagram page and as you can see here we are posting some really interesting and informative design bites so make sure that you follow us there so that you don't miss out these content and as always thanks for watching [Music]

Channel: Design Xstream

Views: 235,413

Keywords: 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, figma, figma dropdown menu, interactive components

Id: 5YEw7O1KgNQ

Length: 6min 9sec (369 seconds)

Published: Mon May 24 2021