Layout grid system

A layout grid system can be used to align and size objects within a given frame. It provides visual structure and align objects. Layout grids establish consistency across multiple platforms.

Usage#

  • Basic rules that help you set up your frames in Figma.
  • The responsive behavior of our grid has four breakpoints.
  • The amount, width and spacing of the columns change with each breakpoint.
  • We do have three layout grid properties available.
    • 8pt grid
    • Column grid center
    • Column grid stretch
1. Columns2. Gutters3. Margins
Content is placed in the areas of the screen that contain columns.
The number of displayed columns is determined by the breakpoint that is chosen.		Gutters are the spaces between columns.
They help separate content.		Margins are the space between content and the left and right edges of the screen.
Layout grid stylePropertyPreview
8pt gridGrid
Size: 8pt
Color: blue-light
Opacity: 32%		8pt grid
Column centerColumn
Column: Enter X count
Color: brand-primary-base
Type: center
Opacity: 16%
Gutter: Enter X gutter		Column center
Column stretchColumn
Column: Enter X count
Color: blue-light
Type: center
Opacity: 16%
Gutter: Enter X gutter		Column stretch
Combined on framesApply a layout grid to any frame or component. There is a color separation on the column style to differentiate between the column properties.Column stretch

Layout grid properties in Figma#

TypeLGMDSMXS
Frame Desktop HD Nexus 7 (landscape) Nexus 7 (portrait)iPhone SE
Viewport 1280px - 1440px960px600px320px
Columns12 columns12 columns4 columns2 columns
Width for type center8962130136
Gutters16px16px16px16px
Layout settings type centerLG LayoutMD LayoutSM LayoutXS Layout
Margin for type stretch16px / 16px16px / 16px16px / 16px16px / 16px
Layout settings type stretchLG LayoutMD LayoutSM LayoutXS Layout

Change log#

2.0.0 Parkside - 2021-11-02#

Changed#

  • Doc, Figma: "Grid" | Changed the current margin from 8px to 16px