Mastering Figma Auto Layout: The Secret to Responsive Design
Have you ever spent hours manually resizing buttons, cards, or navigation bars just because the text changed? If you aren't using Auto Layout, you are working harder, not smarter.
In this guide, we’ll break down what Auto Layout is, why it’s a game-changer for UI/UX designers, and how you can master it in minutes.
What is Figma Auto Layout?
Auto Layout is a property you can add to frames and components. It allows them to grow or shrink to fit the content inside them. Think of it as Figma’s version of "Flexbox"—it ensures your designs behave like real code, making the handoff to developers much smoother.
1. Getting Started: The Magic Shortcut
The fastest way to apply Auto Layout is to select two or more layers and press:
Shift + A
Once applied, you will see a new panel on the right sidebar. This is where the magic happens. You can now control:
Direction: Choose between Vertical (top to bottom) or Horizontal (left to right) layouts.
Gap between items: Set a specific pixel distance between elements so they stay perfectly aligned.
Padding: Control the white space inside the frame (top, bottom, left, and right).
2. Understanding Resizing: Hug, Fill, and Fixed
This is the part that confuses most beginners, but it’s the most important for responsive design:
Hug Contents: The frame will "hug" its children. If the text inside gets longer, the button grows with it.
Fill Container: The element stretches to fill all available space within its parent frame. This is perfect for full-width mobile buttons.
Fixed Width/Height: The element stays exactly the size you set, no matter what.
3. Alignment and Distribution
Ever struggled to center an icon perfectly next to a text label? With Auto Layout, you don't have to "eyeball" it. Use the Alignment Tool in the properties panel to snap your items to the center, top-left, or bottom-right with one click.
4. Pro Tip: Absolute Positioning
Sometimes you need an element (like a notification red dot or a "Close" ‘X’ button) to sit on top of an Auto Layout frame without moving the other elements.
Select the element inside the Auto Layout frame.
Click the Absolute Position icon in the right-hand sidebar.
Now you can move it freely while the rest of the layout stays perfectly responsive!
5. The Power of Nesting (Auto Layout inside Auto Layout)
The secret to building complex components like Navigation Bars or Data Tables is nesting. You aren't limited to just one Auto Layout frame.
How it works: You can have a horizontal Auto Layout (for a menu row) inside a vertical Auto Layout (the whole page sidebar).
Why do it? This allows different parts of a single component to behave differently—some parts can "Hug" while others "Fill," giving you total control over complex interfaces.
6. Setting Boundaries: Min and Max Width/Height
Sometimes you want a component to be responsive, but you don't want it to get too small or too wide (which might break the design).
The Fix: Click the dropdown arrow next to the Width or Height settings in the right sidebar to "Add min width" or "Add max width."
Example: This is perfect for a card component on a website that should stretch on mobile but stop growing once it hits 400px on a desktop screen.
7. Negative Spacing and Stacking Order
Figma now allows "Negative Spacing," which is perfect for creating Avatar Stacks (where user icons overlap each other).
The Step: Set your "Gap between items" to a negative number (e.g., -10).
Canvas Stacking: If your icons are overlapping the wrong way, click the three dots (...) in the Auto Layout panel and change the Canvas Stacking to "First on top" or "Last on top" to control which image sits in front.
