Layout Guides and the 8-Point System

Ask three designers to space the same habit card and you get 14, 15 and 16 px of padding. None of them is wrong in isolation. Together, across forty screens, they make an app that feels slightly unsteady, the visual equivalent of a table with one short leg.

Two tools prevent this. Layout guides give every screen the same skeleton to align to, and a spacing system limits which numbers you are allowed to use.

Layout guides

At the time of writing, Figma calls these layout guides; older tutorials call them layout grids. They are visual aids attached to a frame: you see them while designing, they never appear in exports, and they do not move anything by themselves. Select a frame and add one from the layout guide section of the right sidebar.

There are three types:

• Columns: vertical bands that span the frame’s height. The workhorse for screen layouts.
• Rows: horizontal bands, useful for rhythm in long scrolling content.
• Uniform grid: a square grid, useful for drawing icons and checking small alignments.

Columns and rows have four properties. Count is how many. Type decides how they sit: Stretch makes them grow with the frame, while Left, Center and Right keep fixed-width columns anchored to that side. Margin is the space between the outer columns and the frame edges. Gutter is the space between columns.

For Steady’s phone screens, use a 4-column Stretch guide with a 20 px margin and a 16 px gutter.

Most phone content spans all four columns; the guide earns its keep when you split the width, such as two stat cards side by side on the Habit detail screen, each spanning two columns. On a tablet you would switch to 8 or 12 columns with wider margins. You can save a guide as a style so every screen uses the same one.

The 8-point system

An 8-point system says: spacing and component sizes are multiples of 8, with 4 allowed as a half step for small details. The reasons are practical, not mystical:

• Clean scaling. Phones render at 2× or 3× density, and some Android devices at 1.5×. Multiples of 8 stay whole pixels at every density: 8 × 1.5 = 12. A 5 px gap becomes 7.5, which blurs.
• Fewer decisions. Choosing between 16 and 24 is fast. Choosing between 14, 15, 16, 17 and 18 is a debate.
• A shared vocabulary. A developer reads “16” in Dev Mode, matches it to a spacing token, and nobody wonders whether 15 was intentional.

Steady’s spacing scale is short and named:

space-1    4   icon-to-label, name-to-streak
space-2    8   between habit rows, between chips
space-3   12   inside rows, gap between row elements
space-4   16   card padding, gutter
space-5   20   screen side margin
space-6   24   between blocks on a screen
space-8   32   between the header and the content
space-12  48   tap height of the Save habit button

You may notice 12 and 20 are not multiples of 8. That is the half-step rule at work: 4-point increments are allowed where 8 is too coarse, and many teams, including the people behind Material Design, work this way. What matters is that the list is short and everyone uses it. The names (space-4 means 16) become variables in Section 3, so the scale lives in the file, not in someone’s memory.

Text gets the same treatment: the line heights in Steady’s type scale (24, 20, 16) are multiples of 4, so a text block’s height always lands on the grid and sits in rhythm with padding around it.

The grid serves you, not the other way round. A play icon inside a circle looks off-center when it is mathematically centered, because its visual weight sits left; designers nudge it 1 or 2 px right on purpose. That is an optical correction with a reason, which is exactly what the system allows.

Next you put the layout guides, auto layout and constraints together and make one screen work from a small phone to a large one.