Create a Bottom Navigation Bar in Figma

Bottom navigation bars are a common design pattern in mobile phones today. They allow users to quickly switch between different pages or functions in a mobile app or even a tablet application.

In this tutorial, designers will incorporate the following Figma properties:

• Auto Layout
• Components
• Component Variants
• Component Properties

In the end, designers will have created three components:

• An icon component variant
• A menu item component with icon, text, and state properties
• A flexible bottom navigation bar component

Icons

This tutorial combines multiple communications tools in our bottom navigation bar, using the Google Material Icons library. Designers can use any icons of their choice that are uniform in size and design, with dimensions set to 24 pixels in width and height. In the tutorial, there is a set of icons related to mail, phone calls, video chat, contacts, and text messages.

Let’s turn each of these icons into a component. To turn an icon into a component, click on the icon, right-click, and select "Create Component."

Depending on the device, use ⌘-⌥-K (command-option-K) on Mac or Ctrl + Alt + K on Windows to turn an icon into a component. Follow these steps until each imported icon is its own component. If the icons don’t already have identifiable names, provide them with recognizable names for better organization.

Icon Component Variants

Now that there is an established set of icon components, let’s turn these into a component variant set. 

Do this by selecting all icons and pressing "Combine as variants" in the Properties panel.

Label

We have our component set of icons all ready to go, let’s shift our focus to the label. Each of the menu bar buttons will have an icon and label below it. To create a label, let’s use Figma's text tool.

To use the text tool in Figma, click on the “T” icon in the top bar or press the "T" key on the keyboard. Once the text tool is selected, click anywhere on the canvas to see a blinking cursor for text input. Type the word “Label” on the canvas, then change the font to Roboto and the font size to 12px.

Menu Item Component

Now that there is an icon component and a defined label, let's combine these two things to make a menu item component. To do this, we want to first add an icon from our components variant set that we created. 

In the Layers panel, click on "Assets" to see the icons component created. Click, hold, and drag the icon component over to the artboard, then drop the icon onto it. In this example, place it directly above the label created.

Ensure the icon and the label are vertically aligned using Auto Layout. Select both the icon and the text label, right-click on them, and select "Add auto layout."

This action will place the icon layer and the text layer into a new Auto Layout, with the icon on top and the label at the bottom, centered. Some improvements to this component can include adjustments to direction, alignment, spacing (gap), padding, and sizing.

First, let’s make the width of the component set to Hug Contents. This means the component width will adjust to the size of the inner contents. 

Next, let’s add a gap between the text and padding to our menu item component. Adjust the vertical gap to 4px and the horizontal and vertical padding to 16px. Lastly, let’s make sure the alignment and direction are good to go. Change the alignment to be centered and make sure the direction is a vertical layout. Make sure that the text is set to be centered as well.

When all of the adjustments have been made, there should be a good enough foundation to work on the next portion of the component: the component state. 

Duplicate this frame to create another one for the active menu item state. Change the color of the icon and text to #0089FF. Rename the duplicated component to “bottom menu item/active” and rename the original frame to “bottom menu item/inactive”. Figma uses slash naming to organize components in the assets tab and instance menu. Each "/" in a component's name will create another level of hierarchy. These names will be used in the next step for creating the menu item component.

Convert these two frames into components. Select each frame, right-click, and click “Create Component.” Select both components and create a component variant set, similar to the instructions for creating an icon component variant set. Once completed, add some component properties.

To do this, select the new bottom menu item component. In the Properties panel, find the option called "Component Properties." Click the plus icon next to it, and you'll see a few different options. Choose to create a text property.

After clicking on the create text property, a prompt like this will appear. 

Give it a name and give it a value. We’re gonna give it a name called “Text” and a value called “Label”. This will be the component property's default value. 

Once we’ve got that will create property now, we will double click on our text label inside the bottom menu item component. In the Properties panel under “Text”, click on the button to the right of the input field to apply the text property created in the previous step. 

Now, let’s repeat this similar process for icons. Click on the bottom menu item component and under the properties, the designer will see the text property that was created. Click on the plus icon next to the properties text, and click expose properties from nested instances. In a previous step, the designer made an icons component. This component has nested properties that can be used by exposing the properties. By exposing the icon properties to the bottom menu item component, they can be switched directly from this component later on.

Creating the Bottom Navigation Component

Now that we have a bottom menu item component, let’s create a bottom navigation menu bar component. For this component, we want to have five of the bottom menu items together in an auto layout row. Let’s start by going to our assets panel in the Layers panel and drag the bottom menu item component out of the assets panel. Do this until there are five menu items on the screen.

Now that there are five menu items, select all five items, right-click on the items, and click Add Auto Layout. When this is changed to auto layout, all of the items should line up in an equally distributed row as shown above.

Let's make some adjustments to refine this component, starting with the gap. Set the horizontal gap between items to zero. Select the outer frame, change the fill to white, and add a top border with black at 12% opacity. Next, adjust each icon and label in the bottom menu item component.

Select one instance of the bottom menu item component. In the right pane, there are options to change the text label and the icon. Make adjustments to each component until achieving the desired result.

At this point, each menu item may have different sizing and may not fit the bottom navigation component. Adjust the horizontal resizing of all menu items to "Fill Container" for each bottom menu item component, so they will all occupy the same amount of space in the bottom navigation bar frame.

Now, let’s rename our frame and call it “bottom navigation bar” Next, create a component from this frame right clicking on the frame and selecting create component. For finishing touches, select one of the menu item components and change its state to active. 

💥Congratulations! You now have a component for a bottom navigation bar that you can use in any of your mobile app designs.

Samuel Hinkhouse is a web and mobile app designer and full stack software engineer. Connect with him on LinkedIn, https://www.linkedin.com/in/shinkhouse/.