Web Design » Figma » How Do I Add a Bottom Navigation Bar in Figma?

How Do I Add a Bottom Navigation Bar in Figma?

Last updated on December 29, 2022 @ 1:46 pm

Adding a Bottom Navigation Bar in Figma is easy!

1. To add a Bottom Navigation Bar, first select the “Add Frame” button in the toolbar.

Add frame in Figma canvas

2. Then, select the “Navigation Bar” option from the list of frame types. If it doesn’t appear in your assets, you must create one or get a copy from the Figma Community. Afterward, you can find it in your asset libraries and enable it so you can use it in your design.

Get a copy of bottom navigation UI kit in Figma community Go to assets library and enable the navigation kit Figma

3. Next, choose whether you want your Bottom Navigation Bar to be fixed to the bottom of the screen or not.

Choose to fix or not the position of bottom navigation Figma

4. Finally, give your Bottom Navigation Bar a name and click “OK“.

Name the navigation bar Figma

That’s it! Your Bottom Navigation Bar will now be added to your Figma project.

PRO TIP: Adding a bottom navigation bar in Figma is a simple process, but there are a few things to keep in mind. First, make sure that your Figma file is set up with the correct frame size. Bottom navigation bars are typically used on mobile devices, so you’ll want to make sure your frame size is set to an appropriate width and height. You can find the frame size settings in the File > Document Settings menu.

Next, create a new frame for your bottom navigation bar. You can do this by selecting the Frame tool from the toolbar and clicking and dragging to create a new frame. Once you have your new frame created, you’ll want to add your navigation items. This can be done by adding simple rectangles and assigning link actions in the Interactions panel.

Finally, don’t forget to add a link action to your home screen frame so that users can return to it from your bottom navigation bar!

Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.