Configuring Figma’s auto layout wrap

Figma’s auto layout feature has been a game changer for designers and developers, bridging the gap between design and frontend development. Based on CSS Flexbox, auto layout has made it much easier to align and distribute objects within a frame, allowing designs to grow or shrink to fit, and define layout direction, padding, and gaps between items.

Previously, objects in an auto layout frame could only be stacked vertically or horizontally. Now, Figma has introduced the auto layout wrap feature, which allows objects in an auto layout frame to expand beyond a single row. In this article, we’ll understand how auto layout wrap works, the problems that it solves, and tips to configure it in your designs.

A brief overview of auto layout

Figam’s auto layout feature allows users to add auto layout to a frame. This makes it relatively simple to adjust objects within an auto layout frame, similar to how developers use CSS flexbox.

Layout direction

Users can define a horizontal or vertical direction for their layout within the auto layout frame. This will automatically make objects inside the frame flow horizontally on the x-axis or vertically on the y-axis:

Resizing auto layout objects

Users can adjust the way that auto layout objects respond upon resizing a parent auto layout frame.

Fixed resizing maintains the width or height of the frame, which can lead to overflow objects if the parent frame is smaller than its children:

Hug resizing will fit the parent frame to the width or height of the contents within the frame, taking into account the applied padding and gap between items:

Fill resizing will expand or shrink the children frames to fill the width or height of the parent frame:

Gap between items

Objects are evenly distributed within an auto layout frame. Users can adjust the gap between items by setting either a fixed value or auto to fill the frame.

With the gap set to Auto, the objects will be automatically evenly distributed within the auto layout frame:

Padding

Users can set the horizontal and vertical padding of an auto layout frame. Individual padding can also be set if the sides require different padding values. If the parent frame is set to Hug, it will fit around its contents including the padding set:

Alignment

Users can define how objects are aligned to the auto layout frame using the align property. Using the alignment box in the auto layout settings, you can choose how you want the content in your frame to be aligned from nine options:

• Top left
• Top center
• Top right
• Left
• Center
• Right
• Bottom left
• Bottom center
• Bottom right

If the gap between items is set to Auto, then the alignment options are reduced to three based on the direction chosen.

For horizontal layouts, you can align to the top, center, or bottom of the frame. The objects will expand horizontally to fit the frame. For vertical layouts, you can align to the left, center, or right of the frame. The objects will expand vertically to fit the frame:

Advanced auto layout settings

There are a few advanced auto layout settings, which we won’t get into detail in this article since they’ll be context specific — you probably won’t use these too much. These include strokes in layout, canvas stacking, and text baseline alignment:

Auto layout wrap

Now that we’ve recapped auto layout, let’s dive into its latest addition: auto layout wrap. Auto layout wrap is an additional property to the auto layout feature. It can be applied by selecting Wrap in the auto layout direction properties:

When the contents of an object are expanded or objects are added to an auto layout frame, there might be overflow objects that don’t fit within the frame. Auto layout wrap repositions the overflow objects by moving them to a new row.

The difference between singular directional layouts and auto layout wrap is in how objects respond when the frame or objects within the frame are resized. Instead of being restricted to adding, removing, and reordering objects along the x-axis or y-axis, a frame with auto layout wrap applied to it will flow horizontally and wrap overflow objects to the next line:

A frame with auto layout wrap has the same nine alignment options as a horizontal or vertical layout. Since auto layout wrap uses both horizontal and vertical axes, users can set horizontal and vertical gaps between items:

If the horizontal gap between items is set to Auto, then an auto layout wrap frame will have the same alignment options as a horizontal layout: top, center, or bottom. The items in each row will be separated by gaps to fill the width of the parent frame. The width of the gaps is dependent on the number of items and the width of each item in the row:

If the vertical gap between items is set to Auto, then items will be separated by gaps to fill the height of the parent frame. The height of the gaps is dependent on the number of rows within the frame:

Challenges addressed by auto layout wrap

Directional layouts only work horizontally or vertically, so it can be difficult to accommodate flexible layouts. Let’s take a look at a few examples where auto layout can address common challenges.

Multi-select filter

In this example, let’s create a multi-select filter. When the filter is in the filled state, the form field is populated with tags. Since the form field has a fixed width of 200px, the tags should wrap onto a new line when they overflow past the 200px width:

You can achieve the visual outcome of the filled form field with and without auto layout wrap. However, auto layout wrap makes the design much more flexible and accommodating to changes:

Without auto layout wrap, the tags are separated into several rows, each with a horizontal layout applied. Then, all the rows are combined into a vertical layout.

Changing the labels within a tag or moving tags with different widths across rows can easily cause another tag to overflow. The absence of auto layout wrap makes it tedious to maintain the proper layout of tags and rows:

With auto layout wrap, overflow tags wrap to a new line. So whether you’re making the tags wider or moving tags around, auto layout wrap will automatically take care of their positions to ensure that all tags properly wrap instead of overflowing past the frame:

Responsive card layout

In this example, let’s look at how you can use auto layout wrap to design a responsive card layout. Auto layout wrap is applied to the card layout so that any overflow cards will automatically wrap to a new row. The card group is aligned top left and has a width of 1000px. The cards are set to fill horizontal resizing so that they stretch to fill the width of the frame:

Within each card component, auto layout wrap has also been applied to the buttons. This will come in handy when the cards are resized to fit different screen sizes. The buttons are aligned bottom right:

When you resize the card group to have a width of 750px, notice how the buttons within the card components wrap into two rows. Both buttons won’t fit on one row given the smaller width of the card:

As you continue to shrink the width of the card group, the cards wrap into a second row. The width of the cards expands to give room for the buttons on one row again. Shrinking the width even further results in the buttons wrapping once again:

The wrapping behavior continues as you resize the card group for a mobile screen. The cards neatly align into one column, followed by the buttons as the width of the card group shrinks down:

This is a great example of how auto layout wrap can be used to keep your layouts consistently organized as you adapt your designs to multiple screen sizes.

Conclusion

Auto layout wrap is a great advancement to Figma’s auto layout feature. It provides the capability for designers to create flexible layouts that respond to changing widths of objects and frames.

Without auto layout wrap, it can be tedious and challenging to achieve the same results as a layout with wrap applied. Now with auto layout wrap, designers don’t have to manage multiple different rows of objects to achieve a wrapped layout. This feature takes care of repositioning objects when their contents expand or the frame is resized, resulting in overflow objects.

If you haven’t used auto layout wrap yet, I highly suggest you learn how it works. It can make your design workflow more efficient and speed up the time it takes to create responsive designs.