Layout Grids and Guides

A layout grid is a visual overlay on a Frame — columns, rows, or a square grid — that guides where content lines up, without becoming part of the actual design. It only shows in the editor, never in a real screenshot or a shipped app.

Select a Frame, scroll to Layout guide in the Design panel, and click the +. A default square grid appears immediately; the dropdown next to it switches between Grid (an evenly spaced square grid, good for icon work), Columns (vertical guides, the standard for web and app layouts), and Rows (horizontal guides).

Without a grid, "does this align with that" gets answered by eye, and small inconsistencies pile up across a whole screen. With a grid, every element snaps to the same columns, and a design instantly reads as more organized — the same reason print magazines and newspapers have used column grids for a century before screens existed at all.

A 12-column grid is the de facto standard for web layouts (it divides evenly into halves, thirds, and quarters). Mobile app screens more often use a simpler 4-column grid, since there's less horizontal room to divide. Neither is a rule — they're starting points worth knowing before deviating from them on purpose.