Figma grids & spacing template

Most inconsistent layouts are not the result of bad taste. They are the result of a free text field.

Given a padding box that accepts any number, designers type 14, then 15, then 18, and the same card ends up three different heights on three different screens. A spacing system takes the field away and hands you a short list instead, which is why designers who work from one move faster than designers who do not.

One unit is 4px, and everything descends from it

The primitive scale is numeric and proportional: one spacing unit equals 0.25rem, or 4px at a 16px base. So 4 is 16px, 8 is 32px, and 2 is exactly half of 4.

It runs from 0 up to 480, which is 1,920px, with the useful density concentrated at the bottom where interface work actually happens. Every value is listed in three columns at once, the token name, the rem value at a 16px base, and the pixel measurement, so a designer and a developer are reading the same row rather than converting in their heads.

Values do not appear because the sequence demanded them. There is a 0.5 at 2px and a 1.5 at 6px because borders and tight icon gaps need them.

Semantic spacing, widths, and containers

On top of the primitives sits a t-shirt-sized layer meant for daily use: spacing-xs at 4px, spacing-md at 8px, spacing-xl at 16px, spacing-4xl at 32px and upward.

Widths get their own set, width-xxs at 320px through width-6xl at 1,920px, for capping sections rather than padding them. Containers are separate again, with container-padding-mobile at 16px, container-padding-desktop at 32px and container-max-width-desktop at 1,280px, so changing the gutter of every page in a project is three edits rather than a week.

The one variable worth stealing outright is paragraph-max-width at 45rem, or 720px, which caps body copy at a readable measure no matter how wide the viewport gets. That single number does more for readability than any amount of tuning in the typography styles.

Layout grids at three breakpoints

Three grids are set up and documented with their measurements drawn on the canvas. Desktop is a 1,440px frame holding a 1,280px container, 12 columns with 32px gutters. Tablet is 768px with a 704px container, 6 columns, still 32px gutters. Mobile is 375px with a 343px container, 4 columns and 16px gutters.

The column count halving as the screen narrows is deliberate: a 12 column grid on a phone is arithmetic, not layout. Below that, WCAG's reflow criterion expects content to survive at 320px without horizontal scrolling, which is the same width someone gets when they zoom a 1,280px desktop page to 400%.

A second set of container layouts covers the common divisions, 12, 6, 5, 3 and 2 columns, for dropping straight into a landing page section without rebuilding a grid each time. Press Shift G to show or hide them all.

Radius is part of the same system

Corner radius is spacing by another name, and it is derived from the same primitives: radius-xxs at 2px, radius-xs at 4px, radius-md at 8px, radius-lg at 10px, up to radius-4xl at 24px, with radius-full at 9,999px for pills and circles.

Keeping it in one scale is what stops the slow drift where a card is 12px, the button inside it is 10px, and the input beside that is 8px for no reason anyone can remember. Radius also carries a lot of brand character, more than most people credit, so changing the scale is one of the fastest ways to make the kit stop looking like the kit. The same is true of the shadow scale.

The habit that makes all of this pay off is binding the values rather than typing them. Set an auto layout gap from the spacing variables instead of entering 16, and the number stays connected to the system, updates when the system updates, and shows up as a token in Dev Mode instead of a magic number.

Spacing is also the main tool you have for grouping: the law of proximity means a label sitting 4px from its input reads as one object, and the same label at 16px reads as two, which is a decision the color styles cannot make for you.