Figma Auto Layout Sizing: Fill Container vs. Hug Contents vs. Fixed Width

You've started using Figma's Auto Layout, excited by its power to create responsive designs, but then your elements start behaving erratically. One moment a button is perfectly sized, the next it's stretching across the entire screen, or a text box refuses to grow with its content. This common frustration often stems from a misunderstanding of the three core sizing settings: Fixed Width/Height, Hug Contents, and Fill Container. Mastering these options is key to making your layouts behave predictably, giving you precise control over how elements resize within an Auto Layout frame. Let's break down the differences between figma fill container vs hug contents and fixed width.

Fixed Width/Height: The 'You Are in Control' Setting

When you set an element to Fixed Width or Fixed Height, you are explicitly telling Figma to maintain that exact dimension, regardless of its content or the size of its parent Auto Layout frame. It's the most straightforward setting, giving you absolute control over an element's size. For instance, if you apply a fixed width of 120 pixels to a frame, as demonstrated in a practical example, you'll observe that only its width changes to 120 pixels, while its height remains unaffected, unless you specifically set that too or lock the aspect ratio. This behavior is ideal for elements that should always maintain a specific size, no matter what.

When to use Figma Fixed Width/Height:

• Icons: A 24x24 pixel icon should always stay that size.
• Avatars: User profile pictures often have a consistent fixed dimension.
• Logos: Brand logos typically need to maintain their integrity at a specific size.
• Dividers: A horizontal line with a fixed height of 1px.

Hug Contents: The 'Let the Content Decide' Setting

Hug Contents is where Auto Layout truly shines for dynamic elements. When you apply Hug Contents to a frame (either horizontally, vertically, or both), that frame will automatically resize itself to perfectly encapsulate all the content within it, plus any padding you've defined. This means if you have a button with a text label, and that label changes from 'Submit' to 'Submit Application Now', the button will expand horizontally to accommodate the new, longer text. This dynamic resizing is precisely what makes Auto Layout so powerful for creating flexible components.

As observed in design demonstrations, when you create a button and set it to 'Hug Contents', the button will automatically grow or shrink with the text inside it. This ensures your components are always perfectly sized to their content, preventing awkward overflows or excessive empty space.

When to use Hug Contents Figma:

• Buttons: The most classic example. A button should always be just wide enough for its text label and padding.
• Tags/Badges: Small labels that need to adjust based on their text length (e.g., 'New', 'Featured', 'Discount 20%').
• Text Labels: Frames containing short pieces of text that need to fit snugly.
• Input Fields (with a specific length): While Fill Container is common for inputs, Hug Contents can be used if you want the input to precisely fit a placeholder or initial value.

Fill Container: The 'Grow to Fit Your Parent' Setting

The Fill Container setting instructs an element to stretch and occupy all available space within its direct parent Auto Layout frame. This is incredibly useful for creating responsive layouts where elements need to adapt to the parent's changing size. When a child element is set to Fill Container, it will expand or shrink along with its parent, maintaining consistent spacing and alignment.

For example, if you have a card component that needs a background element to always span its full width, you would set that background to `Fill Container`. Similarly, a text box within a column layout might need to `Fill Container` horizontally to take up all the available width. In practical applications, you might set an element to `Fill Container` and then also apply left alignment, ensuring it expands while maintaining its starting position, as demonstrated in various layout scenarios.

When to use Fill Container Figma:

• Card Backgrounds: The main background shape of a card component should typically fill its parent Auto Layout frame.
• Text Boxes/Paragraphs: Text blocks within a larger container often need to fill the available width to wrap correctly.
• Input Fields: A common use case for input fields that need to stretch to the full width of their form container.
• Dividers: A horizontal divider line that needs to span the full width of its parent container.

Cheat Sheet: When to Use Which Sizing Option

To simplify your decision-making when working with Auto Layout, here's a quick cheat sheet summarizing the ideal scenarios for each sizing option:

Sizing Option	Behavior	Ideal Use Cases
Fixed Width/Height	Maintains a specific, unchanging size. Ignores content and parent.	Icons, avatars, logos, fixed-size images, fixed-height dividers.
Hug Contents	Resizes to perfectly fit its internal content (plus padding).	Buttons, tags, badges, dynamic text labels, content-driven containers.
Fill Container	Stretches to occupy all available space within its parent Auto Layout frame.	Card backgrounds, text blocks, input fields, full-width dividers, elements that need to adapt to parent size.

Putting It All Together: Building a Profile Card

Understanding each setting individually is one thing; combining them effectively is where the magic happens. Let's walk through building a simple profile card using all three sizing options to create a flexible and responsive component.

1. Start with the Basics:
   • Create a new Frame (e.g., 300x150px) and convert it to Auto Layout (Shift + A). This will be our main Profile Card frame.
   • Set its padding (e.g., 24px all around) and a Hug Contents vertical sizing, and Fixed Width for now (e.g., 300px).
2. Add an Avatar (Fixed Width/Height):
   • Inside the Profile Card frame, create a Circle (e.g., 64x64px).
   • Set both its Horizontal and Vertical sizing to Fixed Width/Height. This ensures the avatar always stays 64x64px.
3. Add User Name and Title (Hug Contents for Text, Fill Container for Group):
   • Create a Text layer for the user's name (e.g., "John Doe"). Set its horizontal sizing to Hug Contents and vertical to Hug Contents.
   • Create another Text layer for the title (e.g., "Product Designer"). Set its horizontal sizing to Hug Contents and vertical to Hug Contents.
   • Group these two text layers (Name and Title) into a new Auto Layout frame (Shift + A). Let's call this Text Block.
   • Set the Text Block's horizontal sizing to Fill Container. This allows the text block to expand and fill the available space next to the avatar, or across the card if placed below. Set its vertical sizing to Hug Contents.
4. Combine Avatar and Text Block:
   • Place the Avatar and the Text Block inside your main Profile Card frame.
   • Ensure the Profile Card frame has a horizontal direction.
   • Now, if you resize the Profile Card frame, the Avatar will stay fixed, but the Text Block will Fill Container horizontally, making the text wrap if needed.
5. Add a Call-to-Action Button (Hug Contents):
   • Create a Text layer (e.g., "View Profile"). Set its horizontal and vertical sizing to Hug Contents.
   • Add some padding (e.g., 16px horizontal, 8px vertical) and a background fill to turn it into a button.
   • Set the button's horizontal and vertical sizing to Hug Contents. This way, if you change the button text, the button will automatically adjust its width.
   • Place this button inside the Profile Card frame.
6. Final Adjustments:
   • Adjust spacing and alignment within your Profile Card frame as needed.
   • Notice how the Avatar remains fixed, the Text Block adapts to the card's width, and the Button adjusts to its text, all thanks to the intelligent application of Fixed, Hug, and Fill.

This example illustrates how combining these three powerful sizing options allows you to build complex, flexible components that adapt gracefully to different content and screen sizes. For a deeper dive into mastering Auto Layout for real-world applications, consider exploring Juno School's Master Auto Layout for Card Design course, which covers these techniques in detail.