Figma 101: Understanding Auto Layouts and Constraints
Using Figma design constraints and auto layouts to organize and adjust elements for better design efficiency.
Imagine starting a design project, juggling between mobile and web layouts, only to be bogged down by the never-ending task of duplicating and tidying up elements. It's a time-consuming and tedious process that can drain your creativity. But fear not! The game-changers are here: auto layouts and constraints in Figma! Embrace the power of systematizing your designs, and you'll unlock a whole new level of efficiency and creativity. Once you experience the magic of these two Figma capabilities, you'll be eager to integrate them into your workflow and say goodbye to the design struggles of the past!
What is auto layout and constraints?
Auto layouts are the systematic ordering of multiple elements to reduce design incongruousness and increase responsiveness across varying screen sizes or breakpoints (the pixels at which a screen transitions to a new sizing). They provide the ability to adjust element placement using either vertical or horizontal stacking, with top, centre and bottom alignment options.
To learn more about breakpoints, checkout this concise video detailing this process using the Breakpoints plugin.
Constraints on the other hand, are super important for maintaining element positioning and sizing, either based on pixel-value or percentage-value distance from within the frame.
Creating Auto layouts:
Creating auto layouts requires that elements be in a single frame, ensuring that each element is a component asset.
Best Practice tip: Create a component with all variants, but then use its asset, as to maintain the integrity of the original component.
To setup an auto layout:
Simply select all desired components and click shift + A. They will now be placed within a frame, where the content will be positioned accordingly.
To bring in or modify elements, simply hold down Ctrl and drag element in. The blue indicator acts as a guide for the element’s placement within the layout.
You can override Figma's default placement or nest an element within an existing component layout with the function Mac: ⌘ Command (Windows: Ctrl).
Vertical, horizontal, or wrap alignment
Vertical or horizontal gap between elements; can be a fixed value or auto.
Horizontal padding
Vertical padding
Custom padding per side
Entire component alignment and positioning
Excluded by default, when included, stokes accurately represent how CSS renders borders.
Canvas stacking to choose whether first or last layer is on top
Image fill properties
Fill
Fill resizes an image proportionally to fit a shape’s height extents, and is always centered within the frame’s bounding box.
Fit
Fit scales the image proportionally to fit the shape’s width extents.
Tile
Tile allows you to modify the image’s aspect ratio to duplicate or array the image into a grid pattern. Tiles are great for generating image patterns.
Help! I can’t find the constraints when I click on an element
To ensure the constraints option appears, make sure that your layer is inside a frame. Additionally, constraints can’t be used when the parent layout is an “auto-layout” frame, as constraints set the behaviour of how the parent layer resizes.
For more info on vertical and horizontal alignment, refer to Figma’s constraints article.
Understanding component behaviour
To optimize auto layouts, nested components must have the correct horizontal and vertical resizing property, which can be adjusted under the frame right-side panel.
Fixed width: Components stay at a set width, even when elements are resized.
this feature would work well with the wrap auto layout feature
Hug contents: frame is automatically resized to bind the contents, but does not automatically resize in a nested component.
NOTE: hug will only appear once a component has auto layout
Fill container: the component will automatically resize to fill its parent container entirely. Whether the parent container gets larger or smaller, the component will expand or shrink accordingly, making sure it always occupies all the available space.
Fixed height: Components stay at a set width, even when elements are resized. Regardless of the content inside or the size of the parent container, the component's height will remain constant and won't change. This is useful when you want the component to have a fixed size that doesn't adapt to the container or content changes.
Hug contents: Component height adjusts dynamically based on the height of its content. In other words, the component will wrap itself around its content, growing or shrinking in height to precisely fit what's inside. This is useful when you want the component's size to be determined by the content it holds, ensuring it's not too big or too small for the elements it contains.
Responsive Design with Constraints:
The first half of this article focused on mastering auto layout, as the responsiveness of the atom, and by consequence the module and organism (see Atomic Design for an in-depth exploration of these terms) is heavily dependant on how accurate the layout settings are. That being said, let’s dive into constraints:
Fixed Right: Aligns element to the right of the frame, as the grid size changes.
Fixed Left & Right: Adjusts element width to keep the frame's left and right distances based on the original pixel amount.
Fixed Bottom: Aligns element to the bottom of the frame, as the grid size changes.
Fixed Center: Centers the element within the frame.
Horizontal Center: Places element in the frame's horizontal center as the grid changes size.
Vertical Center: Keeps the element vertically centered within the frame as the grid changes size.
Scale Vertical: Vertically scales the element based on the percentage distance from its center to the bottom of the frame.
Scale Both: Scales the element both vertically and horizontally based on the percentage distance from its center as the grid changes size.
When is Auto layout useful?
Standardizing alignment as the design evolves
Say goodbye to the hassle of manually adjusting pixels and trying to get everything perfectly aligned on your screen. With auto layout, you can effortlessly create evenly spaced groups of elements within a larger frame, ensuring they extend to the appropriate margins without any pixel counting. Additionally, the horizontal and vertical padding in auto layout is perfect for maintaining consistent distances between grouped elements or defining button properties to align with your brand's design system.
Nesting Icons and elements for instant swapping
A Component can exist inside another Component. When a component is nested, you are inserting the text, shape or element within the larger component, and setting different horizontal and/or vertical gaps, specific to each element. This is a powerful workflow because you want to be able to reduce the size of your Component as much as you can. This allows the nested “building block” component to be modular and screen adaptive by simply dragging to resize.
Even when resizing…
The new 'wrap' feature in auto layout options preserves both horizontal and vertical gaps, as well as padding, while adjusting the bounding frame's size. This ensures elements maintain their proper layout when resized.
Utilize Content Compression Resistance and Content Hugging: These are two properties that affect how a view should behave when there is not enough space to display its content. Compression Resistance determines how likely the view is to shrink, while Content Hugging determines how likely the view is to grow.
Safe Area and Layout Guides: Respect the safe area of the device to ensure your content is not hidden under notches, home indicators, or other device-specific elements. Layout guides can help align your content to the appropriate areas.
Use Aspect Ratio Constraints: When you want a view to maintain a specific aspect ratio (e.g., a square or an image with a fixed width-to-height ratio), use aspect ratio constraints instead of hard coding the dimensions.
Helps Avoid Magic Numbers: Instead of hard coding constant values for constraints, use system spacing values and relative constraints to make your layout more flexible and adaptive.
Troubleshooting Common Issues
Adding Element Below in Horizontal Layout: Figma only supports one direction at a time (vertical or horizontal). To use both directions, combine or nest auto-layout frames.
Warped Resizing: Turn on "Constrain Proportions" when resizing an element in auto layout to maintain its proportionality.
Removing Auto-laid Out Element: Ensure the component is in auto layout and set the vertical constraint to "Hug" to make it shrink properly.
Variants Not Hugging: The bounding box size remains proportional to the parent. Adjust auto layout constraints or settings to make the variants hug their content.
