Basic auto layout is enough for a single button, but real-world layouts almost always require nested frames, different settings in different parts of the design, and careful thought about how content should flow when it grows or shrinks. Building a flexible product card is one of the best ways to see every advanced auto layout concept in action, because a single card involves vertical flow, horizontal flow, padding, alignment, and positioning all at once.
- Nesting auto layout frames is the key to mixing vertical and horizontal flows and applying different padding in different parts of the same component.
- Hug contents on one axis, combined with fixed sizing on the other, lets a frame flex in one direction while locking the other, which is how most cards and buttons are built.
- Auto spacing, wrap, and ignore auto layout are the advanced settings that turn a rigid layout into a fully responsive one.
This lesson is a preview from our Figma Masterclass Online. Enroll in this course for detailed lessons, live instructor support, and project-based training.
This is a lesson preview only. For the full lesson, purchase the course here.
The sections below walk through the process of turning a messy product card into a flexible auto layout component, with notes on the settings that matter at each step and on the small gotchas that can trip up even experienced users.
Starting From the Outside In
Adding auto layout can happen from the inside out or from the outside in, and neither approach is strictly better. Starting from the outside in means selecting every child of the eventual parent and pressing shift A, which wraps everything into a new auto layout frame. The default direction is sometimes wrong because Figma guesses based on the layout, and switching from grid or horizontal to vertical is usually the first adjustment. A fill color on the new parent frame makes its boundaries visible while the layout is still being refined.
Hug, Fixed, and Fill Container Sizing
Every frame in an auto layout has a sizing setting for both width and height. Hug contents sizes the frame to wrap tightly around its children, fixed locks the frame to a specific value, and fill container makes a child stretch to match the full width or height of its parent. A product card that should grow taller as text is added but stay at a fixed width is set to fixed width and hug height. The text layers and the photo inside that card should fill container on width, so they grow with the card, and the photo can have its aspect ratio locked so it resizes proportionally.
Nesting Frames for Different Padding and Direction
Every frame in Figma holds a single set of padding, direction, and spacing values, which means that anywhere the design needs different settings requires a new frame. A product card that wants the photo edge to edge but text with padding needs a nested content frame that holds everything except the photo. Selecting the text layers and pressing shift A wraps them in a new auto layout frame, and that new frame can have horizontal and vertical padding without affecting the photo above it. Holding command on Mac or control on Windows while clicking a padding field merges the horizontal and vertical values, which is a quick way to enter the same padding on all four sides at once.
Clip Content and Rounded Corners
Rounded corners sometimes fail to show on the top of a frame, and the culprit is usually content that overflows the frame boundary. Enabling clip content on the parent frame crops anything that extends outside the frame, which is what allows the rounded corners on a photo inside a card to appear correctly. This is a small detail that often gets overlooked during layout, and checking for it early saves debugging time later.
Canvas Stacking and Reordering
The order of children in an auto layout frame controls their position in the flow, not their front to back stacking. Changing the stacking order for overlapping objects requires opening the additional auto layout settings and changing the canvas stacking option from first on top to last on top or the reverse. This matters most for overlapping elements like a row of color swatches where negative spacing creates intentional overlap and the visual order needs to match the design intent.
Auto Spacing and Wrap
Auto spacing is one of the most powerful auto layout features. Setting the spacing between items to auto tells Figma to distribute children evenly across the available width of the parent, which keeps the leftmost child on the left and the rightmost on the right while filling the space between them. This is exactly what is needed for a row that holds color swatches on one side and a buy now button on the other.
A few patterns that auto spacing and wrap enable:
- Horizontal rows where one item stays pinned to the left and another stays pinned to the right regardless of screen width.
- Multi column layouts that collapse into fewer columns on narrow screens by turning on the wrap option.
- Card grids that automatically reflow from three columns to two columns to one column as the container shrinks.
- Navigation bars that keep logo and menu items evenly distributed across the available width.
Ignore Auto Layout for Absolute Positioning
Some elements need to sit on top of a layout without affecting the flow. A favorites icon in the top right corner of a product card is a classic example, because adding it as a normal child of the auto layout frame would push other elements out of position. The ignore auto layout toggle, previously called absolute positioning, takes an element out of the flow so it can be positioned freely while still living inside its parent frame. Four small corner indicators appear when ignore auto layout is active, which is the visual cue that the element is no longer following auto layout rules.
Constraints and Avoiding Pitfalls
Once an element uses ignore auto layout, constraints take over for positioning. Setting the favorites icon to top right constraint keeps it pinned to the top right corner no matter how the card resizes. Two common pitfalls to avoid with auto layout are grabbing corner resize handles, which fix both width and height at the same time and often break the hug contents setting, and forgetting to check whether a child has been set to fixed when it should be set to fill container. The layers panel icons are the fastest way to see which frames have auto layout, which direction they flow, and which use ignore auto layout, so scanning the layers panel is usually the quickest way to diagnose a layout that is not behaving as expected.
