Figma Project: Build a Navigation Menu with Components

hey this is Joey from Verta health welcome to another figments tutorial in this video we'll be using the following skills to build a website navigation bar with a drop-down menu text tool and fonts components including instance swapping constraints the color picker layout grids and prototyping if you're not familiar with these features or if you just need a refresher be sure to check out our other videos a common question from new designers is asking how to build drop-down menus inside of figma in this tutorial we're going to cover exactly how to do this by recreating the vertical navigation bar first we need the main navigation element that belongs to our navigation bar some of these elements will expand with a drop-down menu next we'll need the actual menu part of the drop-down menu however this is actually made up of multiple smaller elements we'll call these smaller elements list items lastly we'll also want to consider the different states of our elements we can see that the first item has a white bar at the top indicating an active statement then we have two of the versions of these elements one that contains a small down arrow indicating that there is a drop down available and another without this with the menu open or expanded we can hover over one of the list items to see the hover State now that we've broken our menu down into smaller consumable elements let's bring in some screenshots of the current home page to use as references in for color picking let's start designing we're building a minimal navigation bar so we'll start with some simple text elements let's open the text tool and click and drag to draw out a text element and add some generic label text next let's clean this up by adjusting its properties including dimensions typeface size alignment and more our navigation bar will have multiple categories within it meaning we'll want to reuse this text box we just created so let's go ahead and make it into a component and then rename it to nav item our components frame is currently toggled to not be visible but the light text is a bit difficult to read so let's darken our components frame to help out a bit we'll change this back a little later with our text box now a component will adjust the inner text element again we want to build some padding or space between the text element and its continued frame into the bounds of our component let's remove 16 pixels from each the left and the right sides of the text element and 15 pixels from the top and the bottom next we'll add two elements to help us build out our state's we identified earlier we've already created the first default state but now we have two more active and drop-down lets out a small white bar to the top of our element for the active State next we'll make a small down arrow drop down state by creating a triangle from the polygon tool and then using the shortcut Shift V to flip it vertically now that we've included all three states we can just toggle them by toggling the visibility of the extra layers when building components it's important to think about how they will be used in the future for something like this menu element it is possible that we may have longer and shorter labels in order to preserve the padding we just added to the component let's set the constraints of our text element to left and right and center we'll also set the constraints of our drop-down arrow to right and center and the constraints of the active bar to left and right and top since we've done that if we have an A vitamin with a long label we can easily resize the component to contain it let's build the main navigation bar by duplicating this master component to create an instance and then duplicate the instance to create more copies we can then apply text overrides to the labels resize them as required and then we'll go into the menu and use pack horizontally to ensure that they are all aligned perfectly with all of these instances selected let's nest them inside another component by clicking create component and name it navigation menu now that we've finished building our navigation bar let's move on to the drop-down menu let's build our list item component in a similar way to our original component create a text layer with a label turn it into a component and rename it to list item / default modify the properties similar to how we did for the navigation bar and set our constraints however for these we want to ensure that we have a white background we mentioned earlier that we wanted to have two states for the list item component but we're going to take a different approach to creating these we'll start by creating an instance of our component next we'll change the text color to white and then change the background frame color to a blue let's use the eyedropper tool to pick these colors from our referenced image this looks pretty good but we have a problem right now this is only an instance of our original component but we want it to be a separate master component we can fix this by first breaking the instance which will convert it into a frame then we can make it a master component again and rename it to list item / hover you may wonder why did we create these two states as two separate components rather than a single component we did this because the difference between the default and hover States include changing the text color which would require us to have multiple text layers to maintain one blue one weight if we make two components we can use instance swapping to preserve the text overrides but in order for text overrides to work we need to rename the text layer in the layers panel so that the name is always consistent across all instances if you're still confused don't worry we'll demonstrate this later we can now use our list item components to start building our drop-down menu before we do that let's head back to the vertical website we can see that there are two different drop-down menus how it works with five list items and partner with us with only two how do we build a single drop-down menu component that can solve for having a variable number of list items let's give it a shot we'll create a list of our components since list item / default is our default state or the state that appears most frequently we'll only use those for now first we'll hold down alt option + click and drag to create an instance below second we can use the keyboard shortcut command D to duplicate the instance multiple times while maintaining the same distance will create more duplicates than we think we'll need third we'll click and drag to select all of the instances and then use pack vertically to align everything fourth we'll create a new component from this list a name a drop down menu fifth we want to change the constraints of each of the list item elements to change how they behave as we edit the drop down menu component right now if we try and resize the menu our list items become distorted we can select all of the items and change their constraints to left and right on top now when we resize the menu from the bottom our list items are no longer distorted lastly we'll change the clipping behavior of our drop down menu by clicking clip content from the properties panel besides all of the list items at the bottom which allows us to customize the length of all of our drop-down menus we're almost done but there's one more problem I see here as we resize this component to add additional list items it becomes difficult to determine exactly where we should stop resizing if we make it too small then the last list item will have enough white space on the bottom if we make it too large then it will have too much white space we want to make sure that we will always have precise designs so we're going to solve this by using a layout grid we want this to apply to each of our list item components so we're going to apply it to our master component with our master selected we'll go into the properties panel and add a layout grid by clicking the plus icon because our component will be organized in rows that are stacked and resized vertically we'll change our layout grid type from grid to rows next we'll be resizing from the bottom so we want our grid to be aligned to the top because that will be static I think that it could be helpful to have a line that also shows us the center of the list items not just its top and bottom boundaries so let's change the count to 3 we know that this component has a height of 70 so let's divide that in half for our height value 70 is an easy number to divide in half however if you find yourself doing complex calculations you can also type equations in this field will type 70 / 2 telling Figment to divide 70 by 2 to give us our desired value of 35 lastly you will change the gutter to 0 let's go back to our drop-down menu component and see how we did each nested instance in our component has our layout grid applied and if we resize it we can perfectly align to the grid lines and ensure that we always have consistent whitespace and that's how you build it flexible drop-down component that's ready to be published to your team's design system now it's time to put it all together I have a screenshot of the vertical home page here without the navigation bar so we can build on top of it and see how we did first let's try our navigation menu component from the components tab and place it near the top of the page we still have a dark grey background on this component let's go to the master component and toggle the parent frames visibility to hide this we also want to simulate the behavior of expanding and collapsing the drop-down menu so will we use prototyping for that in order to prototype we need to make sure that our screen is wrapped inside of a frame we can select all of our layers and use the shortcut command option G to frame the selection and we can see that we now have a frame in the layers panel to continue we'll duplicate the frame so we can build a version with the menu expanded we can return to the components tab and drag in an instance of our drop-down menu component the menu item how it works has five list items on the website so let's resize ours and change the labels to match this looks great let's add one more screen to show the hover state by duplicating this frame and then using instance swapping from the components tab to pull in a copy of our list item / hover component if we hold down option and command as we release the instance over the component we'd like to swap will automatically swap the States notice how the list item still says testimonials and doesn't just have a generic label this is what we meant by preserving overrides earlier in the video the last thing we need to do is hook these pages together through prototyping will click the prototype tab at the top of the properties panel to enter prototype mode then we'll start linking our screens together so that when the user clicks on how it works they'll be sent to the screen with the expanded drop-down menu just a few more connections and we're ready to go with all of our frames connected let's preview our prototype in presentation view let's review what we've learned today it can be helpful to have reference images and screenshots inside of your figma file especially when picking colors when building complex elements try breaking them down into sub components to make tasks more approachable consider the desired behavior of your components and make sure your constraints are set appropriately as long as your text layers have the same name text overrides will be preserved when you swap instances layout grids can help you design precisely

Channel: Figma

Views: 295,782

Keywords: figma, ux design, ui design, product design, prototyping, components

Id: izyyWf6Ukmo

Length: 11min 34sec (694 seconds)

Published: Tue Jun 12 2018