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.
• Default setting: 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

1. Enable Rulers:

   • Access via View > Rulers or shortcut Shift + R.
   • Rulers appear on the top and left of the frame (units in pixels).

2. Add Guides:

   • Drag from the ruler to create guides for alignment.
   • Delete guides by dragging them back to the ruler.

Best Practices

• Combine grids and guides for precision and organized layouts.
• Use clean alignments to enhance design clarity and user experience.