How to Create Navbar Using Auto Layout in Figma

To create a navbar using Auto Layout in Figma, select the elements you want in the navbar and apply Auto Layout from the right panel. Adjust direction, spacing, and padding to arrange items horizontally and keep them evenly spaced and aligned.

Syntax

In Figma, Auto Layout is applied to frames or groups to arrange child elements automatically. Key properties include:

• Direction: Choose horizontal or vertical layout.
• Spacing between items: Controls space between navbar items.
• Padding: Adds space inside the frame around items.
• Alignment: Align items vertically or horizontally within the frame.

Use the right sidebar to set these properties after selecting your frame or group.

text

Select elements > Right panel > Click 'Auto Layout' button > Set Direction to Horizontal > Adjust Spacing and Padding

Example

This example shows how to create a simple horizontal navbar with three buttons spaced evenly and padded inside the frame.

text

1. Create a frame and add three text layers named 'Home', 'About', and 'Contact'.
2. Select all three text layers.
3. Click 'Auto Layout' in the right panel.
4. Set Direction to Horizontal.
5. Set Spacing between items to 24 px.
6. Set Padding to 16 px on all sides.
7. Align items vertically center.

Result: A neat horizontal navbar with evenly spaced buttons and padding around them.

Output

A horizontal navbar with 'Home', 'About', and 'Contact' buttons spaced 24 px apart and 16 px padding inside the frame.

Common Pitfalls

Common mistakes when creating navbars with Auto Layout include:

• Not setting the direction to horizontal, which stacks items vertically instead of side by side.
• Forgetting to add padding, causing items to stick to the frame edges.
• Using inconsistent spacing, which makes the navbar look uneven.
• Not aligning items vertically center, causing buttons to look misaligned.

Always double-check these settings to ensure a clean navbar layout.

text

Wrong:
Select elements > Auto Layout > Direction: Vertical

Right:
Select elements > Auto Layout > Direction: Horizontal
Set spacing and padding properly

Quick Reference

Property	Description	Recommended Setting for Navbar
Direction	Layout direction of items	Horizontal
Spacing between items	Space between navbar buttons	16-24 px
Padding	Space inside frame edges	12-20 px all sides
Alignment	Vertical alignment of items	Center
Resize behavior	How items resize inside frame	Hug contents or Fill container

Key Takeaways

Use Auto Layout with horizontal direction to arrange navbar items side by side.

Set consistent spacing and padding for a balanced and clean navbar look.

Align items vertically center to keep buttons visually aligned.

Check Auto Layout settings carefully to avoid vertical stacking or uneven spacing.

Use 'Hug contents' resize for buttons to keep their size based on text.