Resizing rules (hug, fill, fixed) in Figma - Step-by-Step Guide

Introduction

Resizing rules in Figma control how objects change size when their parent frame changes. They help keep your design neat and responsive without manual adjustments.

When you want a button to grow or shrink with the frame width automatically.

When you want text to stay just big enough to fit its content inside a frame.

When you want an image to fill the entire space of its container regardless of size changes.

When you want a sidebar to keep a fixed width even if the window resizes.

When you want a chart to stretch horizontally but keep its height fixed.

Steps

Step 1: Select the object you want to resize

- Canvas or Layers panel

The object is highlighted and its properties appear in the right sidebar

Step 2: Locate the Resizing section

- Right sidebar under the 'Constraints' panel

You see options for Horizontal and Vertical resizing rules

Step 3: Click the dropdown for Horizontal resizing

- Resizing section in the right sidebar

Options 'Hug contents', 'Fill container', and 'Fixed size' appear

Step 4: Select 'Hug contents' for horizontal resizing

- Horizontal resizing dropdown

The object width adjusts automatically to fit its content

Step 5: Select 'Fill container' for vertical resizing

- Vertical resizing dropdown

The object height stretches to fill the parent frame's height

Step 6: Resize the parent frame

- Select and drag the frame edges on the canvas

The object resizes according to the chosen rules (hug, fill, or fixed)

Before vs After

Before

A button inside a frame has fixed size horizontally and vertically. When the frame width grows from 200px to 400px, the button stays 100px wide.

After

The button's horizontal resizing is set to 'Fill container'. When the frame width grows from 200px to 400px, the button width also grows from 100px to 400px to fill the space.

Settings Reference

Horizontal Resizing

📍 Right sidebar > Constraints > Horizontal dropdown

Controls how the object's width changes when the parent frame resizes

Default: Fixed size

Vertical Resizing

📍 Right sidebar > Constraints > Vertical dropdown

Controls how the object's height changes when the parent frame resizes

Default: Fixed size

Common Mistakes

Setting both horizontal and vertical resizing to 'Fixed size' when you want the object to adapt to frame size changes.

The object will not resize and may look out of place or cause layout issues.

Use 'Fill container' or 'Hug contents' depending on whether you want the object to stretch or fit its content.

Confusing 'Hug contents' with 'Fill container'.

'Hug contents' sizes the object to its content, not the frame, so the object won't stretch with the frame.

Use 'Fill container' to make the object stretch with the parent frame size.

Summary

Resizing rules control how objects change size inside frames in Figma.

'Hug contents' fits the object size to its content automatically.

'Fill container' stretches the object to fill the parent frame size.

'Fixed size' keeps the object size constant regardless of frame changes.