How to Use Hug Content in Figma for Responsive Design

In Figma, use Hug Content sizing to make frames or components automatically adjust their width or height based on the size of their content. Set the frame's width or height property to Hug in the right sidebar under Resize options to enable this behavior.

Syntax

In Figma, the Hug Content option is found in the Resize section of the right sidebar when a frame or component is selected. You can set the width, height, or both to Hug, which means the frame will automatically resize to fit its content.

• Width: Hug - Frame width adjusts to content width.
• Height: Hug - Frame height adjusts to content height.
• Fixed - Frame size stays fixed regardless of content.

text

Frame Resize Options:
Width: Fixed | Hug
Height: Fixed | Hug

Example

This example shows a frame with text inside. Setting the frame's width and height to Hug makes the frame resize automatically as you edit the text content.

text

1. Create a frame.
2. Add a text layer inside the frame.
3. Select the frame.
4. In the right sidebar under <Resize>, set Width to <Hug> and Height to <Hug>.
5. Edit the text content and watch the frame resize automatically.

Output

The frame size changes dynamically to fit the text content exactly, no extra space or clipping.

Common Pitfalls

Common mistakes when using Hug Content include:

• Setting only one dimension to Hug while the other is Fixed, which can cause unexpected layout behavior.
• Forgetting to set the frame's layout mode to Auto Layout when using Hug Content with multiple child elements, which can prevent proper resizing.
• Using Hug Content on frames with no content or invisible layers, resulting in zero or minimal size.

text

Wrong:
- Frame width: Fixed
- Frame height: Hug

Right:
- Frame width: Hug
- Frame height: Hug
- Use Auto Layout for multiple children

Quick Reference

Property	Description	When to Use
Width: Hug	Frame width adjusts to content width	When content width varies or is dynamic
Height: Hug	Frame height adjusts to content height	When content height varies or is dynamic
Fixed Size	Frame size stays constant	When you want a fixed frame size regardless of content
Auto Layout	Enables flexible layout for multiple children	Use with Hug Content for responsive frames

Key Takeaways

Set frame width and/or height to Hug Content to make it resize automatically based on content size.

Use Auto Layout with Hug Content for frames containing multiple elements to ensure proper resizing.

Avoid mixing Fixed and Hug sizing in ways that cause layout issues.

Hug Content helps create responsive designs that adapt as content changes.

Check that content is visible and properly sized to get expected Hug Content behavior.