How to Set Padding in Auto Layout in Figma

In Figma, you set padding in an Auto Layout frame by selecting the frame and adjusting the Padding values in the right sidebar under the Auto Layout section. You can set padding for all sides at once or individually for top, bottom, left, and right to control space inside the frame around its child elements.

Syntax

In Figma's Auto Layout, padding is controlled through the frame's properties panel. You can set:

• Padding around all sides: A single value applies equal space on top, bottom, left, and right.
• Individual padding: Separate values for Top, Bottom, Left, and Right sides.

This padding creates space inside the frame between the frame border and its child elements.

text

Auto Layout Frame Properties:
- Padding (All Sides): number (e.g., 16)
- Padding Top: number (e.g., 10)
- Padding Bottom: number (e.g., 10)
- Padding Left: number (e.g., 12)
- Padding Right: number (e.g., 12)

Example

This example shows how to set padding of 20 pixels on all sides inside an Auto Layout frame containing three buttons. The padding creates space between the frame edges and the buttons.

text

1. Select the frame containing your elements.
2. In the right sidebar under Auto Layout, find the Padding section.
3. Enter <code>20</code> in the padding input box to apply 20px padding on all sides.

Result: The child elements will have 20px space from the frame edges.

Output

The frame shows 20px space on top, bottom, left, and right between its border and the buttons inside.

Common Pitfalls

Common mistakes when setting padding in Auto Layout:

• Not selecting the Auto Layout frame but a child element, so padding options are not visible.
• Confusing padding with spacing between items; padding controls space inside the frame edges, while spacing controls space between child elements.
• Setting padding values too large or too small, causing layout overflow or cramped content.

Always ensure you select the frame with Auto Layout enabled to see and edit padding.

text

Wrong:
- Selecting a child element and trying to set padding (no padding option visible).

Right:
- Select the Auto Layout frame itself to set padding values.

Quick Reference

Property	Description	Effect
Padding (All Sides)	Sets equal padding on top, bottom, left, and right	Creates uniform space inside frame edges
Padding Top	Sets padding only on the top side	Adds space above child elements
Padding Bottom	Sets padding only on the bottom side	Adds space below child elements
Padding Left	Sets padding only on the left side	Adds space to the left of child elements
Padding Right	Sets padding only on the right side	Adds space to the right of child elements

Key Takeaways

Set padding by selecting the Auto Layout frame and adjusting padding values in the right sidebar.

Padding controls space inside the frame edges, not between child elements.

You can set uniform padding or individual padding for each side.

Always ensure the frame has Auto Layout enabled to access padding settings.

Avoid confusing padding with spacing between items inside the frame.