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:

Note: This is an open beta feature which means issues may occur when using. Please reach out to Support to report issues you experience.

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

Note: Auto layout is only supported on frames; you will not be able to apply to sections or individual elements.

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 horizontal or vertical.

For example:

Note: The ordering of the nested elements within the frame is based on the order you’ve established in the page content panel. The lowest element in the frame will appear at the top of the frame; the highest will appear at the bottom.

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, 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.

Tip: Wrap content not working for you? Try grouping your components like the cards in the example above into a parent frame, enabling auto-layout and setting your cards to be a fixed width (like pixels). Then voila! Watch as your parent container magically wraps the content to be responsive.

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

Note: For some elements, like text, you may need to also change the alignment in the type tool.

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, the highest element appears at the bottom or end.

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:

Sizing Components

Using Constraints

Project Breakpoints

Spacing Options

Understanding the Safe Zone

#Mobile