Create a Profile Dropdown Menu in Figma (Interactive Prototype Tutorial)

you're probably familiar with this layout where you have a website and in the top right corner you get something like a profile picture with a drop down in this video we're going to create an interactive component that can be used on such websites we will be creating basically a drop down menu where you can click on your logo on your profile picture and you get this expansion of elements and options if you're here mainly to download the source file for this and use it in your own project make sure to check the link in the description that will take you to my store and also if you're new to figma and would like to learn figma from the very basics i have a playlist for that so go check that out also in the description all right so let's get started with this with this component i'm going to prepare a test frame that's going to be 1600 or 1400 by 1000 and i'm going to call this test frame and also here is here is my logo on logo of this channel that will be representing a profile picture of a person we have to define the height of the header menu right so let's say that if this were a website how tall would this area be i think zooming in to 100 i would say that 80 pixels or 90 pixels something like that works works fine let's go for 90 pixels all right so that's very important for us to determine that which means the logo would have to be approximately 60 pixels right so you would have like the header menu area and then there's your logo which means we know there's going to be a 90 pixel tall frame that's gonna be the menu container and within which there's going to be the logo right 15 pixels from each side then you'll have an arrow like this not nine pixels but you aren't this big so this is kind of what you'd uh see right so i'm gonna just save that here for reference and we will be at first com actually completing the very expanded version of this of this component so that would mean let's say that you'd have when you actually opened this component you'd get your profile picture you would get your name that would be like 20 0 you would get this with the option to collapse that menu back right so these are the elements that would be kind of found on the first row i'm gonna select all of these and add them to an auto layout and i'm going to call this let's say title area and it's going to have some padding it's going to have a fill it's going to be like gray and it's gonna have some rounding like this i think i'm gonna add some more padding to the right side and increase the spacing between these elements also i'm gonna turn this to make this gray now that i think about it we probably should make this wider but we also don't want this arrow to be kind of go together with these two elements we want this arrow to be on the right side at all times which means we have to enable absolute position for this arrow then align that to the right and center right and kind of select a distance proper distance which means that now it's a part of the auto layout but you can do this and keep the arrow right here right at all times so apart from the title area you will also get of course the actual menu options so i'm just gonna copy this and say that we're just gonna use some placeholders so i'm gonna say option one gonna be bold as well but slightly lighter we're gonna add auto layout and call this um option and then add a stroke but stroke is gonna be only on the bottom side right it's gonna be only on the bottom side and it's gonna have it's gonna be quite light actually um i would go for padding of 20 pixels from each side and then duplicate this select both of them and again add an auto out this also is going to be called options wrapper and we want these to extend whenever we extend the options wrappers so i'm going to select those and click fill container right and also i'm gonna set the spacing of these elements to zero so we get something that behaves like this right it doesn't matter that this overlaps but the main thing is that these elements respect the size of their wrapper and we can duplicate you know options uh we can create i would go for three options and call this option two and option three we maybe want to add some horizontal horizontal padding like this and then and add one more row that would say help and log out these are going to be a smaller font so i think we should go for like 14 we're going to make this all caps and heavy right and i'm going to select both of these add auto layout and set the spacing mode to space between right so i'm going to call this alternate last row and this last row is going to behave like this right makes sense right i'm going to also add some padding so 20 from each side i think and just set the width to same as the option options wrapper all right so this means we would get a menu that has three options and then help and log out now let's say let's take the last row the options wrapper and the title area and add all of that into a new auto layout this new auto layout is going to be called profile drop down menu because that's what it is no spacing and also click on that menu press enter and then set all of these to fill container on the horizontal resizing note the vertical resizing right now this happens right select this again add white fill add some round rounding right and also probably add some padding so like 10 and 10 maybe so now we get this this is what we get we're gonna we're gonna set the background of this title area to completely white so that it blends in nicely with the remainder of the menu and it's you know feels as if it belongs together let's do let's focus a bit on these options i think we could improve the look of this by uh firstly removing the horizontal padding right so that it nicely aligns with all of these elements or actually set that to 20. so right now what happens is you get this nice alignment of all these elements at the same time i'm probably gonna set the bottom padding of this title area to none so that this spacing you know keeps repeating and it's predictable because when you add 10 you can see that this this this spacing right here is bigger than one here and here and here so we want to make this look more consistent right so i think this looks better um i think these lines are too strong right so i'm gonna play around with the stroke opacity so why don't we set that to like eight you know really really subtle and also this log out button i would make that red maybe underline by pressing command u help could be like greenish color or maybe gray and i'm going to add some letter spacing to these 10 and also these things right here that's going to be black i'm also going to add just five pixels of left side padding to this title area just to make this a little bit more aligned and i think that at this point i think we are ready for prototyping we are ready for turning this into a component which means selecting this and then clicking this icon right here to create a component this component is going to have a property and that property is going to be called state and this state is going to be called expanded right um not only are we going to get this state but we also need to create something like this that will be actually shown in the top right corner of our hypothetical website i'm gonna move this over here and then just click this plus icon and call this state collapsed so we have one property called state and one state is called expanded and the second one is called collapse it doesn't look collapsed though so we have to go and make those changes to make this look collapsed first of all since this is an auto layout if we hide an element the height of this whole thing is going to collapse as well so i'm going to hide the options wrapper and then i'm going to hide the last row and you know this is what we get um we previously removed the bottom padding of this title area and to make this centered we're gonna have to add it back so instead of zero on the bottom padding it's going to be 10 again right looks symmetrical now and finally i'm also going to hide the mavi design title and then finally i'm going to take the whole thing and just collapse it like this all right now this arrow that's gonna be rotated it's gonna be fully opaque and this title area pardon me that's actually gonna be we're gonna remove these paddings some of them to some extent to fit this whole thing inside a 90 pixel menu uh container right so we we said that it's going to be 90 pixels this whole thing needs to fit inside this right now it's 100 pixels tall and this means we're going to remove the top padding and the bottom padding right now this whole thing is 80 pixels and also from the left side there's gonna be a tiny bit of padding let's say five pixels and the right side that's gonna be we're gonna actually have to move this arrow towards the right and then like this right awesome so we have our collapsed state we have our expanded state but we could also just to make this more interactive and pleasant to interact with in general we could make a in between hover state so when you for example um when you have this menu right here this collapse state we could make uh like a highlight let's say around the area that would be visible when you hover over it would kind of show that hey yeah you know this is you have hovered over something interactive you know so it has a function so why don't you try and click it to nudge the user so this means selecting this state and then adding a variant oops we have it all the way over here and we're gonna call this state hover this hover state is gonna have a background that's slightly darker which means let's say this this title area doesn't need to have its own background so i'm going to remove that from here from here and from here as well because the container has you know the fill so not necessary now we need to define the interaction so i'm going to go to prototype click this little area right here and then click and drag and connect that here i'm gonna say while hovering change to state hover right smart animate 100 milliseconds additionally from the hover state connect that to the expanded state and say that on click change to state expanded and then finally from the expanded state when you click the title area i'm going to again lead that back to the initial state like this right on click change to state class all of those need to be smart animate in order for the animation to take place you can see that we've created a nice loop from here we are going to the hover state expanded state and then from the expanded state we return back to the default state the collapsed one right now we want to add this to our test frame so i'm gonna go to assets and then profile drop down and place that here right i'm gonna center that against the background and move that to the right and add some padding and tying this to the right and top side of the screen while also making the header area white and the background dark gray or slightly you know light gray actually just so that we can see the difference clearly and also i'm going to create just a very quickly placeholder for a logo you know this is just to imitate the website right so you have a website with a logo and with your profile picture right here your profile menu let's test this out click here and this is the result we can hover over the menu click it and it expands and we can click it again and it collapses there is one thing i don't like i think these animations are way too quick so this expansion and this collapse i think that's way too quick so why don't we address that and go to prototype and say that this is not going to take 100 milliseconds but like 300 milliseconds at least and this one as well and let's test that again reset the prototype all right i think that's better i think that's better when you click it takes a little longer to expand which is exactly what we want and one last thing i think we could differentiate the menu against the background so i think why don't we add a shadow right we could add a shadow let's just quickly do that here so effects drop shadow big blur huge blur actually moved towards the bottom bigger opacity then we copy this copy and paste it to all of these three elements these all these three variants paste we don't want these to be visible uh the shadow to be visible so i'm gonna select both of these and then go to drop shadow and set the opacity of the of the black color to zero so it is there but it's just hit and then remove this shadow from here and actually i think we're gonna have to place the place the component again that's that's okay and right top and let's launch it again all right so here's the result we hover over the menu it highlights we click it and it expands like this and then we click it again and it collapses for the final you know deployment of this i think i i would adjust the font sizes and maybe uh align both of these together so we can do that right now actually i'm just going to take this arrow and move it few pixels down you know just a tiny bit looks better right so um this is what you get everything's animated and there's a shadow to differentiate this window from its background so again check the link in the description if you'd like to reuse this component in your own project and leave a like if you'd like to see more similar videos thanks for tuning in and i will see you in the next one

Channel: Mavi Design

Views: 6,426

Keywords:

Id: mDLQ3Y4JFk8

Length: 16min 58sec (1018 seconds)

Published: Mon Sep 05 2022