Figma 101: Using Layout Grids for Responsive Design

Understanding the role of the fixed, stretch and constraint properties in grids and page layout.

Never despise learning of small things daily because of their compound effect to great things over time. ― Dr. Lucas D. Shallua

---

Whether you’re creating a simple ecommerce screen or complex dashboards, its important to understand the behaviour of layout grids within Figma, and how to adjust page content for varying screen sizes.

The Grid Anatomy

Columns:

Traditionally, 12 columns are used on desktop, 8 on tablet, and 4 on mobile. Most grids have 60-80px column widths. Column width is a key influencer of the width your actual content will be. 

Gutters:

Gutters are the spaces between columns and rows, helping designers create well-structured and visually balanced designs.

Margins:

Margins or ‘outside gutters’ are one of those design principles often neglected by beginner designers, but are essential to framing the design and allowing more breathing room. Margins are the vertical column and horizontal row spacing surrounding the design, usually sized at 16-30px on mobile, and vary a lot between desktop and mobile. 

Modules:

Modules, or content modules are the building blocks of responsive design, as they are the between-gutter spaces, responsible for holding the main content within them. These modules resize by enlarging on smaller screens, ensuring that content is properly spaced. The overall width and height of layout elements (components included) should be considered, when determining the appropriate module area.

There are 2 types of grids…

Stretch to Fit Device

If you are applying constraints to the components themselves, you may not need a fixed grid, and can use a stretch grid. to specific components, the stretch grid could be used. As indicated by its name, as the screen stretches (expands or contracts), so will the rows row and column widths. Additionally, any element within the constraint will reapply its constraint properties to the nearest column or grid, and thereby changing the position of its placement.

Fixed Size

When it comes to a fixed grid type, the column count and width will remain to the original set amount and elements will be fixed to original pixels based on amount.

When creating a row style, fixed types include top, bottom, center. Similarly for column styles: left, right, center.

Constraints

Constraints determine the position of a component or element within a frame when its size is modified. These constraints are visually marked by blue indicators that appear when an element is selected or manipulated. By default, constraints are initially set to the top and left sides of the frame when no layout grid is in use. However, when a grid is applied, the element automatically aligns itself with the nearest column, module, or row within that grid.

You can easily customize an element's constraints by accessing the design panel located on the right-hand side.

Pro tip💡: Turn your most commonly used grids (column, grid or row) into grid styles, to automatically apply them to each page. If you’d like to apply more than 1 style to a frame, you can edit the style to include multiple grids within it, by clicking the + icon within style properties panel.

The setup

1. Begin by selecting an existing frame or creating a new one (F).

2. From the design panel on the right hand side, click the + icon beside local styles to create a new grid style.

3. Figma will automatically generate a 10 pixel grid. To edit this, click into the grid property and select the grid type from the top left hand side.

4. Select the desired properties. For the column and row grids, their properties include:

   

   1. Count: number of columns or rows within this specific style

   2. Grid color and transparency

   3. Type: the way in which the grid will respond to the changing frame size.

   4. Width: applicable to fixed grids only - the width of each column/row. Best practice to set in intervals of 8 for generic/less detailed layouts, and intervals of 4 for complex UI projects.

   5. Offset/margins: The width of the vertical column and horizontal row spacing surrounding the design, used to ensure proper edge alignment and stacking.

   6. Gutter: The spacing between columns and rows. Used to ensure consistent and enough negative space between components, to prevent visual clutter.

5. Title the style, add a description and click create style.

6. OPTIONAL: Click the + icon to add another style within the current grid style.