Common spacing mistakes in Figma and how to avoid them
Introduction
Good design relies on rhythm. When spacing is inconsistent—10px here, 13px there—the design feels 'cheap' or 'off'.
This guide highlights the most frequent spacing errors beginners make and how to replace them with a systematic approach.
Guide Steps
The Problem: Eyeballing distances
Dragging elements until they 'look right' results in random numbers like 17px or 23.5px. This makes development a nightmare and the final product messy.
The Solution: Use an 8pt Grid
Commit to a spacing scale (e.g., multiples of 4 or 8). Only use values like 4, 8, 16, 24, or 32px for gaps and padding. Type these numbers manually into the Auto Layout panel rather than dragging handles.
The Problem: Inconsistent container padding
One button has 10px padding, another has 12px. One card has 20px padding, another has 24px.
The Solution: Component-level spacing
Define padding at the Main Component level. If all cards are instances of one master component, you only have to set the padding once, and it's guaranteed to be consistent everywhere.
What to avoid
Avoid using the arrow keys to nudge items without holding Shift. (Shift + Arrow nudges by your 'Big Nudge' amount, usually 10px or 8px, keeping you on grid).
Pro-Level Design Tips & Workflows
💡 Canvas Shortcut: Select any parent Auto Layout frame and double-click the inner padding lines directly on the canvas to set sizing values visually without clicking the sidebar.
💡 Spacing Variables: Always bind padding and gap spacings to dynamic variables (e.g. space/8 or space/16) to support system theming scaling.
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.