Target Device
Spacing needs differ across screens. Pick your primary target - recommendations below adapt.
Base Configuration
Set your foundation. 8px is the industry standard used by iOS, Material Design, and Bootstrap.
Base Unit
Scale Progression
Number of Steps:
8
Visual Scale
Your complete spacing system. Click any row to copy the value.
Quick Reference
Grid System
Configure columns, gutters, and container. The foundation of every modern layout.
Columns
Gutter Size
Container
Common Layout Presets
Where to Use Each Size
Practical guide for common UI properties across screen sizes.
Property
Mobile
Tablet
Desktop
Live Examples
Real-world layouts using your spacing scale. Hover for size values.
01 Landing Page Hero
NEW RELEASE
Build Beautiful UIs Faster
Consistent spacing makes designs feel professional and polished.
padding: 2xl · stack: md · button: sm md
02 3-Column Grid (12-col)
Feature One
Each card spans 4 columns of the 12-column grid.
Feature Two
The gutters between cards come from your scale.
Feature Three
Consistent padding keeps hierarchy clear.
col-span: 4 4 4 · gap: lg · padding: md
03 Sidebar Layout
cols: 3 + 9 · gap: xl · padding: lg
04 Stacked Form
stack: md · label margin: xs · padding: md
05 Card Component
DESIGN
Spacing Systems 101
Learn the fundamentals of building consistent spacing systems for your designs.
padding: lg · stack: sm md · gap: md
06 Button Size System
sm: 6 12 · md: 8 16 · lg: 12 24 · gap: sm
Export Your System
Ready-to-use code including spacing scale, grid system, and responsive breakpoints.
01
Create Variables Collection
Open Local Variables in Figma. Create a new collection called Spacing. Add each value as a Number variable.
02
Use Auto Layout
Select a frame and press Shift + A for Auto Layout. Apply your spacing variables to padding and gap values.
03
Enable Layout Grid
Select your frame, click the + next to Layout Grid in right panel. Choose Columns with 12 count and your gutter value.
04
Create Responsive Frames
Make 3 frames: Mobile (375), Tablet (768), Desktop (1440). Apply viewport-specific spacing from the table above.
Pro Tip: Publish your spacing variables as a team library. Every designer in your team will then use the exact same values - no more 15px vs 16px debates.
01
Define CSS Variables
Copy the CSS export above. Paste it in your main stylesheet inside :root.
02
Use Variables Everywhere
Never hardcode spacing again. Always reference variables in padding, margin, gap, and top/bottom properties.
.card {
padding: var(--space-lg);
}03
Implement 12-Column Grid
Use CSS Grid with repeat(12, 1fr) for true 12-column layouts. Use grid-column: span N for card widths.
04
Override on Mobile
Use media queries to override variable values at smaller breakpoints. Tighter spacing makes mobile feel right.
Pro Tip: Use
clamp() for fluid spacing between breakpoints: padding: clamp(16px, 4vw, 64px). Scales smoothly on every screen.