Figma Dropdown Menu with Variants | Figma Prototype Tutorial

in this video i'm going to show you how to create this interactive drop-down using figma let's get started so to get started i'm opening up a web design that i'm currently working on i'm currently working on this retail website design so at the top i have a navigation bar and then beneath that i have details for a specific item so this page is for this classic t-shirt where i have a description about it an area for someone to pick a size some details and they can add it to their shopping cart and then beneath that i have several reviews so for this prototype i want it to feel like a real application so right now if i were to go into the prototype of this app it doesn't feel like a real app because if i click on something like the drop down menu it doesn't do anything so i want to add interactivity to this prototype so going back here i'm going to zoom into this area and so i want to add interactivity for this size selector so that way the user can tap on it and then a drop down menu will appear on the side i already designed the drop down menu for this page so initially i have the state when it's closed and when the user opens it i want several options to become visible and when the user is on top of an option i want it to change color for the hover state so these are the states for the drop down menu that i want to add to my prototype i want to create components out of these elements so that way it's reusable throughout the project so for this first element which is when the drop down is closed i'm going to go to the top here and click create component now if you're brand new to components i have an entire tutorial that goes over this specific topic so i'll link that video in the description below now once i do we can see that the icon over here has changed so we know that it is definitely a component and on the side over here we have different properties we can add to this component so a new feature that recently came out is the idea of variance so i'm going to use this for the project so i'm going to click over here to add a new variant and a variant is a new way to group and organize components within your project so instead of having five different components for this drop down i'm going to organize it all together to be under one component with different states so once i click that i want to add a variant we can see that these different properties are now added but you can completely customize this depending on the component and the style attributes that you want to add so i'm just going to take this and move it up a little bit so we have this original component up here and if i double tap into it i can modify the properties of this so the initial property for this element i don't want it to be property one and then property two because that's not really descriptive as to what is happening for this component so that first property i'm going to replace it with the word state because it is going to indicate whether the state is open or closed and for the second property i'm going to add the word hover because i'm going to define these elements whether or not they're in the hover state so now i modified the values for this first element and the second element was added because as soon as you add a variant it's going to add another element to the page because you can't have one component with a variant there has to be different components within it but i don't want to have two duplicates of the same thing i want to utilize what i already designed over here and for this element i'm going to copy and paste all the elements within this container and i'm going to go up here and i'm going to paste it so now we have the design up here and so for this element i'm going to modify its properties so here i'm going to write state and i'm going to set it equal to open then i'm going to add a comma and then i'm going to add hover and i'm going to set that to none because it is currently not in the hover state so now we can see that this area over here has changed because i have a state and it's open and the hover is set to none so now i have this element on the page and i'm going to add a few more for the hover states for the small medium and large states so now with these elements added as variants i'm just going to slightly modify the design of it a little bit so i'm going to select that rectangle under small and modify the color of it to match the color of this state and then i'm going to do the same for the medium and the large state so now i have it completely designed so we can get rid of these other states now within here i just have to update the names for the elements so in this state the drop down is open and small is in the hover state so here the properties is that the state is open and the hover is none but that's not true the hover is on the first element so here i'll just write first the second one i'm going to click on and the hover state i'm going to change it to second this one i'm going to click it and set the hover state to third now the cool thing about variants is that these are all under one component so instead of having five separate components for this it's really all under one element so if i go over here under assets over here i have drop down and so i'm going to click and drag a drop down on the page this seems to behave like any other component within figma but now the cool thing is that we have this other option within this inspector panel on the side now i can easily modify the state and the hover effect for this element so under state i can click it and switch it to opened and now it is in the open state and under hover i can switch it to the first element and now the first element is in the hover state so this is a really cool way for you to organize all of your components in one place so now that we have this set up really nicely let's use it in our project so i'm going to go back to where that drop down is placed and i'm going to swap the instance of it with the one that i just created as a component and now i can see that i have these different states i can switch it to the open state and i can easily modify these values so instead i'm going to go back to the closed state and right now if i go to the prototype tab and i try to swap it with the other variants figma does not give me that option yet in the interaction details so i'm waiting for them to update this feature so that way you can easily swap between variants but the way that i've been doing it so far is i'll create a separate frame on the side with each variant so over here i'm going to add a frame and then i'm going to copy and paste that within the frame and so i'm going to have one just for the open state so here i'm just going to call it drop down open and then i'm going to add three more states for this and so for this one i'm going to say it's the first element in the hover state this one is the second element in the hover state and this one is the third element in the hover state and now because i have these variants all linked up i'm just going to click on the element and i'm going to modify the state of it to the open state for this one i'm going to say that the state is open and the hover is on the first element and so on so now that we have all the elements lined up i just have to link it all up so i'm going to zoom into the project and here under this drop down i'm going to click on it and with the prototype tab selected i'm going to add an interaction and on click i want this overlay to open so here i'm going to say on click i want it to open the overlay of the drop down open and so now i can add some other properties so i'm going to select close when clicking outside of this element and i want the animation to be instant now within here i wanted to swap between the different frames and the different overlays depending on if the user is hovering over a particular element so here for this open i'm going to click on it and first for the small rectangle i'm going to click and drag and i'm going to say that i want this state to be visible when it's in the hover state so instead of saying on click i'm going to say while hovering and while hovering i'm going to swap the overlay with this one for this one i'm going to click and drag it over and i'm going to do the same thing while hovering i wanted to swap the overlay and the same for the large element as well now when someone taps on this element i actually want it to be dismissed so i'm going to click on this element and i'm going to add an interaction of a click interaction and so when the user taps on it i'm going to close the overlay this is how everything's linked up to this element so i'm going to go back to my prototype i'm going to click on this element and now the drop down is visible and when i go over each element it is in the hover state so this is how i link up elements using variants within figma again it would be a great feature for them to allow you to swap the elements within this interaction panel on the side i think that would be a really great addition to this so that way i don't have to create other frames or overlays on top of this element in order for it to work but now because these are all components i know i can easily reuse this throughout my project in different places and also modify the data if i need to so there you go that's how i created this drop down using figma please let me know if you have any questions on the topic and subscribe to stay up to date with my latest content thanks for watching

Channel: Angela Delise

Views: 77,597

Rating: 4.9357343 out of 5

Keywords: figma, figma dropdown, figma dropdown menu, dropdown menu figma, prototype figma, figma prototype tutorial, prototype figma tutorial, variants, variants figma, figma variants tutorial, figma variant dropdown, figma variant state, figma variant property, figma variant properities, figma variant props, variants figma tutorial, variants figma explained, dropdown figma, dropdown figma prototype, figma animate tutorial, animate figma tutorial, animate figma, figma variant animate

Id: hZd0s8yN0Io

Length: 11min 12sec (672 seconds)

Published: Mon Mar 08 2021