Figma Navigation Prototype

Lexi NamerTuesday, May 16, 2023

The different states of the final navigation bar including active, hover, and empty.

Prototyping different navigation states is a crucial step in the design process. It helps visualize and test the different interactions that users will encounter in the app and helps our engineers understand what to build. At Echobind, we use Figma to design and prototype. Here is a short step-by-step tutorial about how to use components to quickly and easily design and prototype an interactive navigation bar with default, active, and hover states.

1. Create a nav item and turn it into a component- this will be your “Default” state

Right click on a designed navigation element and click “create component”

2. Add variants to the default nav item component for “Active” and “Hover”

Create different variants of the initial navigation item components and label them as your different states such as hover or action

3. Style the different states however you would like them to appear

Style each of the different states so they are visually different

4. From the Prototype tab, add “hover” interactions from the default and active variants to the hover variant

Using Figma’s prototyping function, add an interaction from the default and active variants to the hover variant

5. Repeat steps 1-4 for the button

Do the same thing that you did in in previous steps for a CTA button

6. Using your nav item and button components, design a header and turn it into another component

Create a navigation component and add in the different nav items and button as a component

7. Set up your pages using the component header and change the property for each of the current page’s nav item to “Active”

Set up all of the pages using the header component that you just created and change the property for each of the current page’s nav item to “active”

8. From the Prototype tab, add “click” interactions from all of the nav items between the different pages.

Prototype all of the pages so they connect to each other

9. You must do this between all of the pages that you want to link between (don’t forget the home page).

Each of the nav items on each page must be connected individually

10. Set the device size from the prototype tab, click the play button, and watch the magic happen!

The different states of the final navigation bar including active, hover, and empty.

Figma Navigation Prototype