Layout

↑ Click on the frame to view in Figma.

 

 

Spacing methods and layout grids define your design's structure, hierarchy, and rhythm, reduce decision-making, and help establish a rational approach to type scales, positioning, sizing, and spacing.

 

 

Benefits of the Grid

---

 

Using a grid benefits both end users and the designers alike:

• Designers can quickly put together well-aligned interfaces.
• Users can easily scan predictable grid-based interfaces.
• A good grid is easy to adapt to various screen sizes and orientations. Grid layouts are an essential component of responsive web design. Responsive design uses breakpoints to determine the screen size threshold at which the layout should change. For example, a desktop screen may have 12 grid columns, which may be stacked on mobile, so the resulting layout has only four columns.

Be sure to communicate with your developers the grid structure used when creating the design so they can implement it accordingly.

 

 

Layout Basics

---

 

Layout grids originated in early print design to define text and image blocks, and their basic principles still apply to how we organize two-dimensional information on the web today. As the number of devices and screen sizes has grown, grids have become even more essential in maintaining consistency and creating a seamless design experience.

Advanced functionality in Figma, such as styles, sizing constraints, and nested frames, has made grids more flexible and powerful in modern tools like Figma (more on that in the How to Use Grid Styles section).

The Spark Design System utilizes a standardized grid and spacing system based on multiples of four. This scale helps designers create consistent interfaces across various screen sizes.

 

Grid Anatomy

The three fundamental components of any grid are columns, gutters, and margins. Columns serve as the foundation of a grid by indicating where design elements should be positioned. Gutters, on the other hand, represent the negative space between columns, and their width should be a multiple of the base unit. Lastly, margins are the negative space between the outer column edge and the frame.

 

 

 

Grid Styles

---

 

Designers can create various grid layouts by manipulating the arrangement of columns, gutters, and margins. Here are our standard grid styles.

 

Layout | Column Grid

Web applications often use column grids as their primary layout. These grids divide the frame into evenly spaced vertical fields that help designers align objects. The standard column is based on 12 columns, which can be divided into halves and fourths to design responsive screen sizes.

 

Layout | Modular Grid

Modular grids are a variation of the column grid and offer additional layout guidelines. These grids have vertical columns and horizontal rows, which intersect and create a matrix of modules. These modules can be used as single units or combined to form larger blocks, providing more flexibility in design. Modular grids are handy for dashboards and listing pages, as the rows can be repeated to accommodate browsing.

 

Container | Standard - Padding

Some containers, such as cards, may benefit from these grids that mark the padding standards based on spatial rules based on the size of the container without the need to align to a column grid.

 

Container | Columns

Individual containers like cards can benefit from following a grid with specific margins and gutter values for smaller and more detailed compositions within main layouts.

 

Container | Gadget - Column

 

 

Container | Widget - Column

 

 

Related Foundations

---