Layout

You design two frames, not seven breakpoints: a mobile frame at 375 and a desktop frame at 1440. The seven breakpoints are code’s dial: lg (1024px) is the only moment the layout changes shape, and content caps at 1280px, so wider frames add margin, not design. Everything on this page exists so that what you draw at these two sizes is exactly what the browser builds.

The shell is the persistent UI that frames your content: the navigation sidebar, top bars, and side panels that stay put while the page scrolls (you’ll sometimes hear this layer called chrome). An application shell is persistent UI plus a scrolling main: the shell divides the viewport, the sidebar holds at 280px from lg up, an optional right panel for global tools follows the pinning rule below, and main takes everything left. You design what happens inside main; the system owns the frame around it. A marketing page drops the persistent UI and stacks full-width bands instead. Drag the viewport and watch the division happen.

Main is not your canvas; the container inside it is. Every page region wraps its content in max-w-container mx-auto px-4 lg:px-8: fluid until the main column passes 1,280px, then capped and centered. Drag the simulator above past ~1,580px in application mode and watch the container stop growing; that is the only sense in which sidebar and container widths ever add up. The variables below hold the container’s measurements, measured live from the tokens.

How do sibling blocks share the canvas? Proportionally, on a grid. Figma’s 12-column layout grid maps one-to-one to grid-cols-12 plus col-span-*; a span is a fraction of the container, so the layout redistributes as the container changes, and a span keeps meaning half or a third at any width. There is no single global gutter in code: gaps come from the spacing scale per layout, so set your Figma gutter to the gap you intend to spec.

How wide may one block get, regardless of layout? A max width is an absolute ceiling tied to the content: below it the block stays fluid and keeps shrinking with the viewport; at it, the block stops growing. In Figma this is a fixed-width block centered in its region; in code it is w-full max-w-* mx-auto, usually applied from a breakpoint (md:max-w-120) because mobile is full-width anyway. width-sm (480px) is the workhorse, covering hero leads, CTA rows, and form columns; the paragraph measure (720px, max-w-180) caps running prose.

Breakpoints measure the viewport, never the main column: at a 1,280px viewport with the sidebar open, an xl: style is active even though main is only 1,000px wide. That is why lg (1024px) is the moment that matters: it is when the sidebar appears and the gutters widen, and why your two frames are the mobile base and 1440. The full scale below is code’s reference. The recipes under it show what a breakpoint change actually looks like: each pair is the same layout drawn at both of your frames.

The same system at component scale, and the strongest Figma-to-code bridge in the kit: auto layout is flexbox. Vertical auto layout with a gap is flex-col gap-*; horizontal with centered alignment is flex items-center gap-*; small form grids are grid gap-* sm:grid-cols-2. Gaps always come from the spacing scale: a 12px auto-layout gap is gap-3, never an ad-hoc margin.

This page, read the way the system reads it. Every layout decision on the screen you are looking at is one of the tools above, numbered in the schematic and named in the legend.