Configuring Figma's Auto Layout Wrap

Figma's Auto Layout Wrap feature has transformed how designers create responsive interfaces. Once limited to single-row or single-column arrangements, designers can now build complex layouts that adapt fluidly across screen sizes. This guide walks you through configuring Wrap effectively, with practical examples and expert techniques.

Auto Layout Wrap bridges the gap between design intent and responsive implementation. When you resize a frame with Wrap enabled, elements don't get cut off or require manual repositioning--they gracefully wrap to new lines, maintaining spacing and alignment rules you've defined. For teams building comprehensive design systems, understanding how design documentation integrates with these techniques ensures consistency across all deliverables.

Understanding Auto Layout Wrap

What Is Auto Layout Wrap?

Auto Layout Wrap is a layout mode in Figma that allows elements within an Auto Layout frame to flow across multiple rows when they exceed the frame's horizontal boundary. Unlike traditional horizontal layouts that constrain content to a single line, Wrap enables dynamic reflow--elements automatically redistribute to subsequent rows based on available space.

This capability bridges the gap between design intent and responsive implementation. When you resize a frame with Wrap enabled, elements don't get cut off or require manual repositioning. Instead, they gracefully wrap to new lines, maintaining spacing and alignment rules you've defined.

When to Use Wrap

Wrap excels in scenarios where content quantity varies or frame dimensions change across breakpoints:

• Navigation menus that need to adapt from desktop to mobile
• Card-based layouts such as product grids or blog post previews
• Tag collections where items may be added or removed dynamically
• Gallery thumbnails with responsive container constraints
• Form fields that flow across multiple lines based on available width

Wrap vs. Other Layout Modes

Understanding how Wrap differs from Horizontal, Vertical, and Grid modes helps you select the right tool:

Horizontal Layout arranges items in a single row along the x-axis. Items cannot wrap to new lines--they either overflow the frame or get clipped.

Vertical Layout stacks items along the y-axis. Similar to horizontal, items remain in one column and cannot flow sideways.

Grid Layout (currently in open beta) places items in defined columns and rows, allowing elements to span multiple cells. Unlike Wrap, Grid doesn't reflow based on content quantity--it follows a fixed structure.

Wrap combines elements of horizontal arrangement with responsive reflow. Items start in a row but automatically wrap when they exceed the frame's width, creating multiple rows dynamically.

Step-by-Step: Configuring Auto Layout Wrap

Enabling Auto Layout

Before using Wrap, you must apply Auto Layout to a frame or selected objects:

1. Select your elements in the canvas
2. Press Shift + A (or click the "+" icon in the Auto Layout section of the right sidebar)
3. Figma will attempt to detect your intended layout direction
4. Switch to Horizontal if not already selected--Wrap only appears as an option with horizontal layouts

Activating Wrap

Once Auto Layout is enabled and set to Horizontal:

1. Look for the Wrap icon (curved arrow) next to the horizontal/vertical layout toggles in the Auto Layout panel
2. Click the Wrap icon to enable multi-row behavior
3. Observe as elements that exceed the frame width now flow to new lines

Setting Frame Dimensions

Wrap behavior depends on frame width:

1. With Wrap enabled, resize the frame width manually or set fixed dimensions
2. Elements will reflow to new rows as the frame narrows
3. Increase width and wrapped elements return to previous rows
4. Combine with resizing properties (Hug contents, Fill container) for dynamic behavior

Adjusting Spacing and Alignment

After enabling Wrap, fine-tune the visual relationships:

Gap Between Items - Controls horizontal spacing between wrapped items. Same as in standard horizontal layouts. Consistent spacing maintains visual rhythm across rows.

Padding - Sets space between items and frame edges. Applies uniformly to all frame boundaries. Critical for preventing content from touching edges.

Item Alignment - Align items within each row (left, center, right, top, bottom). Alignment applies to individual rows, not the entire layout. Use "Justify" distribution for equal-width spacing.

Practical Use Cases

Responsive Navigation Menus

Navigation menus that adapt from horizontal desktop layouts to wrapped mobile layouts are a prime use case for this feature:

Desktop Configuration: Single row of navigation items, items spaced evenly across full width, horizontal Wrap disabled or frame wide enough.

Mobile Configuration: Same elements, narrower frame, Wrap enabled--items flow to multiple rows, maintains consistent spacing and alignment.

