2.17 Menu

In the Figmaster - Lessons Figma file, open the 2.17 Menu page.

Introduction

In this chapter, we'll create a simple menu component. Menus provide access to destinations in your app.

Step 1. Menu Item Primary

Create a Menu Item Primary component with variants. Look at the screenshots to determine the styles and auto layout settings. The Menu Item text inside should have the Fill container (width) applied. The icon on the left should be Icon / CirclesThreePlus. The icon on the right should be Icon / CaretDown.

Step 2. Menu Item Secondary

Create a Menu Item Secondary component with variants. Look at the screenshots to determine the styles and auto layout settings. The Menu Item text inside should have the Fill container (width) applied.

Step 3. Menu Header

  1. Duplicate the Logo component from the Resources frame and drop it on the canvas.
  2. Group it and apply the auto layout.
  3. Rename it to Header.
  4. In the auto layout panel, set the padding (all sides) to 24 px.
  5. Set the Alignment to Left - Center.
  6. Resize the Header, so it's 248 px wide.

Step 4. Menu List

  1. Grab the Menu Item Primary from the Assets Panel and drop it on the canvas.
  2. Having the Menu Item Primary selected, in the Instance panel, set the following properties:
  3. Icon to ON.
  4. Dropdown to ON.
  5. State to Active.
  6. Open the Assets panel again and drop the Menu Item Secondary 4 px below the Menu Item Primary.
  7. Duplicate it, so there are six Secondary items below.
  8. Set the first Menu Item Secondary's state to Active.
  9. Select all Menu Items and duplicate them 4 px below the last item.
  10. Select all Menu Items and group them.
  11. Rename it to List.
  12. Apply the auto layout and set the following properties:
  13. Spacing between items should be 4 px.
  14. Padding Top: 16 px.
  15. Padding Left and Right: 12 px.
  16. Padding Bottom: 24 px.

Step 5. Grouping everything together

  1. Move the List 0 px below the Header.
  2. Select both groups and align them horizontally (ALT + H).
  3. Group them and apply the auto layout.
  4. Rename the group to Menu.
  5. Set background Fill to Neutral/20.
  6. Resize the Menu, so it's 900 px high.
  7. Having the Menu selected, press Enter to select the elements inside.
  8. Set their Resizing (width) property to Fill container.
  9. Select the List group inside and press Enter.
  10. Set the Resizing (width) property to Fill container for these items too.
  11. Resize it back to 248 px.
  12. Select Menu and press CTRL + ALT + K to create a component.

Awesome work! Your Menu component is ready. We will use it in the next Module to create our documentation pages. In the next chapter, you can find some theoretical resources on design systems and components.

PreviousNext