#Figma responsive resize manual#
#Figma responsive resize full#

As an example, let’s imagine a typical web application that consists of expandable/collapsible side navigation, page header, tabs, buttons, table, and pagination. What does auto layout look like for page scaffolding? In the atomic design metaphor, we have complex organisms like pages and templates. Generally, a good time to introduce this is when you're ready to 'scale' designs.

I believe the key is to find the right time in your workflow - this will vary based on your team's process and structure.

#Figma responsive resize manual#

When properly configured, changes to things such as width, component states, or different content will automatically adjust other elements on the page - removing the need for manual repositioning.

As designs mature and solidify, consider adding auto layout to overall page structure as part of your design workflowīuilding an auto layout structure “all the way down” the layer tree takes some up-front planning, but pays dividends down the road.

Loosely following a grid system or guides at this stage can help keep things consistent without requiring too much rework of auto layout settings when things inevitably change.

In early design stages, when designs are still diverging and the UI is volatile, it's better ignore auto layout and focus on getting the design right.

🚨 Premature use of auto layout can lead to headaches Quite conveniently, we have a tool that can help in this regard, and it's been sitting under our noses.īefore we go any farther, I want to add a few important caveats to using auto layout in context of page layouts / templates: This cycle of manual adjustments can feel a bit like playing whack-a-mole it's tedious and error prone. If you change the position of one element, you're obliged to manually change the size and/or position of its neighboring elements to maintain uniformity. It's easy to overlook the invisible layout rules we've established in any given design because they're not bound or defined by anything other than x,y position on the screen.

After placing components on the screen, we rely on grids, guides, rulers, and measuring tools to nudge elements around the page in order to maintain consistent spacing and alignment. Extending auto layout usage beyond atoms, molecules, and simple organismsĪs designers, we often stop using auto layout once we have a mature (enough) component set that includes a minimal set of atoms, molecules, and simple organisms. Other examples of peer / sibling components would be elements like a page header or navigation component which may contain text, navigation elements, and search a search box. Peer components can contain different/nested components that all behave in concert as 'one' organism. This is likely a repeated pattern within our app for which we can componentize - using auto layout to consistently apply alignment and padding values / tokens that support individual use cases (e.g., only primary and secondary buttons, primary, secondary, and tertiary buttons, etc.) In some cases, we may also need a button aligned left to accommodate less frequent or distinct actions (e.g, a destructive action). An optional tertiary button is also available in this grouping, but hidden. In the Button Container frame above, our design supports common uses where our primary and secondary action buttons are aligned to the right of the container. In this post and companion Figma file, I'll briefly cover common auto layout use cases and a proposal for extending usage from components and component groupings to include auto layout for templating entire page designs.Ībove: Example of a auto layout frame with peer components (buttons)

Using auto layout for page templating can make our designs less fragile and reduce the amount of repositioning needed when we make changes that affect child or sibling elements.

Using auto layout as scaffolding for page templates has real advantages and maintenance efficiencies once designs start converging and reusable layouts and patterns emerge.

However, as we go “up” on the atomic design scale, the usage of auto layout tends to diminish, but the value of the feature remains constant.

(e.g., buttons appearing on a modal footer)

Popular but less common, designers may use auto layout to arrange peer components in relation to one another or other UI elements.

Common implementations of auto layout include “inside out” use cases - designing components to adapt to their content.

#Figma responsive resize full#

And while auto layout has become an indispensable feature, many designers still aren't utilizing its full potential. If you're like me, you can't imagine designing in Figma without auto layout.