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
Enable auto layout
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
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 horizontally or vertically.
By choosing vertical, all the elements will 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.
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, 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.
Resizing elements in Auto layout
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.
Fixed width or height
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.
Min width or height
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:
Select 'Min width' or 'Min height' from the dropdown in the right style panel.
Specify the the minimum width or height in the corresponding field.
Test this behaviour by resizing the parent frame to ensure the element behaves as intended.
Fill width or height
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:
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