FigmaHow-ToBeginner · 4 min read

How to Use Wrap in Auto Layout in Figma

In Figma, to use wrap in auto layout, set the auto layout direction to horizontal or vertical and enable the Wrap option. This makes child elements automatically move to the next row or column when they exceed the container's size, keeping your design tidy and responsive.

📐

Syntax

Figma's auto layout wrap is controlled through the UI or plugin API, not code, but conceptually it works like this:

Direction: Choose Horizontal or Vertical layout.
Wrap: Enable wrapping so items flow to the next line or column when space runs out.
Spacing: Set gaps between items and between rows or columns.

These settings control how child elements arrange inside the auto layout frame.

pseudo

AutoLayout {
  direction: 'horizontal' | 'vertical',
  wrap: true | false,
  spacingBetweenItems: number,
  spacingBetweenLines: number
}

💻

Example

This example shows a horizontal auto layout frame with wrap enabled. Items move to a new row when they don't fit in the width.

jsx

<Frame autoLayout={{direction: 'horizontal', wrap: true, spacingBetweenItems: 10, spacingBetweenLines: 15}} width={300}>
  <Rectangle width={100} height={50} fill="#4CAF50" />
  <Rectangle width={120} height={50} fill="#2196F3" />
  <Rectangle width={90} height={50} fill="#FFC107" />
  <Rectangle width={110} height={50} fill="#E91E63" />
</Frame>

Output

A frame 300px wide with four colored rectangles arranged horizontally; the last rectangle wraps to a new row below with 15px vertical spacing.

⚠️

Common Pitfalls

Wrap not working: Make sure the frame has a fixed width or height to trigger wrapping; auto layout needs a size limit.
Direction mismatch: Wrapping only works if direction is set correctly (horizontal wraps to new rows, vertical wraps to new columns).
Spacing confusion: Spacing between items and between lines are separate settings; adjust both for neat layout.

jsx

/* Wrong: No fixed width, wrap won't trigger */
<Frame autoLayout={{direction: 'horizontal', wrap: true}}>
  {/* items */}
</Frame>

/* Right: Fixed width set to enable wrap */
<Frame autoLayout={{direction: 'horizontal', wrap: true}} width={300}>
  {/* items */}
</Frame>

📊

Quick Reference

Property	Description	Typical Values
direction	Layout flow direction	horizontal, vertical
wrap	Enable wrapping of child items	true, false
spacingBetweenItems	Space between items in the main direction	number (pixels)
spacingBetweenLines	Space between wrapped rows or columns	number (pixels)
width / height	Fixed size to trigger wrapping	number (pixels)

✅

Key Takeaways

Enable wrap in auto layout by setting direction and turning on the wrap option.

Wrap only works if the container has a fixed width (for horizontal) or height (for vertical).

Adjust spacing between items and lines separately for clean layouts.

Horizontal direction wraps items to new rows; vertical wraps to new columns.

Without fixed size, wrap will not activate and items stay in one line or column.