Create an Interactive App Navigation Menu in Figma

hey everyone in today's video we're going to be creating an icon based mobile app menu in figma so it's something that you can click through it's interactive it has changing states we are using smart animation to make this look really interesting and overall pleasant to interact with if you'd like to download the source file for this make sure to check the link in the description it will take you to my store and now let's get into the video and let's see how this is created first things first we need to create a mobile app frame so i'm going to use the frame tool by pressing f and then clicking the iphone 11 pro in this right part of the screen so we get this frame right here first of all we need to define the dimensions of this menu so um if we launch the prototype now we get not surprisingly a blank white screen sigma shows a whole phone a whole iphone so that's really good to uh to imagine the final result we're gonna use this to let's say create a rectangle the menu container and just checking whatever fields are right how might we go for like 70. this is very useful for simulating the final result it's gonna be rounded so let's just see how the shape fits in the overall layout and i think this is i think this is good i think this is this works well for this phone for this particular size of our screen and now we can get started with with the rest so i think if we use the text tool now and let's say the menu will contain four pages the first one is going to be home the second one is going to be items you know just making this very generic then we can do like messages and finally profile so these are the four items this menu is going to contain so why don't we try the one that is currently out active is going to be items we're going to choose a font that we like so let's go for avenue x demigold and the size could be like 18 pixels maybe 20. so we could get we could have like four icons only one is active right now so this is what you'd get you'd get a menu where you'd have like four icons one of them would be active at a time and then the rest would have their their text hidden let's start building this so we have these four circles that are 32 pixels which means the icons should fit into a 32 pixel frame so i'm gonna create a frame for icon or an icon and let's just put a placeholder right here it's gonna have just a stroke and it's gonna be gonna take up the whole frame right perfect we're going to turn this into a component and we're going to call this component icons and these icons they're going to have four versions so that's four versions right here and the versions are going to be corresponding to these items so we're going to go for home items message messages and profile right so you will have home items messages and profile i'm just very quickly going to put some numbers within these icons so that we can see which version is that um this is gonna be the first one it's gonna be the second one uh third and fourth and also we're gonna take this text and then go to assets and this little icons component we're gonna use that over here i will be removing the oops i will be removing the background of these icons like so and select these two and add an auto layout this auto layout is going to be called menu item and this menu item is going to have 18 pixels padding horizontal and a similar padding although a bit smaller on the vertical axis also it's going to have a fill gonna be gray like this and it's gonna be fully around it which in this case means 32 i'm gonna duplicate this auto layout like so and i'm gonna rewrite them to their corresponding names so we have home items messages and profile this also means we have to change the icons so items that's gonna be items messages that's gonna be messages and profile it's gonna be profile notice how it corresponds to these four so we have this one is this variant of icons is named profile so when we select profile from this drop down menu from the component instance we get a matching result right now i'm going to select all of these auto layouts and press shift a to add them inside another auto layout and this auto layout is going to be called menu so this is our menu but right now it looks very very weird so we're gonna add some padding and fix that we're gonna have like five six from each side it's gonna have a background it's probably gonna be light gray like this and it's gonna be fully rounded so let's go for like 60 or whatever we're gonna now select a color for each of these items so for home let's go for let's go for a yellow like this for items that's going to be blue for example messages that's going to be red a profile that's going to be i don't know green but since this these colors actually look absolutely horrible i'm gonna get inspired with some cool themes so i downloaded this color theme from color.adobe.com if you're an adobe user i strongly recommend using this whenever you are unable to create a good-looking color scheme which is me all the time i really like this why don't we try and replace these colors with ones we have on the screen right now so yes this is way better profile all right we could use this one final remaining color and say that that's gonna be the background why don't we right so the next step would be turning this menu into a component like so and then i'm gonna just select the black color we have on the component right now and turn that into white right and also the background that will be white as well next step would be defining the menu states which means adding a variant and then two more so we have four of them in total and actually one more just so that we have one as a default variant in the first one we're going to be hiding all those layers that are not going to be visible and then also i'm going to be turning off the fills for these remaining menu items but we need to somehow show that the icons are there which means we're gonna select select the second item and then go to selection colors and sample and to change this white color in the selection colors from white to the corresponding color same here and the same here right so this is what we get now we're just gonna have to repeat the process three times you get a similar result for each of these variants hiding home messages and profile this one hiding items home and profile this one and then finally hiding the first three on the very last one and then selecting the first menu item in all of these set the fill to zero and then selection colors and sample that from here and number two turn off the fill sample the color from here number three turn off the fill set the opacity to zero and selection colors and put the third color and finally turn off the fill and sample the color to replace the white one right here so here it is each one of those has a different menu items set as active and we're gonna have to now place that just to test if it actually fits on the screen so i'm gonna select the largest one put an instance right here right we've got our first obstacle our first problem it doesn't fit on the screen you we need to have some margins from the sides how do we solve this this probably means we would have to decrease these margins on these menu items so i'm going to select all these variants press enter and then edit these margins so when we go for like 14 and 12 and then just shift enter to select the parent elements and go go for four here so we've drawn the the margins right now the largest variant it fits on the screen quite comfortably so we can we can keep that one maybe we could even decrease the margin to two to make this look really to save a lot of space we're going to rename our components our variants so the property one is not going to be called property one but it's gonna be called menu let's say active item right the first one that's going to be called none there is no active item or just say not applicable the first one is going to be home the second one is going to be items the third one is going to be called messages and the last one is going to be called profile i'm just going to rearrange these a bit like this it's going to say test screen now we have to create the icons these numbers don't serve well as an illustration of these menu items when it comes to home i'm going to create a very simple home icon i'm going to use rectangle add a stroke set this to center and then add another vertex remember all this needs to fit within 32 pixels so i'm gonna move that over here you can see that it instant instantly updates everywhere and actually let's let's fast forward until i create all these because this tends to be very boring so i'll see you once these are finished right so i created a bunch of icons and by the way if you're interested in icon design you can go and watch my playlist on icons and if you'd like to see more icon designs let me know in the comments alright so there's one problem all these icons are black and that is not the correct way in this context so i'm gonna just select these menu menu items and then black icons that i have here in selection colors i'm gonna turn that to white actually i'm gonna select the d all these variants and turn that to white as well but then again we have the same problem we already had and that is um this which means again selecting doing this once again but never mind it is very quick so that is no problem take us like 20 seconds right so we have all the icons we have we have them in the right place with the right color and now we actually need to get to the prototyping this means creating four screens the first screen that's gonna be called home second one right is gonna correspond to these items the second one is gonna be called items third one messages and fourth one profile right we're gonna create headlines so that means home that's gonna be actually sitting here if we test that how that layout feels like so this is our home i'm gonna just set this to overlay right so this is home this will be all the remaining ones which is items messages profile right and um right now we this doesn't correspond at all so i'm gonna i'm gonna set this one to home this one to items this one two messages just let that be and then this one this last one profile i'm gonna center all of these i'm gonna actually remove the test screen remove these things move that closer and now we have to select prototype select each of these icons and then then set the location there i they are going to in the case of items that's going to be items very important we need to keep smart animate 300 milliseconds ease out then this one right here that's going to go to home also smart animate um messages going to messages and profile going to profile messages profile so all of these three are set this one is also all set this one's going to home items and profile finally home items messages right so each of these icons on each screen when they are not active they're going to lead to their corresponding page it created this nice network of from an interactive menu and we're going to test this so we are at home we click on items messages profile and it works so this is the final result we have a menu with icons that we can click through one small change these interactions i think could be a bit faster why don't we change that so i'm gonna select all of these tabs mixed but it's gonna take 100 milliseconds this one is also gonna take 100 milliseconds all these also 100 this should speed up the transition and i think it's better right so we have this working menu where you can click through and navigate through an interface like this um you can see that if you want to show the badge you know if you want to show the text of the menu item but at the same time you want to save some space this is the way to solve that challenge so thanks for watching again if you'd like to download this source file if you'd like to reuse this in your own project check the link in the description and leave a like if you'd like to see more similar content i do a lot of tutorials on ui and ux design in figma so if you like that definitely go and check out my channel thanks for tuning in and as always i will see you in the next one

Channel: Mavi Design

Views: 68,751

Keywords:

Id: 5XZ-X5ewo9c

Length: 14min 54sec (894 seconds)

Published: Mon Sep 12 2022