Fill vs Hug vs Fixed in Figma: Key Differences and Usage

In Figma, Fill makes an object stretch to fill its parent container, Hug resizes the object to fit its content snugly, and Fixed sets a constant size regardless of content or container changes. These sizing options control how frames and components adapt in layouts.

Quick Comparison

Here is a quick overview of how Fill, Hug, and Fixed sizing behave in Figma:

Sizing Type	Behavior	Responsive to Content	Responsive to Parent	Use Case
Fill	Stretches to fill the parent container	No	Yes	Stretch buttons or images to container width
Hug	Resizes to fit the content tightly	Yes	No	Buttons or text that adapt to content size
Fixed	Keeps a set width and height	No	No	Icons or elements with fixed dimensions

Key Differences

Fill sizing makes an object expand or shrink to exactly match the size of its parent frame or container. This is useful when you want elements to stretch across available space, such as a full-width button or image. It ignores the content size and focuses on the parent’s dimensions.

Hug sizing adjusts the object’s size to tightly wrap around its content. For example, a button with text will grow or shrink as the text changes. This sizing is content-driven and ignores the parent container size.

Fixed sizing locks the object’s width and height to specific values. It does not respond to changes in content or parent size. This is ideal for icons or elements that must remain a consistent size regardless of layout changes.

Fill Example

jsx

<Frame width={300} height={50} style={{border: '1px solid black', display: 'flex'}}>
  <Button style={{width: '100%', height: '100%', backgroundColor: '#4CAF50', color: 'white'}}>Fill Button</Button>
</Frame>

Output

A green button that stretches exactly to fill the 300px wide frame.

Hug Equivalent

jsx

<Frame width={300} height={50} style={{border: '1px solid black', display: 'flex', justifyContent: 'flex-start', alignItems: 'center'}}>
  <Button style={{width: 'auto', padding: '0 16px', backgroundColor: '#4CAF50', color: 'white'}}>Hug Button</Button>
</Frame>

Output

A green button that sizes itself just wide enough to fit the text inside, inside a 300px wide frame.

When to Use Which

Choose Fill when you want elements to stretch and fill their container, perfect for full-width layouts or responsive designs. Use Hug when the element’s size should depend on its content, like buttons or labels that change text length. Opt for Fixed when you need consistent, unchanging sizes, such as icons or fixed-size images.

Key Takeaways

Use Fill to make elements stretch to their parent container's size.

Use Hug to size elements tightly around their content.

Use Fixed to keep elements at a constant size regardless of content or container.

Choosing the right sizing improves responsive design and layout control in Figma.