How to Set Up a Grid System in Figma

Select your frame (artboard). In the right sidebar, scroll to the 'Grid' section. Click the '+' icon to add a grid. By default, it adds a uniform grid (squares).

Choose grid type: Click the grid icon to switch between Grid (uniform squares), Columns (vertical divisions for layout), or Rows (horizontal divisions). Columns are most common for web/mobile layouts.

For Columns grid: Set 'Count' to 12 (standard for web) or 4 (for mobile). Set 'Type' to 'Stretch' (columns expand to fill space), 'Left' (align to left), 'Right' (align to right), or 'Center' (centered with margins).

Adjust gutter and margin: 'Gutter' is the space between columns (usually 16-24px for web, 8-16px for mobile). 'Margin' is the space on the outside edges. These ensure consistent spacing.

For Grid (uniform): Set the size to 8px or 4px for a baseline grid. This helps align elements to a consistent rhythm. Enable 'Snap to grid' in the top toolbar for precise placement.

Color your grid: Click the color swatch next to the grid type to change color and opacity. Use a light color (10-20% opacity) so it doesn't distract from your design.

Use the grid for layout: Drag elements and they'll snap to grid lines. For responsive design, use Auto Layout with the grid to create flexible components that adapt to different screen sizes.