Create a menu bar with a button hover state in Figma



Table Of Contents

Figma is a UI prototyping tool that can create a simulation of what an interface will look like. Web and mobile app prototypes can be made.

The menu bar made in this tutorial is a good beginner’s project. Consequently, it will help you learn the Figma interface and workflow.

The auto-layout tool in Figma is great for menu’s but there is a lot to remember. Here we have a full walkthrough with all the steps needed. Keyboard shortcuts are used so that you will remember them in the future.

Naming conventions and keeping it organized.

Figma uses certain naming conventions to organize items in the assets panel. It will also make it easier to find things in the future if you organize and name instances in the layers panel

Component naming

Figma uses a forward slash “/” to denote that a component belongs to a particular frame. for example. Desktop – 1/ button set. Will then group the Button set component under the Desktop – 1 group in the Assets panel. This will make more sense later.

Create a text frame nav item (button)

1/ Create a rectangle. Use Ctrl + t to select the text tool, then drag out a rectangle.

2/ Type the button text. Type out the name Label.

3/ Convert to auto-layout. Use Shift + a to convert the text frame into an auto layout, Figma will wrap another frame around the text frame and add a default padding of 10px all around.

4/ Rename Frame 2 to Nav Item

5/ Set the auto-layout padding. On the right-hand side of the Figma window is the context menu, make sure that the Nav item frame is selected. you will see an auto-layout section. Click on the padding number and set the padding to 5 px.

6/ Centre the auto-layout alignment. Click on the padding and alignment tool and set the alignment indicator to the center. this will ensure that the text stays in the centre when the frame is resized.

7/ Set the button fill colour. Click on fill ( the coloured square) and set the colour to a pale blue.

Figma will have set the font size to 12px. Your button should now look as below.

8/ Increase the text size, the text size is a little small. In the right-hand panel increase it to 18px.

Tip – you can also use the K, keyboard shortcut to select the scale tool. You can then resize the whole button.

9/ Style the button with a gradient. The flat colour is a little boring so let’s experiment with gradients. This needs to be subtle, there are some horrible gradient buttons out there!

We will be creating the design below.

The settings for this are shown below.

  • 1st stop colour EB4D1B
  • 2nd stop colour E28D72
  • Stroke 1px, colour E87575, set to inside.
  • Corner radius 4px.

11/ Create a button component. Right-click on the nav item frame and click Create component. You can now create instances of the master button component that are linked to it. Any changes done to the master are propagated to all the other instances.

Create a navbar using some button instances and a logo.

1/ Create a button set. Click on the Assets tab on the left of the window and drag out four instances of the button component. set them in a row and change the text as below. Also, rename the component instances in the layers panel.

The diamond shape in the layers panel indicates a component instance while a master component has four squares in a diamond patern

Drag around the buttons and press shift + a to create an auto-layout from the buttons. Rename the frame Button set. you can also make the button set into a component.

2/ Create a simple logo. Select the text tool and draw a frame 59px by 59px. Type “S” and set the text size to 64px. Convert it into a component and change the background to red. Drag the text to the centre of the square.

3/ Create the navbar, Drag an instance of the logo next to the button set. Then, drag around them, to select both and press shift + a to create an auto-layout.

4/ Convert to a component. Right-click on the auto-layout and click on Create component. Rename the component nav/ nav header

5/ Adjust auto-layout and constraints settings. Finally we get to the button set and logo to oposite ends.

Make a working prototype and create a button hover state

Figma allows you to make a working mockup using the Prototype tab. we will be creating a hover state as shown below. The hover simulation works by loading another frame when the button is hovered over. This frame contains the hover state.

1/ Duplicate the frame,Alt+ drag to create a duplicate of the Desktop – 1 frame. Next click on the prototype tab on the right.

2/ Link the frames with an interaction “noodle”. Double click on the home button until an interaction node appears (blue circle), drag a noodle to the second frame. An Interaction details panel will open. set the dropdown to While hovering.

3/ Create the hover state. Double click on the home button in the second frame until it is selected. Then just reverse the gradient stops so that the lighter shade is at the top. Finally, change the stroke to a darker red.

4/ Play the simulation. At the top right of the Figma window is the play button, click it to load another screen that will show the Desktop – 1 page, hover over the button to see the animation.

For the other buttons, you will need to add a frame for each button hover state. This is quite a pain and interactive components are on the way.

That completes this tutorial, more figma tuts on the way.