Chapter 3 › Lesson 9

9. Build a Bottom Nav Bar with Auto Layout

Skills: Horizontal auto layout for nav bar; Evenly spaced nav items using Fill or Space Between; Icon + label pairs wrapped in vertical auto layout; Nav bar padding and background fill

A bottom navigation bar is one of the most common mobile UI patterns. In Figma, you build it with a horizontal auto layout frame that contains icon + label pairs — each wrapped in their own vertical auto layout.

9. Build a Bottom Nav Bar with Auto Layout
Figure: A horizontal auto layout frame containing 4 nav items (icon + label in vertical auto layout). Use Fill or Space Between for even spacing.

Step-by-step

  1. Press F and draw a frame 375 wide × 64 tall — this is your nav bar container
  2. Press Shift + A to enable Auto Layout, set direction to Horizontal
  3. Set padding: 8 top, 8 bottom, 8 left, 8 right. Set gap: 0
  4. Draw a small frame (48×48) for a nav item — this will hold an icon and label
  5. Press Shift + A on that frame, set direction to Vertical, gap: 2, alignment: Center
  6. Press R and draw a 24×24 circle or rect for the icon — colour it with your brand colour
  7. Press T and type a label like "Home" — centre align the text
  8. Duplicate this nav item 3 times for a total of 4 items (Home, Accounts, Payments, Profile)
  9. Select the parent nav bar frame and set Fill for width so items stretch evenly, or use Space Between to spread them
  10. Add a background colour to the nav bar frame and remove the default stroke

Pro tip

Fill makes each nav item take equal space. Space Between keeps items at their natural width and pushes them apart. Both work — pick the one that feels right for your design.