Figma Auto Layout vs. Manual Constraints: A Decision Guide for Responsive Components

The decision: Auto Layout or manual constraints

When you build a responsive UI component in Figma, the core decision is whether the frame should reflow automatically as content changes or hold fixed positions. If your component must resize based on content, maintain consistent spacing, support right-to-left (RTL) languages, and stay editable by other designers, Auto Layout is usually the supported choice. If you need pixel-perfect placement inside a fixed-size container—such as an icon grid or an exact-position overlay—manual constraints give you that control at the cost of manual maintenance.

Constraints that drive the choice

Three constraints typically decide the outcome:

• Dynamic content. Buttons, list items, and cards often contain text of varying length. Auto Layout lets the frame grow or shrink so siblings shift automatically.
• Consistent spacing. Auto Layout stores padding and gap values as reusable properties, reducing drift between similar components.
• RTL readiness. Auto Layout respects direction flips when the frame direction is switched, whereas manual constraints often require mirrored duplicates.

Supported options compared

Option	Pros	Cons	Best for
Auto Layout	Automatic reflow, consistent spacing, less manual work	Limited pixel-perfect control, can cause unexpected overflow	Buttons, lists, cards that grow or shrink with content
Manual Constraints	Precise pixel control, works with any layout pattern	Requires manual updates when content changes, more maintenance	Fixed-size icons, complex grids, exact-position layouts

Trade-offs in practice

Auto Layout reduces the number of manual adjustments you make when copy changes, but it trades some absolute positioning control for that flexibility. A child layer with a fixed width that exceeds the parent’s available space can trigger overflow or clipping unless you set resizing rules deliberately. Manual constraints, by contrast, keep every layer exactly where you place it, yet every content change becomes a manual task. In large files, deeply nested Auto Layout frames can also slow editing because Figma recalculates layout on every change.

Concrete implementation: a responsive card

The following steps build a simple card that reflows when its description text changes. Run these steps inside a Figma design file.

1. Create a frame with the Frame tool (shortcut F) and name it Card.
2. With the frame selected, add Auto Layout by pressing Shift + A or clicking the + in the Auto Layout section of the right sidebar.
3. Set the direction to Vertical.
4. In the Auto Layout properties, set Vertical padding to 16, Horizontal padding to 16, and Spacing between items to 8.
5. Add three child layers: a title text layer, a description text layer, and a button component.
6. Select the title and description layers and set their horizontal resizing to Fill container so they span the card width and wrap text naturally.

At this point the card behaves as a flex column: the title sits above the description, the button sits below, and all gaps remain uniform.

Validation in Dev Mode

To confirm the frame is structured correctly, use Dev Mode, which is available to viewers and editors with appropriate file permissions.

1. Toggle Dev Mode using the toggle at the bottom of the right sidebar or the shortcut Shift + D.
2. Select the Card frame.
3. In the Inspect tab, review the generated CSS. Expected check: the code should show display: flex;, flex-direction: column;, gap: 8px;, and padding: 16px; matching the values you entered.
4. Return to Design Mode, select the description text layer, and replace its content with a longer string.
5. Switch back to Dev Mode and inspect the frame again. Practical check: the frame’s height should increase, the button should move down, and the gap between items should remain 8px without manual adjustment.

Limitations and when to switch

Auto Layout does not cover every layout pattern. It does not support CSS grid template areas, so a dashboard with overlapping or named grid regions may still require manual constraints or a plugin. If you notice the file becoming sluggish, audit for unnecessary nesting: flatten frames that do not need independent reflow. When a component must remain a fixed size—such as a 24×24 icon button—manual constraints or a fixed-width Auto Layout frame with clipped content is more appropriate than an unconstrained flex container.

Quick verification checklist

• Does the frame reflow automatically when child text length changes?
• Do padding and gap values in Dev Mode match the Auto Layout properties?
• Is the frame direction set correctly for RTL languages when needed?
• Are child resizing rules set to Fill, Hug, or Fixed intentionally rather than by default?