A Spacing System in Figma is a structured and reusable approach to defining the space between, around, and inside UI elements. It helps designers maintain visual consistency, hierarchy, alignment, and rhythm across screens, components, and complete products.
A well-defined spacing system reduces random spacing decisions and makes designs easier to build, review, scale, and hand off to developers. Common spacing systems use a base unit such as 4px or 8px and create a predictable scale from it.
For professional UI design, spacing works closely with Auto Layout, layout guides, grids, components, typography, responsive design, and design-system documentation. Figma's Auto Layout supports vertical, horizontal, and grid flows, with properties such as gap and padding for controlling spacing.
Learn professional Figma design through JustAcademy Figma Training and explore the Register for Figma Course Demo.
A Spacing System is a predefined set of spacing values used consistently throughout a design. Instead of choosing random values such as 13px, 17px, 23px, and 29px, a designer follows an approved spacing scale such as 4px, 8px, 12px, 16px, 24px, 32px, 40px, and 48px.
Spacing System = A consistent set of predefined values used to control the empty space between and around interface elements.
Spacing is one of the fundamental foundations of a design system. Along with color, typography, grids, icons, components, and interaction states, spacing defines how the interface is structured.
Design System
↓
Spacing Scale
↓
Layout Rules
↓
Components
↓
Screens
↓
Consistent Product Experience
Spacing communicates relationships between elements. Smaller spacing usually indicates stronger relationships, while larger spacing can indicate separation between groups or sections.
Title
↓ 8px
Description
↓ 16px
Button
↓ 32px
Next Section
Elements that belong together should generally have smaller internal spacing, while separate groups can use larger spacing.
| Relationship | Example Spacing |
|---|---|
| Icon and label | 4px–8px |
| Title and description | 8px–16px |
| Form fields | 16px–24px |
| Content groups | 24px–40px |
| Major sections | 40px–80px |
The base spacing unit is the smallest standard value from which other spacing values are derived. A design system may use 4px or 8px as its base unit.
Base Unit = 8px
8 × 1 = 8px
8 × 2 = 16px
8 × 3 = 24px
8 × 4 = 32px
8 × 5 = 40px
8 × 6 = 48px
A 4-point system uses multiples of 4 as its primary spacing values.
4
8
12
16
20
24
28
32
36
40
48
56
64
An 8-point system uses multiples of 8 as its primary spacing values. It is a popular approach for UI layouts and can be used with both fixed and responsive layouts.
8
16
24
32
40
48
56
64
72
80
A spacing system does not have to use only multiples of 8. Some systems use a modified 8-point approach and allow smaller values such as 4px or 6px when required by specific UI situations. This provides controlled flexibility while maintaining overall consistency.
A spacing scale is the complete collection of approved spacing values in a design system.
| Token | Value | Typical Use |
|---|---|---|
| space-1 | 4px | Very small gaps |
| space-2 | 8px | Icon-label spacing |
| space-3 | 12px | Compact content |
| space-4 | 16px | Standard spacing |
| space-6 | 24px | Component spacing |
| space-8 | 32px | Group spacing |
| space-10 | 40px | Section spacing |
| space-12 | 48px | Large section spacing |
| space-16 | 64px | Major layout spacing |
Spacing tokens are named references for approved spacing values. They allow designers and developers to communicate spacing consistently.
space-1 = 4px
space-2 = 8px
space-3 = 12px
space-4 = 16px
space-6 = 24px
space-8 = 32px
space-10 = 40px
space-12 = 48px
space-16 = 64px
Instead of using only numeric names, a system can define semantic names based on usage.
space-component-inline = 8px
space-component-stack = 16px
space-section = 32px
space-page-section = 64px
| Numeric | Semantic |
|---|---|
| space-4 | space-input-gap |
| space-8 | space-card-content |
| space-16 | space-form-field |
| space-32 | space-section |
Padding is the space between the boundary of a container and its child content. In Figma Auto Layout, padding can be applied uniformly, horizontally and vertically, or individually to the top, right, bottom, and left sides.
┌─────────────────────────┐
│ Padding │
│ ┌─────────────────┐ │
│ │ Content │ │
│ └─────────────────┘ │
│ Padding │
└─────────────────────────┘
Margin refers to space outside an element relative to surrounding elements or containers. In Figma, designers often create the visual equivalent through Auto Layout gaps, parent padding, layout guides, and positioning rules.
Gap defines the distance between sibling objects inside an Auto Layout frame. Figma allows a specified numeric gap or automatic spacing in supported horizontal and vertical flows.
Item A
↓
16px Gap
↓
Item B
↓
16px Gap
↓
Item C
| Property | Controls |
|---|---|
| Padding | Space between parent boundary and children |
| Gap | Space between sibling children |
Internal spacing controls relationships inside a component, such as the space between an icon and label, title and description, or input label and field.
External spacing controls the relationship between a component and other components or sections.
Component A
↓ 24px
Component B
↓ 32px
Component C
Micro spacing is used for very small relationships such as icons, badges, labels, and inline elements.
| Use | Possible Value |
|---|---|
| Icon to text | 4px–8px |
| Badge padding | 4px–8px |
| Small inline elements | 4px–12px |
Component spacing defines how content is arranged inside reusable components such as buttons, cards, inputs, menus, and navigation items.
Section spacing creates separation between major areas of a page. It should usually be larger than the spacing used inside individual components.
Component spacing → 8px / 16px
Group spacing → 24px / 32px
Section spacing → 48px / 64px
Page spacing → 64px / 80px
Spacing and typography should be designed together. Font size, line height, paragraph spacing, heading spacing, and section spacing all contribute to vertical rhythm.
Vertical rhythm is the consistent relationship between vertical measurements across a design. A spacing system helps create predictable rhythm between headings, paragraphs, cards, forms, and sections.
Line height should work harmoniously with the spacing scale. A design system can align typography and spacing values so that text blocks sit naturally within layouts.
Spacing systems and grid systems solve related but different problems. A grid helps establish structural alignment, while spacing defines distances between and around elements.
Figma layout guides are visual aids used to keep designs aligned and structured. Layout guides can include uniform grids, columns, and rows.
8px → Small spacing
16px → Standard spacing
24px → Component spacing
32px → Group spacing
40px → Large spacing
48px → Section spacing
64px → Major section spacing
A hard grid places objects on fixed increments of 8px. In Figma, a uniform layout guide with a size of 8 can be used to visualize this approach.
A soft grid focuses on making distances between elements divisible by 8 instead of forcing every object edge to sit directly on a fixed grid.
A modular grid combines columns and rows to create a structured two-dimensional layout. It is useful for dashboards, editorial layouts, cards, galleries, and complex interfaces.
A baseline grid uses evenly spaced horizontal lines to create consistent vertical rhythm. An 8-point baseline grid is one common approach.
A column grid divides a layout into vertical columns. Margins define the outer space, while gutters define the space between columns.
| Margin | Column | Gutter | Column | Gutter | Column | Margin |
| | | | | | | |
Auto Layout is one of the most important Figma features for implementing spacing systems. It allows designers to define padding, gaps, alignment, direction, and resizing behavior so layouts respond automatically to content changes.
Select a frame or layers and use Shift + A to add Auto Layout. Figma can then arrange children using vertical, horizontal, or grid flows.
Vertical Auto Layout is useful for content that flows from top to bottom, such as forms, cards, lists, article sections, and mobile screens.
Horizontal Auto Layout is useful for navigation bars, button groups, icon-label combinations, toolbars, and horizontal cards.
Grid Auto Layout arranges children into rows and columns and is useful for structured layouts such as dashboards, galleries, tables, and bento-style interfaces.
Gap controls the distance between child objects. A specific numeric value gives precise spacing control.
Gap = 16px
[Item 1] 16px [Item 2] 16px [Item 3]
Figma supports automatic spacing for supported horizontal and vertical Auto Layout flows. Options include Between, Evenly, and Around.
Between distributes available space between objects while keeping no additional space at the outer edges of the distribution.
Evenly distributes space equally between objects and the edges.
Around distributes space around objects, with the spaces at the edges being half the size of the spaces between adjacent objects.
Padding can be set on all sides, horizontally and vertically, or individually. This makes it possible to create reusable components whose internal spacing remains consistent as content changes.
Hug contents allows a frame to size itself around its children while respecting the defined spacing and padding.
Fill container allows a child to use available space within its parent. This is useful for responsive layouts where spacing and dimensions need to adapt to the container.
Fixed sizing keeps a layer at a defined width or height. Fixed dimensions should be used intentionally when the design requires a specific size.
A common button structure includes horizontal padding, vertical padding, and a gap between icon and label.
┌─────────────────────────────┐
│ 16px Icon 8px Label 16px │
└─────────────────────────────┘
↑
12px vertical padding
Cards commonly use consistent internal padding and controlled spacing between image, title, description, metadata, and actions.
Card
↓ 24px padding
Image
↓ 16px
Title
↓ 8px
Description
↓ 16px
Action
Forms require clear vertical relationships between labels, inputs, helper text, validation messages, and fields.
| Element Relationship | Example |
|---|---|
| Label → Input | 8px |
| Input → Helper text | 4px–8px |
| Field → Field | 16px–24px |
| Field group → Field group | 24px–32px |
Navigation requires consistent spacing between menu items, icons, labels, and navigation groups. Auto Layout is especially useful for keeping these relationships consistent.
List spacing should distinguish individual items while keeping related information grouped together.
Tables need consistent cell padding, row height, column spacing, and section separation to remain readable.
Dashboard interfaces often combine page padding, grid gaps, card padding, widget spacing, and section spacing. A spacing system prevents the dashboard from becoming visually inconsistent.
Mobile interfaces require careful use of spacing because screen dimensions are limited. Consistent padding and gaps improve touch usability and readability.
A mobile design can use a consistent horizontal page padding such as 16px or 24px, depending on the design system.
| 16px | Content Area | 16px |Desktop layouts can use larger outer margins and wider section spacing while maintaining the same internal spacing scale.
Responsive spacing means that spacing decisions adapt appropriately to different screen sizes. The underlying spacing scale should remain predictable even when container dimensions change.
| Breakpoint | Page Padding | Section Spacing |
|---|---|---|
| Mobile | 16px | 32px–48px |
| Tablet | 24px | 40px–64px |
| Desktop | 32px+ | 48px–80px |
Reusable components should define their own internal spacing rules instead of relying on manual spacing every time they are placed on a screen.
Components can have variants such as compact, default, and spacious when the product genuinely requires different density levels.
Button
├── Compact
├── Default
└── Large
Card
├── Compact
├── Default
└── Spacious
Compact spacing is useful for dense dashboards, data tables, admin tools, and interfaces where users need to see large amounts of information.
Comfortable spacing provides more breathing room and is suitable for consumer products, marketing pages, and content-heavy interfaces.
Spacious layouts use larger gaps and padding to create a premium, calm, or editorial visual experience.
Negative space is the empty area around and between design elements. A spacing system turns negative space into an intentional design tool rather than random emptiness.
Small gap
→ Strong relationship
Medium gap
→ Related group
Large gap
→ Separate section
Appropriate spacing improves readability, reduces visual crowding, and makes controls easier to understand. Spacing should also support sufficient touch targets and clear interactive relationships.
Interactive controls should have enough physical and visual separation to reduce accidental activation. Spacing should be considered together with the actual control size and interaction requirements.
Equal spacing is not always visually equal. Designers should consider the size, weight, shape, and visual density of objects when deciding whether a spacing value feels balanced.
Optical spacing means adjusting mathematically consistent spacing when visual perception makes elements appear closer or farther apart. This should be used carefully so that exceptions do not destroy the overall system.
A good spacing system allows intentional exceptions. An exception should solve a real design problem and should not simply be introduced because a designer prefers an arbitrary value.
When an exception is necessary, document the reason, approved value, and intended usage so that other designers understand why it exists.
Spacing decisions can be documented through design-system documentation, layout guides, variables, components, and reusable Auto Layout patterns. Spatial definitions can be documented as references within a design system.
Spacing values can be represented as variables or tokens in a design system so that designers and developers share consistent values.
space/1 = 4
space/2 = 8
space/3 = 12
space/4 = 16
space/6 = 24
space/8 = 32
space/12 = 48
space/16 = 64
Spacing variables can be used to create consistent component padding and layout values. If a system value changes, dependent designs can be updated more systematically.
A developer can translate spacing tokens into CSS variables, design tokens, or framework-specific values.
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
}
| Figma Concept | CSS Concept |
|---|---|
| Auto Layout gap | gap |
| Padding | padding |
| Horizontal flow | flex-direction: row |
| Vertical flow | flex-direction: column |
| Between | justify-content: space-between |
| Evenly | justify-content: space-evenly |
| Around | justify-content: space-around |
Spacing tokens provide a bridge between design decisions and implementation. They make it easier for design and development teams to use the same approved values.
Primitive tokens describe raw spacing values.
space-4 = 4px
space-8 = 8px
space-12 = 12px
space-16 = 16px
space-24 = 24px
Semantic tokens describe why a spacing value is used.
button-padding-inline
card-padding
form-field-gap
section-gap
page-padding
Micro
↓
Component
↓
Group
↓
Section
↓
Page
| Level | Value | Typical Usage |
|---|---|---|
| XS | 4px | Micro spacing |
| SM | 8px | Icon/text relationships |
| MD | 16px | Component content |
| LG | 24px | Groups |
| XL | 32px | Sections |
| 2XL | 48px | Large sections |
| 3XL | 64px | Page-level spacing |
Spacing names should be predictable and easy to understand. Numeric scales are useful for foundations, while semantic names can be useful for component-specific or contextual usage.
space-1
space-2
space-3
space-4
space-6
space-8
space-12
space-16
small-gap-final
new-spacing
test-space
homepage-space
random-16
A spacing system should be designed alongside typography, not separately. Heading sizes, line heights, paragraph spacing, and section spacing should create a coherent rhythm.
Color establishes visual grouping while spacing establishes structural grouping. Together they help users understand hierarchy and relationships.
Buttons, cards, inputs, navigation items, modals, and other components should follow shared spacing rules whenever they serve similar purposes.
A spacing audit checks a design for inconsistent values, unnecessary exceptions, incorrect padding, inconsistent gaps, and components that do not follow the spacing system.
Design linters can help identify inconsistencies such as incorrect spacing or missing styles. Design-system maintenance should include regular checks for consistency.
When spacing is built into reusable components, designers do not need to manually recreate the same spacing relationships every time.
Foundations
├── Colors
├── Typography
├── Spacing
├── Grid
├── Icons
└── Effects
↓
Components
↓
Patterns
↓
Screens
Audit Existing UI
↓
Choose Base Unit
↓
Create Spacing Scale
↓
Define Tokens
↓
Document Usage
↓
Build Components
↓
Apply Auto Layout
↓
Test Responsive Screens
↓
Audit and Maintain
Create a button component with a text label and optional icon. Add horizontal and vertical padding and define a consistent icon-label gap.
Button
Padding Top = 12px
Padding Bottom = 12px
Padding Left = 16px
Padding Right = 16px
Icon Gap = 8px
Card Padding = 24px
Image → Title = 16px
Title → Description = 8px
Description → Action = 16px
Form Container Padding = 32px
Title → Subtitle = 8px
Subtitle → Email = 24px
Label → Input = 8px
Email → Password = 16px
Password → Button = 24px
Page Padding = 32px
Header → Content = 32px
Card Gap = 24px
Card Padding = 24px
Card Content Gap = 16px
Section Gap = 48px
Create a complete e-commerce page using a consistent spacing system. Define page padding, navigation spacing, product-card padding, product-grid gaps, filter spacing, and section spacing.
Page
├── Header
│ ├── Logo
│ ├── Navigation
│ └── Actions
├── Hero
├── Category Section
├── Product Grid
│ ├── Product Card
│ ├── Product Card
│ └── Product Card
└── Footer
Create a mobile banking interface using consistent page padding, card spacing, transaction-list spacing, button spacing, and section separation.
Build an admin dashboard with cards, charts, tables, filters, navigation, and forms. Use a common spacing scale for all major UI elements.
Create a dedicated Figma page containing spacing documentation, token names, examples, Auto Layout components, layout guides, and usage rules.
SPACING SYSTEM
4px → Micro
8px → Small
12px → Compact
16px → Default
24px → Component
32px → Group
48px → Section
64px → Major Section
A spacing documentation page should show each value visually, explain its intended use, and provide examples of where the value should and should not be used.
A mature design system should define who can add, modify, deprecate, or approve spacing tokens. Governance prevents uncontrolled growth of spacing values.
When changing a spacing value used by many components, document the change and evaluate its effect on existing designs and development.
If an old spacing token should no longer be used, mark it as deprecated, provide a replacement, and gradually migrate existing components.
| Concept | Meaning |
|---|---|
| Spacing System | Defined set of spacing values |
| Base Unit | Foundation value of the spacing scale |
| Gap | Space between sibling elements |
| Padding | Space inside a container around its content |
| Margin | Space outside an element |
| 8-Point Grid | Spacing approach based primarily on multiples of 8 |
| Token | Named reusable design value |
| Auto Layout | Responsive layout feature for arranging and spacing objects |
Analyze Existing Designs
↓
Identify Repeated Values
↓
Choose Base Unit
↓
Create Spacing Scale
↓
Define Tokens
↓
Document Usage
↓
Create Layout Guides
↓
Build Auto Layout Components
↓
Apply Spacing Consistently
↓
Test Responsive Layouts
↓
Audit Designs
↓
Maintain Design System
Spacing Systems in Figma provide a structured foundation for creating clean, consistent, scalable, and responsive user interfaces. Instead of treating empty space as an arbitrary visual choice, a spacing system turns it into an intentional design language.
By combining a consistent spacing scale with Auto Layout, layout guides, grids, components, variables, tokens, typography, and responsive rules, designers can build interfaces that remain visually consistent as products grow.
A strong spacing system should be simple enough for designers to remember, structured enough for teams to follow, flexible enough for real-world interfaces, and documented well enough for developers to implement accurately.
To learn more about professional Figma design and design-system workflows, visit JustAcademy Figma Training or Register for Figma Course Demo.
