How to Use Fill Container in Figma: Step-by-Step Guide

In Figma, use the Fill Container resizing option to make an element automatically stretch to fill its parent frame or component. Select the element, then under the Constraints section, choose Fill Container for width, height, or both to enable dynamic resizing.

Syntax

The Fill Container option is found in the Constraints panel of Figma's right sidebar. It controls how an element resizes relative to its parent frame or component.

• Width: Fill Container - The element's width stretches to fill the parent's width.
• Height: Fill Container - The element's height stretches to fill the parent's height.
• You can apply Fill Container to width, height, or both.

plaintext

/* No code syntax in Figma UI, but conceptually: */
Element.constraints.width = 'Fill Container';
Element.constraints.height = 'Fill Container';

Example

This example shows a rectangle inside a frame. The rectangle's width and height are set to Fill Container, so it automatically resizes when the frame changes size.

plaintext

Frame {
  width: 300px;
  height: 200px;
  Rectangle {
    constraints: {
      width: 'Fill Container',
      height: 'Fill Container'
    }
  }
}

Output

A rectangle that always matches the frame's width and height, resizing dynamically as the frame resizes.

Common Pitfalls

Common mistakes when using Fill Container include:

• Not placing the element inside a frame or component, so Fill Container has no parent to fill.
• Mixing Fill Container with fixed size constraints, causing unexpected resizing behavior.
• Forgetting to set both width and height if you want full stretching.

Always ensure your element is inside a parent frame or component and check constraints carefully.

plaintext

/* Wrong way: Element outside frame */
Element.constraints.width = 'Fill Container';
// No parent frame, so no resizing effect

/* Right way: Element inside frame */
Frame {
  width: 400px;
  height: 300px;
  Element {
    constraints: {
      width: 'Fill Container'
    }
  }
}

Quick Reference

Setting	Effect
Width: Fill Container	Element width stretches to fill parent frame width
Height: Fill Container	Element height stretches to fill parent frame height
Both Width & Height: Fill Container	Element fully stretches to fill parent frame
Element outside frame	Fill Container has no effect
Mixing fixed size with Fill Container	May cause unexpected resizing

Key Takeaways

Use Fill Container in Constraints to make elements resize with their parent frame.

Fill Container only works if the element is inside a frame or component.

Set Fill Container for width, height, or both depending on your layout needs.

Avoid mixing fixed sizes with Fill Container to prevent layout issues.

Check your element's parent and constraints to ensure Fill Container works as expected.