Padding plays a crucial role in UI design—it defines the internal spacing between content and its container, helping to create balance, structure, and readability. In Figma, adding padding is incredibly easy when you use Auto Layout, a powerful feature that controls spacing and alignment dynamically. This guide will show you exactly how to apply padding in Figma for components like buttons, cards, input fields, and layout containers.
🧱 What Is Padding in Figma?
Padding is the space inside a frame between its edge and the content within. Unlike margin (which is spacing between elements), padding keeps elements like text or icons from touching the borders of their containers.
In Figma, padding is available only on frames that have Auto Layout enabled.
✅ Step-by-Step: How to Add Padding Using Auto Layout
1. Select Your Elements
Start with any group of items you want to add padding around—for example, a text label inside a button or a combination of icon + text.
2. Apply Auto Layout
- Select the container frame or group.
- Press
Shift + Ato apply Auto Layout. - The container will convert into a frame with layout settings visible in the right-hand panel.
3. Set Padding Values
In the Auto Layout settings on the right:
- Toggle “Individual padding” if you want to set different values for top, bottom, left, and right.
- Or use a uniform padding value to keep all sides the same.
Example:
- Top: 12
- Bottom: 12
- Left: 20
- Right: 20
You’ll see your container resize to accommodate this spacing.
🧠 Why Use Auto Layout for Padding?
Using Auto Layout ensures that:
- Padding adjusts automatically when content changes
- You maintain consistent spacing across your components
- Your design system remains scalable and responsive
It’s especially useful for buttons, cards, tags, and input fields where text length can vary.
🔄 Adjusting Padding on Existing Auto Layout Frames
Already have Auto Layout applied? Just select the frame and:
- Head to the right-hand sidebar under “Auto Layout”
- Edit the padding values directly
- You’ll see instant visual updates on the canvas
🎨 Bonus: Padding with Nested Auto Layout
You can also nest Auto Layout frames to create layouts with both horizontal and vertical padding layers.
Example:
- Outer frame handles vertical padding
- Inner frame handles horizontal padding between text and icon
This gives you fine-grained control for complex UI components.
Final Thoughts
Adding padding in Figma is as simple as enabling Auto Layout and tweaking a few values—but it makes a big impact on the clarity and polish of your designs. Whether you’re building a button, form, or entire layout grid, mastering padding helps ensure your interface feels balanced, readable, and professionally crafted.
Designilo 