Random paddings are the first thing a senior notices in a junior's file. Here is a simple 4px based scale, how to turn it into variables and how to use it with auto layout.
Open a file from your first year of design and look at the paddings: 13, 17, 22, 9. Every value was chosen by eye, and the screen feels slightly off without anyone being able to say why. A spacing system fixes this in one afternoon.
1. Pick a base and a short scale
Use 4px as the base. Every space in the file is a multiple of 4. Then keep a short list of steps you actually use:
- 4 and 8 for space inside small controls
- 12 and 16 for space inside cards and between related items
- 24 and 32 for space between groups
- 48, 64 and 96 for space between sections
2. Turn the scale into variables
- 01Open the Variables panel and create a collection called Spacing.
- 02Add number variables named by size, like space-4, space-8 and so on, or by role, like gap-sm and pad-card.
- 03Set the scope to Gap and Padding so they only appear where they make sense.
3. Use it with auto layout
Every frame with auto layout now takes its padding and gap from a variable instead of a typed number. Change one variable and every card in the file updates. Developers can read the same names in Dev Mode, so the spacing in code matches the design.
4. Audit the old screens
Go through your main screens and replace each odd value with the closest step. You will notice that equal things start to look equal, and the layout suddenly feels intentional. That feeling is the whole point.