3.5 Layout and Spacing

In the Figmaster - Lessons Figma file, open the 3.5 Layout and Spacing page.

Step 1. Page

Prepare a page for Layout and Spacing, just like we did in the previous chapters. Make sure to change the title of the page and frame. Remember to switch the states of the navigation items in the Menu.

Step 2. Grid Styles

Part 1. Titles

  1. Select the Group title text and change it to Grid styles.
  2. Duplicate it.
  3. Change the new copy's text to Desktop / 12 col.
  4. Change the text style to Heading/S.

Part 2. Grid elements - Margin

  1. Open the text tool and click somewhere outside the Layout and Spacing page.
  2. Create a text layer with 48 text inside.
  3. Change the text style to Text S / Medium.
  4. Set its fill color to Warning/Pressed.
  5. Group it and apply the auto layout.
  6. Rename it to Documentation Components / Margin.
  7. Set the group's fill to Warning/Surface.
  8. In the auto layout panel, set the alignment to Center - Center.
  9. Resize the group, so it's 48 px wide and 360 px high.
  10. Make it a component.

Part 3. Grid elements - Gutter

  1. Duplicate the Margin group 32 px to the right.
  2. Rename the new copy to Documentation Components / Gutter.
  3. Resize it to be 16 px wide.
  4. Change the color of the text to Danger / Main.
  5. Change the background color to Danger / Surface.
  6. Change the text from 48 to 16.
  7. Make it a component.

Part 4. Grid elements - Column

  1. Create a rectangle 100x360 px.
  2. Rename it to Column.
  3. Set its fill color to Neutral/20.
  4. Set its stroke to 1 px Inside Neutral/60.
  5. Make it dashed (6, 6). You will find it in the Advanced stroke settings panel in the Stroke panel.

Part 5. Grouping it all together

  1. Use the components and Column rectangle we've just created and rearrange the elements like on Screenshot 1 in Figma. Remember to copy and paste the main components and use the instances, not the main components.
  2. Group them all and apply the auto layout.
  3. Rename it to Grid 12 col.
  4. In the auto layout panel, set the Spacing between items to 0.
  5. Select all Column rectangles inside the group.
  6. Set their Resizing (width) property to Fill container.
  7. Select the Grid 12 col group again, and press Enter to select all elements inside.
  8. Set their Resizing (height) property to Fill container.
  9. Resize the group to be 360 px high again.

Great job! Now you can see how it works by resizing the width of the whole group. The margin and gutter elements should be fixed, while the Columns should change their width while resizing.

Part 6. Adding the group to a page

  1. Drop the Grid 12 col group into Content > Group, below Desktop / 12 col title in the Layout and Spacing page.
  2. Set its Resizing (width) property to Fill container.

Step 3. Spacing table

  1. In the Content group, select the Group frame.
  2. Duplicate it.
  3. Remove the Desktop / 12 col text.
  4. Remove the Grid 12 col group.
  5. Change the Grid Styles text to Spacing.
  6. Create a table below, just like on Screenshot 2 in Figma. Remember that you can check the Solutions file when you are stuck.

Continue to the next chapter after you finish Step 3.

PreviousNext