Figma Tutorial - How to Create a Responsive Navigation Menu
Tags: figma, design, tutorial, tips
Published: 2020-02-23 00:51:19

It is important to think about your design as a dynamic piece even if you’re working on a static Canvas.

If you want to design a layout for multiple devices screens using Photoshop or Illustrator, you have to produce different frames for each layout.
Now with Figma, it is possible to create dynamic frames. One single frame can fit multiple devices screens.

In this brief tutorial, i will show you how you can design a responsive Navbar using Figma.


**1- Create a new frame :**
 - First go the toolbar and pick the frame tool

![Alt text of image](https://miro.medium.com/max/760/1*sQcc17JwYP_qn0o_uNL6Sw.jpeg)

- Select a desktop frame size In the proprieties panel.

![Alt text of image]
(https://miro.medium.com/max/760/1*LnrBUsQuLYk8AKxqGUPRAA.jpeg)

- Resize the height of your frame to 100px

![Alt text of image]
(https://miro.medium.com/max/760/1*hL19Le-EKsPDE-FaD_1imw.jpeg)

**2 - Create the Navbar basic elements :**
*Before you start creating any new element. First, select your frame, so every element you create will be inside of that frame.*

**Logo :**
Create a simple text with a generic brand name as a logo.

![Alt text of image]
(https://miro.medium.com/max/855/1*OlcrShc1xHrNenKA5P1nMg.jpeg)

Alignments :
 - Select the logo layer and go to the alignment section in the top sidebar.
 - click on Align left then Align Vertical Center to set its position inside the 
   frame.

![Alt text of image]
(https://miro.medium.com/max/413/1*cIpcJuErB5rNnhpwIjawog.jpeg)

**Menu :**
For the menu. it will be a simple list of text layers with pages names.

![Alt text of image]
(https://miro.medium.com/max/1233/1*tJobT5-4Vxhh0t00M6QrmA.jpeg)

Layers group :
 - Select all the text layers of your menu and click Ctrl + G or Command + G to 
   group your menu inside one unit.

Alignment :
 - Select your Menu and go to the proprieties Panel in the sidebar.
 - Set the alignment of your Menu to the Align horizontal center and then Align 
   Vertical Center.

![Alt text of image]
(https://miro.medium.com/max/399/1*LWZ_WINNyEHQ22UmySW7KA.jpeg)

**Button :**
Create a basic button with a simple shape and a text layer.

Layers Group :
 - Click Ctrl + G or Command + G to Group the button layers inside one group.

![Alt text of image]
(https://miro.medium.com/max/1774/1*XEEFgIgyz8RiewUaKKdohw.jpeg)

Alignment :
 - Select your button and go to the proprieties Panel in the sidebar.
 - click Align Right then Align Vertical Center.

![Alt text of image]
(https://miro.medium.com/max/449/1*Y8oEVlOS3816wm_zK4Chow.jpeg)

If you resize the width or height of your frame, your elements will not follow the size of the frame, their position is static inside the frame.

![Alt text of image]
(https://miro.medium.com/max/1920/1*84wjjY5NT4o2iZj4Dp0vPA.gif)

Our goal is to make the elements position relative to the size of the frame.
To solve this problem we need to define position constraints to our elements.

**3- Set constraints :**
Lets define the Horizontal and vertical constraints of our Elements.

**Logo Constraints :**
 - Select your logo, then go to the Constraints section in the proprieties panel 
   in the sidebar.

![Alt text of image]
(https://miro.medium.com/max/449/1*29gn7x4fRBJK9rs0foj9rg.jpeg)

Vertical constraint :
 - Click on the arrow next to top.

![Alt text of image]
(https://miro.medium.com/max/449/1*-tCyR7qRUzgw0Aec7wLUig.jpeg)

 - In the drop-down menu Select center.

![Alt text of image]
(https://miro.medium.com/max/298/1*vAMwmSLM4ABZRYNZziYS9w.jpeg)

Horizontal constraint :
For the horizontal constraint, keep it on left (if it’s not already on the left position, set it to left).

![Alt text of image]
(https://miro.medium.com/max/291/1*hK7VnS4jRyO9mtZ5HmTrNw.jpeg)


**Menu Constraints :**
 - Select your menu and set its horizontal constraint to center and the vertical 
   to center.

![Alt text of image]
(https://miro.medium.com/max/430/1*4_OIN78TZ4SZ46HZDSwP9g.jpeg)

**Button Constraints :**
 - For the Button, set its horizontal constraint to right and its vertical to 
   center.

![Alt text of image]
(https://miro.medium.com/max/430/1*9hjQbLAPj8IDuE2O7k8FAA.jpeg)

Now if we resize our frame, Both vertically and horizontally, we’ll see that our Navbar is fully Responsive.

![Alt text of image]
(https://miro.medium.com/max/1920/1*xUXtkEgDFGF5gPFglE0JOw.gif)


For More **Figma Tutorials**, **Free Templates**, **UI kits and Resources**.
Visit [figmaland.com](https://figmaland.com/)