Rather than focusing on building for each device, enabling auto layout and setting the parameters allows components to automatically become responsive before your eyes. 👀

By using the auto layout property you can:

You can easily enable auto layout to any frame or selected elements by:

Now that we’ve added auto-layout to a frame, you’ll notice a host of new properties specific to auto layout. These properties will only be applicable to components or frames that have been designated with auto layout.

The direction will allow you to choose which direction your elements should stack or flow; either horizontally or vertically.

For example:

Distribute will define how your elements should distribute or align inside the frame. Depending on what you select as your direction you will be able to choose:

You will also see options for spacing: between, around, and evenly. These properties are best used when you want to structure auto-layout frames inside of a parent auto-layout frame (frame-ception).

Gap will define the spacing between elements, this is also a useful property for wrapping the nested elements so elements keep a minimum gap between each other.

Wrap content is a powerful property to create responsive components faster. In short, by toggling wrap content to be ‘on’ your nested elements will reorder themselves or ‘wrap’ based on the breakpoint.

To use this property, you will need to set a width value to the overall container or frame. You can even have an auto-layout frame IN another auto-layout frame (inception), set to wrap content—and voila! You now have a responsive grid of frames.

Change nested elements to be left, center, or right within the auto layout frame.

Reordering elements is simple. By enabling auto-layout, elements nested with frames can easily be reordered or ‘re-stacked’. It’s as easy as dragging the elements to reorder their position.

You’ll notice that in the left-side page content panel, the elements will also reorder themselves based on their position. A general rule of thumb: the lowest element appears at the top or start of your frame, and the highest element appears at the bottom or end.

Auto layout's most important feature is that it allows you to control how your elements respond to changes in the parent frame. Mastering these resizing behaviours is crucial as part of creating responsive layouts. Below we'll explore the various resizing options available to ensure your design keeps its structure while remaining responsive.

When setting an element's dimensions to Fixed width or height, you have the flexibility to choose between Pixels (px), Percentages (%), viewport height/width, or Automatic size (auto). Understanding the implications of each option is essential for creating a responsive and visually consistent layout. Read our detailed guide for a deeper understanding of these settings.

For a more fluid design that maintains a minimum width or height but automatically grows or shrink if bigger than the minimum size, consider using the Min width or Min height options. This is particularly useful when you want to prevent an element from becoming smaller than a specific threshold. Follow these steps to use this option:

Elements within an Auto layout set to fill the width or height will dynamically occupy the available space in the frame, automatically growing or shrinking according to the space available. This approach differs, for example, from choosing a fixed width set to 100%, as the element will always occupy 100% of the width, leaving no room for other elements to share the space.

By understanding and using these resizing options within Auto layout, you can create layouts that seamlessly adapt, saving you time when adjusting across breakpoints.

Should I use different sizing (px, %, and auto) for my frames with auto-layout?

This may take some trial and error. It's best practice that elements within an auto-layout frame are set to fixed values like pixels while the container itself can be set using relative values like percentages or even automatic sizing.

Wrap content doesn’t seem to work for my grid. The design on tablet and mobile does not look right.

For a responsive grid, you should have a parent frame with auto layout enabled that contains other components or frames. Then: