Layout Grids Rows and Columns

Add a Grid

Select a frame and click the plus icon in the Layout Grid section of the design panel to add a grid. By default, grids are set to a 10-pixel uniform grid.

Customize Grid Settings

• Grid Type: choose from columns, rows, or grid;
• Count/Number: adjust the number of columns or rows;
• Appearance: modify color and opacity;
• Type Settings: set columns to stretch or fix to the left, center, or right;
• Margins and Gutters: define spacing between frame edges (margins) and columns/rows (gutters).

Advanced Options

• Add multiple grids to a single frame by clicking the plus icon again.
• Modify or delete grids using the settings panel or the minus icon.
• Apply pre-set grid styles via the four-dot icon or import grids from the team library.

Using rulers and guides in Figma

Enable rulers

Rulers can be accessed through View > Rulers or by using the shortcut Shift + R. They appear on the top and left sides of the frame, with units measured in pixels.

Add Guides

To create guides, drag from the ruler and position them for alignment. Guides can be removed by dragging them back to the ruler.

Best Practices

Combine grids and guides for precision and to maintain organized layouts. Clean alignments enhance design clarity and improve the overall user experience.