3.2 Documentation Page

In the Figmaster - Lessons Figma file, open the 3.2 Documentation Page page.

Introduction

Let's use the components we've created in the previous chapter and set up a documentation page. Doing so will help us document our styles and components faster because we'll use it as a template for all pages.

Step 1. Menu and Header

  1. Open the Frame tool (F).
  2. In the Frame panel on the right, click on Desktop > Macbook Pro (1440x900). The new frame will be created on the canvas.
  3. Rename it to Documentation Page.
  4. In the Assets panel, find Documentation Components / Menu.
  5. Drop it inside the Documentation Page.
  6. Move the Menu to the top left corner.
  7. Resize the Documentation Page to match the Menu's height.
  8. In the Assets panel, find Documentation Components / Header.
  9. Drop it inside the Documentation Page.
  10. Move it to the top right corner.

Step 2. Group and Content frames

Part 1. Group

  1. Open the text tool and click somewhere under the Header of the Documentation Page.
  2. Create a text layer with Group title text inside.
  3. Change its text style to Heading/M.
  4. Change its fill to Neutral/100.
  5. Group it and apply auto layout.
  6. Rename this group to Group.
  7. In the Auto layout panel:
  8. Direction: Vertical.
  9. Spacing between items to 32 px.
  10. Padding (all sides) to 0 px.
  11. Select the text inside and change its Resizing (width) property to Fill container.

Part 2. Content

  1. Select the Group.
  2. Group it and change the new group's name to Content.
  3. Apply the auto layout to the Content group.
  4. In the Auto layout settings:
  5. Direction: Vertical.
  6. Spacing between items: 48 px.
  7. Padding (all sides): 48 px.
  8. Select the Group inside and change its Resizing (width) property to Fill container.

Step 3. Header and Content

  1. Select the Header and Content elements.
  2. Apply auto layout to group them.
  3. Rename the group to Header + Content.
  4. In the Auto layout settings:
  5. Direction: Vertical.
  6. Spacing between items: 0 px.
  7. Padding (all sides): 0 px.
  8. Select both Header and Content groups inside.
  9. Change their Resizing (width) property to Fill container.

Step 4. Page

  1. Select Documentation Page and apply the auto layout.
  2. Select the Menu inside.
  3. In the Resizing panel, set the Height property to Fill container.
  4. Select the Header + Content frame.
  5. Change its Resizing (width) property to Fill container.
  6. Select the page and make it a component.

Awesome work! Now, our documentation page will resize accordingly to the content inside! Let's start documenting!

PreviousNext