Padding and Spacing are fundamental layout concepts in Figma used to create clean, balanced, consistent, responsive, and professional user interfaces. Padding controls the space between the boundary of a parent Auto Layout frame and its child objects, while Spacing or Gap controls the distance between child objects inside the frame.
Understanding Padding and Spacing is especially important when designing buttons, cards, forms, navigation bars, dashboards, mobile applications, websites, design systems, and reusable components.
For professional Figma and UI/UX training, explore JustAcademy Figma Training and Register for Figma Course Demo.
Padding is the internal space between the boundary of a parent Auto Layout frame and the child layers inside it. It creates breathing room around the content and prevents the content from touching the edges of the parent container.
+--------------------------------------+
| Padding |
| |
| +------------------------+ |
| | | |
| | Content | |
| | | |
| +------------------------+ |
| |
| Padding |
+--------------------------------------+
For example, if a button contains the text "Get Started", padding determines how much empty space appears between the text and the button's boundary.
Spacing refers to the distance between child elements inside an Auto Layout frame. In Figma, this is primarily controlled using the Gap property.
+--------------------------------+
| Item 1 |
| |
| Gap |
| |
| Item 2 |
| |
| Gap |
| |
| Item 3 |
+--------------------------------+
For example, the gap between a heading and description can be 8px, while the gap between the description and button can be 16px.
| Property | Meaning | Controls | Example |
|---|---|---|---|
| Padding | Space inside the parent | Parent boundary to child | Card edge to title |
| Gap / Spacing | Space between children | Child to child | Title to description |
| Alignment | Position of children | Child positioning inside parent | Centering content |
| Resizing | Controls dimensions | Parent and child size behavior | Hug Contents / Fill Container |
The easiest rule to remember is: Padding = parent edge to content and Gap = content to content.
Figma Auto Layout automatically arranges child layers and provides controls for direction, padding, gap, alignment, and resizing. Auto Layout can be added to selected layers or a frame using Shift + A. :contentReference[oaicite:0]{index=0}
Auto Layout
|
+-- Direction
|
+-- Padding
|
+-- Gap
|
+-- Alignment
|
+-- Resizing
|
+-- Wrap
Auto Layout is particularly useful because the layout can respond automatically when content is added, removed, reordered, or resized. :contentReference[oaicite:1]{index=1}
Uniform padding applies the same value to all four sides.
Top = 16px
Right = 16px
Bottom = 16px
Left = 16px
This is useful for simple cards, buttons, badges, chips, and containers.
Horizontal padding controls the left and right space.
Left = 24px
Right = 24px
Vertical padding controls the top and bottom space.
Top = 16px
Bottom = 16px
Individual padding allows different values for top, right, bottom, and left.
Top = 16px
Right = 24px
Bottom = 20px
Left = 24px
Figma supports uniform padding, horizontal and vertical padding, and individual top, right, bottom, and left values. :contentReference[oaicite:2]{index=2}
Figma also provides canvas controls that allow you to adjust padding directly around an Auto Layout frame. :contentReference[oaicite:3]{index=3}
+------------------------------------+
| 24px |
| |
| 24px +------------------+ 24px |
| | | |
| | Content | |
| | | |
| +------------------+ |
| |
| 24px |
+------------------------------------+
Top = 24px
Right = 24px
Bottom = 24px
Left = 24px
Uniform padding creates a symmetrical and predictable layout.
Instead of entering four separate values, you can use horizontal and vertical padding when opposite sides should have the same value.
Horizontal Padding = 24px
Vertical Padding = 16px
Result:
Left = 24px
Right = 24px
Top = 16px
Bottom = 16px
This is especially useful for buttons, cards, input fields, and navigation elements.
Sometimes each side requires a different value.
Top = 32px
Right = 24px
Bottom = 16px
Left = 24px
This approach is useful for hero sections, asymmetric cards, special content blocks, and complex layouts.
Figma supports CSS-style shorthand input for padding.
1,2,3,4
Top = 1
Right = 2
Bottom = 3
Left = 4
Two values can also be used:
1,2
Top/Bottom = 1
Left/Right = 2
This can make it faster to enter asymmetric padding values. :contentReference[oaicite:4]{index=4}
Gap controls the distance between child layers inside an Auto Layout frame.
Parent Frame
+--------------------------------+
| |
| Heading |
| |
| 16px Gap |
| |
| Description |
| |
| 24px Gap |
| |
| Button |
| |
+--------------------------------+
Unlike padding, gap does not describe the space between a child and the parent boundary. It describes the space or distribution between child objects. :contentReference[oaicite:5]{index=5}
A fixed gap uses a specific numerical value.
Gap = 16px
Item A
|
| 16px
|
Item B
|
| 16px
|
Item C
Fixed gap is useful when you need predictable spacing between elements.
Figma also provides Auto spacing for horizontal and vertical Auto Layout frames. Auto spacing distributes available space between child objects according to the selected spacing behavior. :contentReference[oaicite:6]{index=6}
+--------------------------------------+
| Item A |
| |
| Automatically Distributed |
| Space |
| |
| Item B |
| |
| Automatically Distributed |
| Space |
| |
| Item C |
+--------------------------------------+
| Option | Behavior | Common Use |
|---|---|---|
| Between | Distributes space between objects without adding distribution space at the edges | Navigation bars |
| Evenly | Distributes space equally between objects and edges | Balanced layouts |
| Around | Creates space around objects with edge space related to the gaps | Distributed content |
Figma documents these three Auto spacing behaviors as Between, Evenly, and Around. They correspond conceptually to CSS Flexbox distribution values such as space-between, space-evenly, and space-around. :contentReference[oaicite:7]{index=7}
Professional interfaces commonly use both padding and gap.
+--------------------------------------+
| Padding = 24px |
| |
| Heading |
| |
| Gap = 12px |
| |
| Description |
| |
| Gap = 16px |
| |
| [ Read More ] |
| |
| Padding = 24px |
+--------------------------------------+
Padding controls the outer internal space, while gap controls the space between the individual elements.
A button is one of the best examples for understanding padding.
+--------------------------------+
| Get Started |
+--------------------------------+
Horizontal Padding = 24px
Vertical Padding = 12px
If the text changes from "Start" to "Get Started Now", Auto Layout can allow the button to grow while preserving its internal padding.
+----------------------------------------+
| [Icon] Get Started |
+----------------------------------------+
Button Padding = 16px horizontal
Button Padding = 12px vertical
Icon/Text Gap = 8px
Here, padding controls the space between the button boundary and its contents, while the 8px gap controls the distance between the icon and text.
+--------------------------------------+
| 24px Padding |
| |
| Product Image |
| |
| 16px Gap |
| |
| Product Title |
| |
| 8px Gap |
| |
| Description |
| |
| 16px Gap |
| |
| [ Buy Now ] |
| |
| 24px Padding |
+--------------------------------------+
This structure provides a clear and reusable card layout.
Form Container
+--------------------------------------+
| Padding = 24px |
| |
| Name |
| [____________________________] |
| |
| Gap = 16px |
| |
| Email |
| [____________________________] |
| |
| Gap = 16px |
| |
| Password |
| [____________________________] |
| |
| Gap = 24px |
| |
| [ Submit ] |
+--------------------------------------+
The form container uses padding, while the form fields are separated using gap.
+------------------------------------------------+
| Logo Home About Services Contact |
+------------------------------------------------+
Container Padding = 24px
Navigation Gap = 24px
The container padding separates the navigation content from the outer boundary, while the gap separates individual navigation items.
In Vertical Auto Layout, objects are arranged along the vertical axis.
+-----------------------------+
| Padding |
| |
| Heading |
| |
| Gap |
| |
| Description |
| |
| Gap |
| |
| Button |
| |
| Padding |
+-----------------------------+
Vertical Auto Layout is useful for cards, forms, lists, article content, settings pages, and mobile screen sections. :contentReference[oaicite:8]{index=8}
In Horizontal Auto Layout, objects are arranged along the horizontal axis.
+------------------------------------------------+
| |
| Logo ← Gap → Search ← Gap → Profile |
| |
+------------------------------------------------+
Horizontal Auto Layout is useful for headers, toolbars, navigation menus, button groups, filters, and icon groups. :contentReference[oaicite:9]{index=9}
In Grid Auto Layout, padding controls the space between the outer boundary and grid cells, while gaps control the distance between rows and columns. :contentReference[oaicite:10]{index=10}
+--------------------------------------+
| Padding |
| |
| +------+ Column Gap +------+ |
| | Cell | | Cell | |
| +------+ +------+ |
| |
| Row Gap |
| |
| +------+ +------+ |
| | Cell | | Cell | |
| +------+ +------+ |
| |
+--------------------------------------+
Hug Contents allows an Auto Layout frame to maintain the smallest dimensions required by its children while respecting its padding and other spacing values. :contentReference[oaicite:11]{index=11}
Text Width = 100px
Left Padding = 20px
Right Padding = 20px
Frame Width
= 20 + 100 + 20
= 140px
If the text becomes wider, the frame can grow automatically when its resizing behavior is set appropriately.
Fill Container allows a child layer to occupy the available space inside its parent while respecting the parent's padding and other spacing values. :contentReference[oaicite:12]{index=12}
Parent Width = 400px
Left Padding = 24px
Right Padding = 24px
Available Child Width
= 400 - 24 - 24
= 352px
This is useful for input fields, full-width buttons, cards, and responsive sections.
When a frame has fixed dimensions, its content must still have enough room for the defined padding. Current Figma Auto Layout behavior ensures that padding receives the space it needs instead of being squeezed below its defined values. :contentReference[oaicite:13]{index=13}
Frame Width = 300px
Left Padding = 24px
Right Padding = 24px
Content Area
= 300 - 24 - 24
= 252px
Complex interfaces commonly use multiple nested Auto Layout frames. Each frame can have its own padding and gap.
Page
│
├── Header
│ ├── Logo
│ ├── Navigation
│ └── Profile
│
├── Main Content
│ ├── Heading
│ ├── Card
│ │ ├── Image
│ │ ├── Content
│ │ └── Button
│ └── Footer
For example, the page can have 32px padding, the card can have 24px padding, and the content inside the card can have a 12px gap.
| Problem | Correct Property |
|---|---|
| Content is too close to the parent edge | Increase Padding |
| Title and description are too close | Increase Gap |
| Button text is too close to button edge | Increase Button Padding |
| Cards are too close to each other | Increase Parent Gap |
| Grid cells are too close to the frame edge | Increase Grid Padding |
Many UI design systems use a spacing scale based on multiples of 8. This helps maintain consistency throughout a product.
8px
16px
24px
32px
40px
48px
64px
A practical example could be:
Card Padding = 24px
Title Gap = 16px
Description Gap = 8px
Button Gap = 24px
The exact spacing scale should be defined by the project's design system rather than treated as a mandatory rule.
| Value | Typical Use |
|---|---|
| 4px | Very small relationships |
| 8px | Small internal spacing |
| 12px | Compact component spacing |
| 16px | Standard content spacing |
| 24px | Card and container padding |
| 32px | Large component spacing |
| 48px | Section spacing |
| 64px | Large page-level spacing |
Components can use Auto Layout, padding, gap, alignment, and resizing properties. Padding and gap can also be adjusted on component instances in supported scenarios. :contentReference[oaicite:14]{index=14}
Button Component
│
├── Padding
│ ├── Horizontal = 24px
│ └── Vertical = 12px
│
└── Content
├── Icon
├── Gap = 8px
└── Text
| Variant | Horizontal Padding | Vertical Padding |
|---|---|---|
| Small | 12px | 8px |
| Medium | 16px | 10px |
| Large | 24px | 12px |
Using consistent spacing values across component variants makes a design system easier to maintain.
Padding helps maintain consistent internal spacing when containers change size.
Desktop
+--------------------------------------------+
| 24px | Content | 24px |
+--------------------------------------------+
Tablet
+----------------------------------+
| 24px | Content | 24px |
+----------------------------------+
Mobile
+--------------------------+
| 16px | Content | 16px |
+--------------------------+
Responsive padding values can vary according to the design system and available screen space.
| Screen | Horizontal Padding | Section Padding |
|---|---|---|
| Mobile | 16px | 32px |
| Tablet | 24px | 48px |
| Desktop | 32px | 64px |
These are example values. A real project should define responsive spacing according to its own design system.
Spacing is not only a technical layout property. It communicates relationships and hierarchy.
Heading
↓ 8px
Subtitle
↓ 24px
Main Content
↓ 32px
Next Section
Smaller gaps can indicate that elements belong together, while larger gaps can indicate separation between different groups.
| Density | Approach |
|---|---|
| Compact | Smaller padding and gaps |
| Standard | Balanced spacing |
| Comfortable | Larger internal spacing |
| Spacious | Large section-level spacing |
A dashboard may use compact spacing, while a marketing landing page may use more generous spacing.
Buttons should have enough internal padding to create a comfortable visual and interaction area.
+--------------------------------+
| Continue Shopping |
+--------------------------------+
Horizontal Padding = 24px
Vertical Padding = 12px
Card Padding = 24px
Image
↓
Gap = 16px
↓
Title
↓
Gap = 8px
↓
Description
↓
Gap = 16px
↓
Button
Cards generally benefit from clear separation between content groups while maintaining consistent outer padding.
+------------------------------------+
| Search products... |
+------------------------------------+
Left Padding = 16px
Right Padding = 16px
Top Padding = 12px
Bottom Padding= 12px
Internal padding keeps input text and icons away from the field boundary.
Navigation Item
+------------------+
| Home |
+------------------+
Horizontal Padding = 16px
Vertical Padding = 12px
Gap between items = 8px
Navigation padding can create comfortable click or tap areas while gap separates neighboring navigation items.
+----------------------+
| New Feature |
+----------------------+
Horizontal Padding = 12px
Vertical Padding = 6px
Badges and chips generally use compact padding because they contain short pieces of information.
Padding determines the available inner area while alignment determines how children are positioned inside that area.
+--------------------------------------+
| |
| Center Aligned |
| |
| Content |
| |
+--------------------------------------+
If the alignment looks incorrect, check both the padding and alignment settings rather than changing the child position manually.
Consistent padding and gap values make developer handoff easier because the intended spacing relationships can be translated into CSS and other implementation technologies.
Figma
↓
Auto Layout
↓
Padding + Gap
↓
Spacing Rules
↓
Developer Handoff
↓
CSS Flexbox / Grid
| Figma Property | Common CSS Equivalent |
|---|---|
| Padding | padding |
| Horizontal Padding | padding-left / padding-right |
| Vertical Padding | padding-top / padding-bottom |
| Gap | gap |
| Horizontal Gap | column-gap |
| Vertical Gap | row-gap |
.card {
padding: 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
Figma Auto Layout shares many concepts with CSS Flexbox, including direction, padding, gap, alignment, and flexible sizing. This makes a well-structured Figma design easier to translate into a web implementation. :contentReference[oaicite:15]{index=15}
Figma Auto Layout
↓
Direction
↓
Padding
↓
Gap
↓
Alignment
↓
Resizing
↓
CSS Flexbox
Create a frame and apply Auto Layout.
Choose Vertical Auto Layout.
Top = 24px
Right = 24px
Bottom = 24px
Left = 24px
Add a product image to the top of the card.
Add product name, description, price, and action button.
Image → Title = 16px
Title → Description = 8px
Description → Price = 12px
Price → Button = 16px
Replace the product title with longer text and check whether the card expands correctly.
Login Card
│
├── Padding = 32px
│
├── Logo
│
├── Gap = 24px
│
├── Email Field
│
├── Gap = 16px
│
├── Password Field
│
├── Gap = 24px
│
└── Login Button
Use nested Auto Layout so the form container controls the major spacing while individual controls manage their own internal padding.
Mobile Screen
│
├── Screen Padding = 16px
│
├── Header
│
├── Gap = 24px
│
├── Search Bar
│
├── Gap = 24px
│
├── Categories
│
├── Gap = 24px
│
└── Product List
This structure creates a clear and reusable mobile layout.
Problem:
Content is too close to card edge.
Wrong:
Increase Gap.
Correct:
Increase Padding.
If the problem is between the parent boundary and its child, use padding. If the problem is between two child layers, use gap.
Card Padding = 64px
Small Content
Result:
Large empty areas
Low information density
Unbalanced layout
Use padding according to the component size, content, hierarchy, and design system.
Less Consistent:
13px
19px
27px
33px
41px
More Consistent:
8px
16px
24px
32px
48px
Using a defined spacing scale helps maintain visual consistency.
Not Recommended:
Text
↓
Invisible Rectangle
↓
Button
Recommended:
Text
↓
Auto Layout Gap
↓
Button
Use Auto Layout gap when the empty space represents a layout relationship rather than actual content.
Manual Layout
Text → Move 16px
Button → Move 16px
Icon → Move 8px
Auto Layout
Padding = 24px
Gap = 16px
Icon Gap = 8px
Auto Layout is usually more maintainable for repeated and responsive spacing relationships.
Current Figma Auto Layout behavior prevents Auto gap from becoming negative when children do not fit. Instead of causing accidental overlap, the gap stops at zero and the objects sit next to each other. Intentional overlap can still be created using a specific negative gap value. :contentReference[oaicite:16]{index=16}
Auto Gap
Children fit:
[A] [B] [C]
Children do not fit:
[A][B][C]
Intentional negative gap:
[A][B][C]
overlapping intentionally
Equal padding on all sides often creates a balanced appearance, but asymmetric padding can sometimes produce better visual results depending on the component and content.
Balanced:
Top = 24px
Right = 24px
Bottom = 24px
Left = 24px
Asymmetric:
Top = 32px
Right = 24px
Bottom = 16px
Left = 24px
Good spacing improves readability and can help create comfortable interaction areas for buttons, navigation items, forms, and other controls. Padding should be considered together with typography, component dimensions, platform conventions, and accessibility requirements.
Dashboard
│
├── Sidebar Padding = 16px
├── Header Padding = 24px
├── Content Padding = 32px
│
├── Card
│ ├── Padding = 24px
│ └── Gap = 16px
│
└── Table
└── Cell Padding = 12px
Consistent spacing creates visual order in information-heavy dashboards.
Mobile Screen
+--------------------------+
| 16px |
| |
| Content |
| |
| 16px |
+--------------------------+
Mobile layouts generally require careful control of horizontal padding because available screen width is limited.
Hero Section
+--------------------------------------------+
| |
| Hero Content |
| |
+--------------------------------------------+
Example:
Top = 64px
Bottom = 64px
Left = 32px
Right = 32px
Section-level padding can create visual separation between major areas of a website.
When components are nested, each layer should have a clear spacing purpose.
Page
└── Card Padding = 24px
└── Content Component
└── Padding = 16px
Avoid unnecessary nested padding because it can create excessive empty space.
A design system can define reusable spacing tokens so that designers use consistent values throughout a product.
space-1 = 4px
space-2 = 8px
space-3 = 12px
space-4 = 16px
space-5 = 24px
space-6 = 32px
space-7 = 48px
space-8 = 64px
These tokens can be reused for padding, gaps, section spacing, card spacing, form spacing, and component dimensions.
Product Card
│
├── Padding = 24px
│
├── Product Image
│
├── Gap = 16px
│
├── Product Name
│
├── Gap = 8px
│
├── Rating
│
├── Gap = 8px
│
├── Price
│
├── Gap = 16px
│
└── Buy Button
├── Horizontal Padding = 20px
├── Vertical Padding = 12px
└── Icon/Text Gap = 8px
Profile Card
+--------------------------------+
| Padding 24px |
| |
| [Avatar] |
| |
| Gap = 12px |
| |
| John Smith |
| |
| Gap = 8px |
| |
| UI/UX Designer |
| |
| Gap = 16px |
| |
| [ Follow ] |
| |
+--------------------------------+
Pricing Card
│
├── Padding = 32px
│
├── Plan Name
│
├── Gap = 8px
│
├── Price
│
├── Gap = 24px
│
├── Feature List
│ ├── Gap = 12px
│ ├── Gap = 12px
│ └── Gap = 12px
│
└── CTA Button
└── Padding = 12px 24px
Modal
+--------------------------------------+
| Padding = 32px |
| |
| Title |
| |
| Gap = 12px |
| |
| Description |
| |
| Gap = 24px |
| |
| [Cancel] [Confirm] |
| |
+--------------------------------------+
Header
+--------------------------------------------------+
| 24px | Logo | Gap | Navigation | Gap | Profile |
+--------------------------------------------------+
Header Padding = 24px
Navigation Gap = 24px
Parent Edge → Padding → Child
Child → Gap → Child
Parent Size → Resizing
Child Position → Alignment
Repeated Structure → Auto Layout
Reusable Structure → Components
Padding is the space between the boundary of a parent Auto Layout frame and its child objects.
Gap is the distance or distribution of space between child objects inside an Auto Layout frame.
Padding controls the space between the parent boundary and children, while gap controls the space between sibling children.
Yes. Figma supports separate top, right, bottom, and left padding values.
Auto spacing distributes available space between child objects based on the selected distribution mode.
Padding is commonly used in buttons, cards, forms, navigation bars, modals, inputs, containers, and page sections.
Gap is commonly used between headings, descriptions, buttons, cards, form fields, navigation items, and list elements.
Auto Layout allows spacing relationships to adapt when content is added, removed, reordered, or resized.
Hug Contents allows an Auto Layout frame to maintain the smallest size required by its child content while respecting spacing values.
Fill Container allows a child layer to occupy available space inside its parent while respecting the parent's spacing.
Yes. Components can use Auto Layout with padding, gap, alignment, and resizing properties.
A spacing system is a predefined set of reusable spacing values used consistently throughout a design.
Create a responsive product card in Figma using the following requirements:
| Term | Remember |
|---|---|
| Padding | Space between parent edge and child |
| Gap | Space between children |
| Fixed Gap | Specific numeric spacing |
| Auto Gap | Automatically distributes available space |
| Hug Contents | Parent adapts to child content |
| Fill Container | Child fills available parent space |
| Alignment | Controls child positioning |
| Nested Auto Layout | Combines multiple layout structures |
| Spacing System | Consistent reusable spacing values |
Padding and Spacing are essential concepts for creating professional and responsive layouts in Figma. Padding controls the internal space between a parent frame and its content, while Gap controls the distance between child elements. When combined with Auto Layout, alignment, resizing, and a consistent spacing system, these properties allow designers to create flexible, reusable, and maintainable interfaces.
Learning Padding and Spacing properly is important for designing buttons, cards, forms, dashboards, mobile applications, websites, navigation systems, and complete design systems. Instead of manually positioning every element, designers can establish layout rules that automatically adapt when content or screen sizes change.
For structured Figma and UI/UX learning, visit JustAcademy Figma Training and Register for Figma Course Demo.
