1.5 Layout and spacing

In the Figmaster - Lessons Figma file, open the 1.5 Layout and spacing page.

Introduction

Let's cover the layout and spacing. You will learn how to create layout grids and set up the basic spacing system for your projects. In this chapter, we will create rules, and in the 3rd Module, I will show you how to document them.

Spacing

As you've read in the previous chapter, the spacing for components and typography will be done in increments of 4 pixels in our system. It means that our typography line-height, spacing between elements, components, and sections will be divided by 4. If you are interested in all the nerdy details about pixel grids, you can learn more about them in the Resources chapter at the end of this Module.

For our small system, we need five spacing values to keep it consistent and simple:

  1. Spacing S (4 px)
  2. Spacing M (8 px)
  3. Spacing L (16 px)
  4. Spacing XL (24 px)
  5. Spacing XXL (48 px)

In the 2nd Module, we will use these values in components, and you will learn how to apply them in the auto layout. In the 3rd Module, we will document them. For now, let's keep these numbers in mind.

Layout

When designing for the screen, there are any number of layouts to contend with. To allow our designs to adapt, we need both precision and flexibility. Figma allows for creating the layout grid styles. A Layout Grid gives us greater flexibility in implementing our designs. Layout Grids help us to align objects within a Frame and provide visual structure to our designs. They enable our designs to remain logical and consistent across different platforms and devices. Let's create a layout grid style for our system. We'll use it while creating desktop apps.

  1. Press F on your keyboard to open the Frame tool.
  2. In the top-right panel, click on Desktop > Macbook Pro to create the Frame with the dimensions of 1440x900.
  3. Having the Frame selected, click on a "+" icon in the Layout grid panel on the right.
  4. Below, click on the Grid icon (next to Grid (8 px) label) to open the grid properties
  5. In the properties panel, click on the Grid dropdown and select Columns.
  6. Set the values as follows:
  7. Count to 12.
  8. Margin to 48.
  9. Gutter to 16.
  10. Close the properties panel.
  11. Click on a "+" icon in the Layout grid panel again to create the next Grid item.
  12. Below, again, click on the Grid icon (next to Grid (8 px) label) to open the grid properties
  13. In the properties panel, click on the Grid dropdown and select Rows.
  14. Set the values as follows:
  15. Count to Auto.
  16. Type to Top.
  17. Height, Offset and Gutter to 4.
  18. Color to FF0000 5%.
  19. Close the properties panel.
  20. In the Layout grid panel, click on the Styles icon (4 dots) to open the Grid Styles menu.
  21. In the Grid Styles menu, press the "+" icon.
  22. Name the style to Desktop / 12 col and press Create style button.

Great job! We have all spacing and layout set up to keep our design system consistent and easy to maintain. Let's move on to the next chapter where we'll cover the shadows.

PreviousNext