Spacing
Just like your color scale, working from a defined spacing system allows you to work faster and more consistently. Consistent and scalable spacing helps you eliminate guesswork whilst designing and developing because you're designing with a limited set of options.
Spacing system guides
These spacing system guides are useful for annotating designs to make things easier for developers when inspecting Figma files. Figma’s Inspect feature is great, but sometimes it’s helpful to make it more obvious.
| Name | Size (16px base) | Pixels | |
|---|---|---|---|
| 1 | 0.25rem | 4px | |
| 2 | 0.5rem | 8px | |
| 3 | 0.75rem | 12px | |
| 4 | 1rem | 16px | |
| 5 | 1.25rem | 20px | |
| 6 | 1.5rem | 24px | |
| 8 | 2rem | 32px | |
| 10 | 2.5rem | 40px | |
| 12 | 3rem | 48px | |
| 16 | 4rem | 64px | |
| 20 | 5rem | 80px | |
| 24 | 6rem | 96px | |
| 40 | 10rem | 160px | |
| 48 | 12rem | 192px | |
| 56 | 14rem | 224px | |
| 64 | 16rem | 256px |
Container
Working from a pre-defined and limited container spacing system allows you to work faster and consistently.
| Name | Size (16px base) | Pixels | |
|---|---|---|---|
| sm | 40rem | 640px | |
| md | 48rem | 768px | |
| lg | 64rem | 1024px | |
| xl | 80rem | 1280px |