How to Use Min and Max Width in Figma for Responsive Design

In Figma, you set min width and max width by using the Constraints and Resizing options in the right sidebar. Select a frame or component, then choose Fixed width or Hug contents and set minimum or maximum width values to control how elements resize responsively.

Syntax

Figma does not use code syntax but uses UI controls to set min and max width. The key parts are:

• Constraints: Defines how an element behaves when its parent resizes.
• Resizing options: Choose between Fixed width, Fill container, or Hug contents.
• Min and Max width: Set these values in the Properties panel under Size to limit resizing.

figma

No code syntax; use Figma UI controls as follows:
1. Select element
2. In right sidebar, under 'Constraints', set horizontal behavior
3. Under 'Size', input min and max width values
4. Choose resizing mode (Fixed, Fill, Hug)

Example

This example shows how to set a frame with a minimum width of 200px and a maximum width of 400px that resizes responsively within its parent frame.

figma

1. Create a frame inside a parent frame.
2. Select the inner frame.
3. In the right sidebar, under 'Size', set Width to 300px.
4. Click the lock icon to unlock width and height.
5. Set Min width to 200px and Max width to 400px.
6. Under 'Constraints', set Horizontal to 'Left & Right' to allow resizing.
7. Resize the parent frame to see the inner frame resize between 200px and 400px.

Output

The inner frame width changes responsively but never goes below 200px or above 400px as the parent frame resizes.

Common Pitfalls

• Not unlocking the width and height before setting min and max values prevents resizing.
• Using Fixed width disables responsive resizing, ignoring min and max width.
• Forgetting to set constraints properly causes elements to not resize as expected.
• Setting min width larger than max width causes conflicts and unexpected behavior.

figma

Wrong way:
- Set width to Fixed 300px
- Try to set min width 200px and max width 400px (ignored)

Right way:
- Unlock width
- Set min width 200px and max width 400px
- Set constraints to Left & Right
- Use Fill container or Hug contents resizing mode

Quick Reference

Setting	Description
Constraints	Control how element resizes relative to parent (Left, Right, Center, Scale)
Fixed Width	Element width stays constant, ignores min/max width
Hug Contents	Element resizes to fit its content, respects min/max width
Fill Container	Element stretches to fill parent, respects min/max width
Min Width	Minimum width element can shrink to
Max Width	Maximum width element can grow to

Key Takeaways

Set min and max width by unlocking size and entering values in the Properties panel.

Use constraints like Left & Right to enable responsive horizontal resizing.

Avoid Fixed width if you want min and max width to work properly.

Min width must be less than or equal to max width to avoid conflicts.

Test resizing by adjusting parent frames to see min/max width effects.