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:
Stack nested elements within the frame; either vertical or horizontal
Resize the frame and nested elements will resize accordingly
Create complex components that can be adapted easily per breakpoint
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:
Selecting all the elements you'd like to have in an auto-layout frame
With the frame selected, navigate to the right-side Style Panel
Find auto-layout and click the '+' or use the shortcut
Shift + A
Note: Auto layout is only supported on frames; you will not be able to apply to sections or individual elements.
Auto layout properties
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.
By choosing vertical, all the elements will be flow on a y-axis.
By choosing horizontal, all the elements will flow on an x-axis.
If you want to build a custom navbar, you would use the horizontal direction to define how the elements are positioned.
If you want to build a card component, you would use the vertical direction.
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:
Horizontal: Left, center, right
Vertical: Top, center, bottom
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:
Set the parent frame’s width (any value is fine) and direction to be horizontal with wrap content toggled ‘on’
Next, make sure your nested frames' width is set to a fixed value (px); this will ensure that the nested frames will wrap to the next line
Lastly, view a different breakpoint and make sure your frames wrap to the next line