3.1 Documentation Components

In the Figmaster - Lessons Figma file, open the 3.1 Documentation Components page.

Introduction

In this chapter, we'll create documentation components that we'll use in the next chapter to build a documentation template page. But first, we'll need a navigation menu and a header.

Step 1. Menu

  1. Open the Assets Panel (ALT + 2).
  2. Search for the Menu component and drop it on the canvas.
  3. Having the Menu selected, press CTRL + ALT + B to detach the instance.
  4. Change the first Menu Item Primary's text to Style Guide.
  5. Select its icon and change it to Icon / PaintBucket in the instances panel.
  6. Select the Menu Item Secondary below and change its text to Typography.
  7. Repeat the action to items below in the following order: Color, Layout & Spacing, Shadows (Elevation), Icons.
  8. Delete the last Menu Item Secondary under the icon item.
  9. Change the second Menu Item Primary's text to Components.
  10. Select its icon and change it to Icon / Stack in the instances panel.
  11. Select the Menu Item below.
  12. Duplicate it (CTRL + D), so there are 18 Menu Items in total.
  13. Rename the Menu Items in the following order: Accordion, Badge, Button, Card, Checkbox, Dropdown, Input, Menu, Modal, Notification, Radio Button, Select, Switch, Table, Tabs, Textarea, Tooltip.
  14. Resize the whole Menu frame, so it's 1208 px high.
  15. Add an Inner Shadow to the frame with the following values:
  16. X to -1.
  17. Y and Blur to 0.
  18. Color to E0E0E0 100%.
  19. Rename the Menu to Documentation Components / Menu.
  20. Press CTRL + ALT + K to create a component.

Step 2. Header

Part 1. Page title

  1. Create the text layer with Page title text inside.
  2. Change its style to Heading/L.
  3. Change its fill to Neutral/10.

Part 2. Button

  1. Open the Assets panel and find a Button component.
  2. Drop it on the right side of the Page title text layer.
  3. Change the Button's properties to:
  4. Content to Icon Text.
  5. Size to Normal.
  6. Type to Text.
  7. State to Default.
  8. In the Selection colors, change the color to Neutral/10.
  9. Change the Button's text to View main components.
  10. Change the icon to Icon / ArrowCircleUpRight.

Part 3. Group

  1. Select Page title and button and press SHIFT + A to group them and apply auto layout.
  2. Rename the group to Documentation Components / Header.
  3. Change its fill to Neutral/100.
  4. Add an Inner Shadow effect with the following values:
  5. X to 0.
  6. Y to 4.
  7. Blur to 0.
  8. Color to 4E31E4 100%.
  9. Select the group and set the following values in the Auto Layout panel:
  10. Spacing between items: 24 px.
  11. Alignment: Bottom - Left.
  12. Padding Top: 128 px.
  13. Padding Left, Right, and Bottom: 48 px.
  14. Select the group and resize it to 1192 px in width.
  15. Select the Page title text layer.
  16. Set its Resizing (width) property to Fill container.
  17. Select the group and make it a component.

Great job! We've created basic documentation components, and we'll use them to create a simple documentation page in the next chapter. Let's continue!

PreviousNext