Figma Select Menu Animation

hello and welcome to today's video today i'll be showing you how to create a select menu animation in figma so this is my select menu animation that i've actually created so when you see when you click on the drop down menu you actually have a list of components that actually appear we have different countries it's asking which country from and let me give an example i select from the united states as you can see it actually changes and the united states is selected by default then you can change that to india it won't matter we can change that to uganda i want to show you how to do this in figma as you can see when i also hover upon each country there is actually a blue color coming up we are going to land these different steps in sigma so you want to learn this just stick around sit down get a cup of coffee and let's let's learn something new alright let's get into today's video [Music] all right so we've created a new project we're going to change its name to se lect menu all right so first things first we're going to create a frame this is the frame we're going gonna make use of in this room we're gonna type out some words which country are you from then we're gonna highlight all by clicking ctrl a we're gonna change this size to let's try size 40. okay that actually looks so big so use this to 25 yeah 25 is perfect okay i'm gonna change that to my favorite font type poppins okay that's looking good all right then we're gonna now design our select menu so we're gonna create a duplicate of this so we have a rectangle we're actually using just gonna design it right there we're gonna change its border radius to 30 okay that is perfect then i'm going to duplicate this i do that by holding alt then i'm going to add the stroke to this and i'm going to remove the fill so inside here i'm gonna give a stroke some kind of grayish color something a little bit grayish just like that then i'm gonna compress this other one then i'm just going to fit it right there actually it's fitting well i'm going to change its color to something light blue all right some color i'm going to make use of yeah i think that looks okay all right then we're gonna duplicate this text then i'm gonna change this text and say select change that to select country okay then i'm gonna place it right around the middle yeah but it looks perfect they're gonna change its color to something dark gray all right next we're gonna insert some icons we're gonna make use of uh a plugin i like called iconify this allows me to get an icon i want so as you can see i we're gonna make using an icon just type in the icon greater then we'll have this icon right here we're going to make use of that then we're going to have three different countries what i like about it is it almost has every kind of icon that we would actually want it's actually the best i've come across so these are flags of different countries just type in united states we have that just like the rank round one then last we're gonna try india okay so i have india right there okay that's looking okay so next we're just going to highlight the different icons in the uganda flag then just gonna group them do the same thing to those of the united states and then group them do that to also that of india then group them because they actually come as separate components and i'm going to drag these out of the frame okay we prefer them not being in the frame then delete that then we also need this icon out of the frame all right so there we go we have our different flags okay so we're gonna place this right around there now we're gonna rotate it to negative 90. all right that's looking better i'm just going to enlarge it a little bit compress it i think that looks fine give it a white color yeah white would actually match that's looking okay already all right so next we're gonna make use of the rectangle tool again i'm gonna draw a rectangular shape that's almost equal with um with that other shape that's looking fine don't worry about anything else then i'm gonna drag it outside here all right let's give our rectangle a white color all right that's looking okay then we're gonna uh make a component out of this just click on this create component icon so we've actually made a component then we're gonna drag in the uganda flag i'm gonna place it right there so the flag looks so big i'm gonna reduce its size a little bit let's first let's actually reduce the sizes of all these let's change that to um let's try 40 by 40. change the height and the width it to 40. right then let's do the same thing for both of these change that to 40 then we're gonna change the height to also 40. all right it's actually a fit well yeah okay so my flag fits well right there all right then we're going to create a variant of this just click on the variant icon there so actually i have a variant of that okay before you do that just click ctrl z before you do that we're going to first type in some text i'm going to type in the text uganda okay that represents the country we're actually talking about that's going to be the first country adjust the text to 40 20 actually all right that's looking okay then we can create a variant of that right so in the next variant we're going to change the color of the rectangle to light blue all right so we just want to make sure when i use the hovers over the rectangle to change color then in the second one i'm going to change the text to white okay i think that looks fine all right then we're going to create a duplicate of this i'm going to create a duplicate of that by holding alt we're creating another component and also creating a third component so these are components are going to represent the two different countries remaining okay so for this we want to change the text to you united states i think that will work that's fine and i'm going to change the flag okay just make sure it's centered okay so we're gonna change the flag to the united states flag okay so you have a duplicate of that i duplicate using holding alt all right change this text to united states all right so i'm gonna do the same thing in the last component i'm gonna change the text to india so let's just make sure we've changed the text of both to india okay then we're gonna switch the flags it's gonna place there the indian flag just make sure it's centered okay there we go they're gonna delete this flag and just make a copy of this holding alt and place it right there all right so we have our flags actually so next we're going to do some prototyping so i'm going to add some interaction to each component so let's say while hovering change to variant 2. actually that can be instant thing here i want to make sure when a user hovers over the default while hovering change to the second variant or that can be instant same thing here while hovering change to variant to right there we go that actually work fine so as you can see we can just test this let's drag out the uganda let's make it drag out the the component all right then we're gonna just test this let's see if it works it's just for testing bypasses i'm going to place it right there so i'm going to click on play just give it a second to load all right so as you can see when i use the hovers over this there will actually be a change of into blue and that's actually what you want to instead use the hovers over that that box it actually changes color all right having to see that you may have realized that actually this frame is better not being white it's may it may just need to just be gray a little bit so that we can actually have the other boxes being visible something like that yeah so we can get rid of this we've actually used it for testing enough so next we're going to give this rectangular fill just give it a white color fill all right then we're going to right click and select all then i'm going to create a component out of that all right so we're going to take this to the right take this to the right okay so inside this new component we're going to create a new variant that's variant too we want to make sure there's actually a change all right so next something we do next is we're going to go back to these country boxes we actually just created then i'm going to make a copy of each of the default mods make a copy of that then make a copy of that then i'm gonna place these together okay just make sure the actually just align together let's zoom in it's looking better just make sure there's actually no spacing left in between all right that's okay so we're gonna group this group selection they're gonna call this group countries oh my caps lock is on so make sure for every step all right so we actually have that group done zoom out we're gonna drag this entire copy we're going to place it right below the second variant okay now what you want to do is want to make sure that actually our countries that our country is actually placed into variant too i do that by just holding okay i'm gonna first close these all right so we have our countries right here we're gonna take it to the top all right so next one and make sure that we actually place them in variant two so this is variant two right here just wanna make sure that we actually drag it and place it right around there all right so when you do that it actually goes into variant two of this component that we actually just created they're not gonna position it okay so we're gonna do some prototyping so we're gonna prototype go to the default mode we just wanna make sure when user clicks on this when the user clicks on that it will actually change to variant too and that can actually happen instantly so inside variant we also want to make sure that let's let's actually first flip this i'm going to flip this to negative 90 actually to 90 side actually faces upwards shut the user that actually clicked on it and they actually just need to go back right so we just want to make sure when the user clicks on this i'm gonna add an interruption and user clicks on that actually it will change to the default that can actually happen instantly okay so gonna just test this to make sure it works that by holding alt then let's click on play as you can see laser clicks on that is actually a change and you can actually hover upon each country all right so that's actually working so next we want to make sure to know user clicks on a country that actually that country will actually replace this statement select country okay all right so for that to happen we're going to duplicate this three times we're gonna duplicate the first variant three times so gonna first click ctrl d actually when you do that you actually have a copy doctor creates a copy of that they're gonna click ctrl d again we're going to duplicate this thrice all right so we just need three copies that's enough so we're gonna duplicate the second the the second variant also three times there we go then i'm going to duplicate this i do that by clicking ctrl d that's actually looking fine then ctrl d one more time right so we've created uh three different copies of each so in the first copy right here in this stat variant we're going to change the text to uganda okay then i'm going to change this color to black so i'm going to do the same thing in this next one i'm going to change this text to uni knighted states okay just make sure the color is set to black sorry ctrl a make sure all the text is selected i'm gonna change this text here to india let's make sure that the text is actually set to black okay that's looking fine so also here we're gonna change this to uganda change the text to black change this text to united states change that to black okay that's looking fine and change this text to india then make sure that is actually set to black right so we actually have copies of each each which each variant that we actually need right so next now next the work begins alright so we're gonna go to this first box right here then you realize that we actually have different countries within so just go to the countries group in the first group so we're going to start with uh let's start with uganda here we're going to do some prototyping i want to make sure when i use the hovers when azure clicks on this uganda when user clicks on the uganda statement it actually takes them to the variant theory so i'm going to do that by just click click on this plus and drag okay so to actually happen when a user clicks so it actually recognizes that the talk should happen on click and that can happen instantly so there's something for the united states it will go to this variant for okay then to the india to the india when someone clicks on india it takes them to variant five okay that's actually looking fine so we're also going to do the same thing for this actually next category of countries so when aza clicks on uganda something happens it goes there united states india okay so actually i have to do that for actually each one of them inside the countries group goes to uganda united states india okay so in the last box right here let's zoom out user clicks on that it's uganda clicks on the united states text them right there clicks on india takes them right there to india okay okay that's actually looking fine let's test this so we actually just created a copy of this the copy is actually right there we have a copy of the default component let's test this let's see how it works there's actually a drop down when user clicks on uganda you can actually see the gander flag appearing but as you can see when the user clicks on this it goes back to actually the drop r when the user clicks on a country actually you can see it takes everyone back to the default now that's not some that's something we want to change okay now we're going to go back go to these next variants right here so now make sure to use that clicks on the up arrow this time okay we actually in this variant here then we actually working on the drop error so we just make sure when the user clicks on this drop arrow here instead of taking him to the original default to just go to variant three so i'm gonna change this to variant three no not that sorry about that just a little bit messed up this is actually a lot happening just wanna make sure this actually goes to that okay so the actual mini mod is actually set on just change this to variant three okay all right that would be much better and easier clicks on this upper arrow on the uganda statement it will just go back to the default right there okay i'm gonna do the same thing here this will go back to the united states icon right there not on drag so structure go to variant four okay and lastly when the user clicks on this upper arrow around the way it says india it will actually go to variant five all right so lastly wanna make sure i train actually inside this wanna make sure when the user clicks on the drop down right around there this will actually just take them to instead of going to the default tool it will actually just go back it will go back go go to this laser clicks on this down arrow it will actually go to the to the to this next variant so for this example we're gonna make sure this arrow takes a user to variant six where there's uganda to actually take a user to variant six so there is the united states the drop down arrow actually takes the user to variant seven all right well we have india just to make sure that any user clicks on the drop down this time you take them to variant eight all right that should work let's try it again suniza clicks on a country uganda junction actually sits action now finally working just as you wanted no errors okay that was a little bit complex i know there was a lot happening that's basically how to create a select menu in figma in those steps i've actually shown you otherwise if you like this video feel free to tell me below in the comments and let me know if it helped you and then if you're new to this channel i encourage you to join in by subscribing and then don't forget to hit that notification bell so that you get updates every single time i upload a new video thank you so much for watching i'll see you all in my next video bye [Music] you

Channel: Create Beautiful Things

Views: 38

Keywords: Figma Select Menu Animation, Figma Custom Select Menu Design, Custom select menu dropdown using figma, figma custom dropdown menu animation, figma dropdown menu, figma animation, figma smart animate select menu, select menu animation design using figma, custom select box using figma, figma select prototype, figma selection, figma custom select box design and animation, figma dropdown menu with variants, figma drop down menu, figma select menu using components and variants

Id: Z92j1VOOB9U

Length: 22min 40sec (1360 seconds)

Published: Thu Dec 16 2021