Implementation Steps: Create navigation items as individual components, add to Auto Layout frame with Wrap enabled, set frame width to respond to parent container, adjust padding and gap for comfortable touch targets, test at multiple breakpoints to verify reflow behavior.

Card Grids and Product Layouts

Card-based interfaces benefit significantly from Wrap:

• Product cards that maintain uniform appearance
• Blog post previews in grid-like arrangements
• Feature grids with icon-and-text combinations
• Team member cards with photo, name, and role

Key Settings: Fixed-width cards (Fill container or Fixed width), consistent gap between cards, padding around the outer frame, optional: set minimum frame width to prevent over-wrapping.

Tag and Category Collections

Dynamic collections of tags or categories work excellently with Wrap:

• Blog post tags that vary in count
• Filter options with changing visibility
• Breadcrumb trails on category pages
• Skill tags on portfolio or team pages

Advantages: Tags wrap naturally as container narrows, no manual repositioning when tags are added or removed, consistent spacing maintained automatically.

Advanced Configuration Techniques

Combining Wrap with Nested Auto Layout

Complex interfaces often combine multiple Auto Layout strategies. For example, a card with wrapped tags:

Outer Frame (Vertical)
├── Image component
├── Title text
├── Description text
└── Tags Container (Horizontal with Wrap)
 ├── Tag 1
 ├── Tag 2
 ├── Tag 3
 └── Tag 4 (wraps to new line when needed)

This pattern maintains structural integrity while allowing dynamic content to reflow appropriately. Understanding how nesting Figma components works alongside these techniques creates powerful reusable component libraries.

Resizing Behavior with Wrap

Understanding how resizing interacts with Wrap prevents unexpected behavior:

Hug Contents - Frame grows to fit all wrapped items. Height increases as items wrap to additional rows. Useful when content determines layout dimensions.

Fill Container - Items expand to fill available frame width. Items per row may change as frame resizes. Useful for equal-width card distributions.

Fixed Width - Frame maintains set dimensions. Items wrap based on fixed boundaries. Useful for testing specific responsive breakpoints.

Breakpoint Testing

Test your Wrap configurations across screen sizes:

1. Create multiple frames at different viewport widths
2. Duplicate your Auto Layout with Wrap across all frames
3. Observe reflow behavior at each breakpoint
4. Adjust spacing and dimensions as needed
5. Verify alignment and spacing remain consistent across rows

Best Practices for Wrap Configuration

1. Start with content constraints before enabling Wrap--know your minimum and maximum item sizes
2. Use consistent gap values across your design system for visual harmony
3. Test at multiple breakpoints rather than assuming behavior from one frame size
4. Combine with components for efficient reuse across different contexts
5. Document your layout intentions for handoff to developers
6. Use descriptive layer names for frames using Wrap (e.g., "Nav Menu - Wrapped")
7. Leverage variables for spacing and sizing to maintain consistency

Integration with Design Systems

Wrap-based layouts integrate seamlessly with design systems. When building your principles of great design craftsmanship, ensure that responsive behavior like Wrap is documented alongside your component specifications. This creates a unified approach to comparing UI frameworks like Tailwind CSS and Bootstrap within your system.

Export Considerations

When preparing Wrap-based designs for development:

• Provide frame width ranges where wrap behavior changes
• Document item counts at each breakpoint
• Share gap and padding values explicitly
• Explain the reflow logic for complex nested layouts
• Consider providing CSS or styled component examples

Keyboard Shortcuts Reference

Conclusion

Figma's Auto Layout Wrap feature empowers designers to create truly responsive interfaces directly in the design tool. By understanding when and how to use Wrap--in comparison to Horizontal, Vertical, and Grid layouts--you can build interfaces that adapt gracefully across screen sizes. The key lies in thoughtful configuration of spacing, alignment, and resizing properties, combined with thorough testing across breakpoints.

Whether you're designing navigation menus, card grids, or dynamic content collections, Wrap provides the flexibility needed for modern responsive design. Master this feature, and you'll find yourself spending less time manually adjusting layouts and more time crafting exceptional user experiences.

For teams looking to streamline their responsive design workflow, proper configuration of Auto Layout Wrap is an essential skill. Combined with a solid design system and component library, this feature enables efficient collaboration between designers and developers.

Sources

1. Figma Help Center - Guide to Auto Layout
2. Tilda Education - Ultimate Guide to Auto Layout
3. LogRocket Blog - Configuring Figma's Auto Layout Wrap
4. Bring Your Own Laptop - Step-by-Step Guide to Figma Auto Layout