Figma tutorial: Auto layout navigation menu

in the previous video we created an auto layout button from a single text layer now we'll apply the same methods we learned plus some new ones to create a navigation menu if you enjoy this tutorial series on auto layout subscribe to our channel to be notified of the next video in the series and leave us a comment on what to cover next let's get started start by creating a text layer that says list item and add auto layout using shift a then apply a text style the gray 400 color style turn it into a component and rename it to nav list item now create three instances of the list item component select them and use shift a to add auto layout to create a horizontal row of items nesting auto layout frames within other auto layout frames helps you create powerful and responsive designs the distance between items before adding auto layout is automatically set to the space between item's value but we'll adjust this to 16. figma set the direction property for the list of list items to horizontal because they were already duplicated into a row you can change to the vertical direction by clicking the down arrow icon to easily switch directions but we'll leave this as horizontal finally rename it to nav nav menu and turn this into a component if we actually wanted four list items in our nav menu we can select one of the instances and use command d to duplicate it this will add an instance into the auto layout frame which will grow to fit we can also add brand new elements like the button we created in the last video to do that we'll open the assets panel and create an instance of our button as we drag the button over the navigation component it will become transparent and figma will display a blue drop indicator release the click to add the button to the component which will automatically resize to fit the button we were a little clumsy adding our button in the middle of the nav menu so we can select it and use the arrow keys to move it into the rightmost position and then we'll make this a little bit more realistic by overwriting the labels to the actual values we need for our app and we'll also update the button to say sign up this version of our navigation includes a button to sign up but when a user already has an account and is signed in we would want to display their account avatar and also hide the sign up button here we have a 40x40 avatar component we'll add an instance into the nav menu when we don't need the avatar or don't need the button we can hide them within an auto layout frame there are two primary ways to hide items the first is by setting their layer transparency to zero percent from the right side bar or by rapidly double tapping zero on your keyboard using this method will preserve the space that the item would otherwise occupy tapping zero a single time will return the layer to a hundred percent opacity however you can also toggle the layer visibility which you can do from the eye in the layers panel or in the layer section of the right side bar or by using the shortcut command shift h when using this method the auto layout parent frame will shrink to fit the visible items both methods can be useful in different scenarios so be sure to keep them in mind we already have a logo component prepared for us so let's drag an instance of that then create an instance of our navigation component to get a copy of this component duplicate the full tripma file linked in the description our navigation menu header should have the logo on the left edge and the navigation menu on the right edge select both objects add auto layout then add a white fill to the frame notice how both components were automatically aligned to the top to fix this select the auto layout frame and open the alignment flyout menu in the center is an interactive diagram and when we hover over it a preview of the other layout options are displayed click to confirm and change the layout then rename this full header to nab nav header as we updated each of these labels the entire width of our navigation menu changed with each and every keystroke but that's not what we want otherwise every time we tweak a value add or remove a list item the nav header would change in size we can fix this by changing the resizing of the navigation menu from hug contents to fixed width this will enable the width property field on the right side bar where we can enter 1440 the width of the macbook pro frame preset we're using in our design now if we edit labels of our list items the overall width doesn't change it's fixed but all the items are squished against the left side with the parent frame selected look at the alignment icon in the auto layout section of the right side panel the icon displays a preview of the current alignment settings click on it to open the alignment fly-out menu we want our logo and we want our navigation to go their separate ways and give each other some space for that click the menu below the diagram that is currently set to packed and change that to space between when we set to space between all empty space not occupied by the objects in the auto layout frame will be distributed between the child objects our example only has two items so they push to the edges of the frame if we added more items the space would be distributed between all of them this will also change how the previews in the alignment diagram and the icon are displayed while we're here we'll add padding to wrap up this navigation menu header 24 on the left and right and 8 on the top and bottom lastly let's turn this into a component and use it in our designs let's see how that works first create a macbook pro frame use option 2 to open the assets panel create an instance of the navigation bar and then use the alignment tools to align it centered at the top since it has a width of 1440 it fits perfectly for a macbook pro frame size but we need this to flex to many different screen sizes if we resize the frame the nav bar isn't responsive to fix this we'll select the nav bar and look at the constraints and resizing section of the properties panel this is a visual representation of the resizing property of the auto layout component currently the width is set to fixed but we want to change this to be constrained to both the left and right of the parent frame now as we resize the parent frame our navigation bar responds dynamically now the same menu could be used for a smaller tablet design nice adding new items to auto layout frames is easy and using the space between option can help create evenly distributed layouts in just a few clicks if you enjoy this tutorial series on auto layout be sure to subscribe to our channel to be notified of the next video where we'll combine multiple auto layout frames to create a flexible card component you can also get a copy of the tritma design file from the video description where we include variants for hover and active states for the nav items and navigation menu designs for desktop tablet and mobile we'll see you in the next one

Channel: Figma

Views: 89,413

Keywords: figma, design, layout, product design, auto layout, tips, tricks, UI design, ux design, Auto, auto layout Figma, Figma Autolayout, Figma tutorial, tutorial figma, how to use auto layout, how to use autolayout figma, figma autolayout tutorial, tutorial autolayout, autolayout tutorial, app design

Id: bh98SF7OjUk

Length: 7min 38sec (458 seconds)

Published: Thu Jan 28 2021