You already know how to stack elements and set basic spacing with Auto Layout. Now, let's move beyond that and build components that are truly fluid and responsive. The key is understanding the relationship between a parent frame and its children. Think of it as a contract: the parent dictates the rules, and the children decide how to follow them.

This relationship is governed by two primary resizing settings: 'Hug contents' and 'Fill container'. Mastering these is the first step toward creating complex, predictable layouts.

When you apply Auto Layout to a frame, that frame becomes a parent. Any objects inside it are its children. The resizing options you choose for the children determine how they behave when the parent frame changes size or when the content inside them changes.

• Hug contents: The child frame resizes to be just big enough to contain all the objects inside it, plus any padding. It's self-sizing. A button component with text is a classic example; the button grows or shrinks as you change the label.
• Fill container: The child expands to fill all available space in the parent's layout direction (horizontally or vertically). If multiple children are set to 'Fill', they share the available space equally.

This creates a clear hierarchy. A parent set to 'Fixed' or 'Fill' can contain children set to 'Hug' or 'Fill'. However, a parent set to 'Hug' cannot have children set to 'Fill'. Why? Because a 'Hug' parent's size is determined by its children, so it can't simultaneously tell a child to fill a space that isn't yet defined. It's a logical loop Figma prevents.

By nesting Auto Layout frames, you can build incredibly complex interfaces. Imagine a user profile card. The main card frame (parent) might have vertical Auto Layout. Inside, you could have a nested horizontal frame for the avatar and name, and another vertical frame for the bio and stats. Each frame has its own rules, creating a robust, nested Auto Layout structure.

Once you're comfortable with nesting and the Hug/Fill dynamic, you can add more nuance. What if you want a 'Fill' element to grow, but not shrink below a certain size? That's where Min and Max dimensions come in. You can set a minimum width on a sidebar so it doesn't vanish on smaller screens, or a maximum width on a text block to maintain readability.

Sometimes, you need an element to escape the Auto Layout flow entirely. Think of a notification badge on an icon or a close 'X' in the corner of a modal window. For this, you use Absolute positioning. Select the child element and click the 'Absolute position' icon in the right sidebar. It will be ignored by the Auto Layout flow, but will remain inside the parent frame, allowing you to position it precisely.

For overlapping elements, like a stack of user avatars, you can use Canvas stacking and negative spacing. In the Auto Layout properties, set the 'Stacking' option to 'Canvas' (it looks like a stack of papers) instead of the default 'Packed'. Then, you can enter a negative value in the 'Space between items' field to make them overlap. The last item in the layer order will appear on top.

Another subtle but powerful feature is Text baseline alignment. When you have a horizontal Auto Layout frame containing both an icon and text, you'll often want the text to align vertically with the centre of the icon. But if you change the text size, the alignment breaks. By enabling 'Text baseline alignment' (from the '...' menu in the Auto Layout panel), Figma aligns the elements based on the text's baseline, which creates a much more stable and visually pleasing result, especially in typography-heavy designs.

Finally, the Wrap feature, introduced more recently, is a game-changer for responsive design. Instead of elements flowing off-screen in a horizontal Auto Layout frame, setting the direction to 'Wrap' causes them to flow onto the next line when they run out of space. This is perfect for creating grids of tags, photo galleries, or lists of product cards that adapt gracefully from desktop to mobile without needing to create separate layouts.

Ready to test your knowledge? Let's see how well you've grasped these advanced concepts.

By combining these advanced features, you can move from making static mockups to building genuine design systems. Your components will be more robust, more flexible, and much closer to how they'll actually behave in code.