Grids and Spacing
A well thought out layout goes a long way. Consistent use of a grid and spacing makes it easier for your users to scan the user interface and grasp the content.
Units
Granular building blocks for layout. We define a set of values for consistency in an 8-point system.
Spacing
Use these common spacers whenever possible. In instances where another set spacing is required, be sure to follow the 8-point system.
Grid system
The grid system is the invisible structure that contains and organizes all of the elements in a page or component. The grid system dictates the size of elements, width of text containers, how often an element repeats, placement of images, etc. For best readability and flow of content, use the grid system to align elements across components and align components across the page.
Figma grid styles have been defined in the layout grid panel located on the right hand side of the Figma application. Select from the list of different web, app, and email grid styles to easily set up designs.
