How to use layout grids for UI design in Figma
Introduction
The invisible structure of a design is just as important as the visible elements. Layout grids help you place objects consistently, ensuring your UI feels balanced and professional.
This guide explains how to set up the most common grid types: Column grids for responsive web design and pixel grids for precise alignment.
Prerequisites
- •A frame (Desktop or Mobile size)
- •Figma open
Guide Steps
Add a layout grid
Select your frame. In the right sidebar, click the '+' icon next to 'Layout grid'. By default, it adds a 10px uniform grid overlay.
Set up a column grid
Click the grid icon (nine dots) to edit settings. Change the type from 'Grid' to 'Columns'. For desktop, set Count to 12, Margin to a safe value (e.g., 64px or larger), and Gutter to 16px or 24px.
Add a baseline grid (optional)
You can add multiple grids to one frame. Click '+' again. Change type to 'Rows'. Set content to 'Auto' (top) or 'Center', and specify a height (e.g., 4px or 8px) to help align text baselines.
Toggle visibility
Use the shortcut Ctrl + G (Mac) or Ctrl + Shift + 4 (Windows - varies by setup) to toggle grid visibility on and off while you work. Align your elements to snap to the grid columns.
Common Mistakes to Avoid
- ×Setting margins to 0 when designing for screens, leaving no breathing room at the edges.
- ×Ignoring the grid gutters and placing elements halfway between columns.
Pro-Level Design Tips & Workflows
💡 Asset Export: Hold the Option (Mac) or Alt (Windows) key while choosing resolution multipliers to export layers in exact dimensions.
💡 Vector Grid Snapping: Enable 'Snap to pixel grid' (Shift + Cmd + ') to prevent decimal positioning values which cause asset export pixelation.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.