FigmaHow-ToBeginner · 4 min read

How to Use Constraints in Figma for Responsive Design

In Figma, use constraints to control how objects resize or move when their parent frame changes size. Set constraints like Left, Right, Top, Bottom, or Center to fix objects relative to frame edges or center, enabling responsive layouts.

📐

Syntax

Constraints in Figma are set per object inside a frame. You choose horizontal and vertical constraints from these options:

Horizontal: Left, Right, Center, Left & Right, Scale
Vertical: Top, Bottom, Center, Top & Bottom, Scale

These settings tell Figma how the object behaves when the frame resizes.

javascript

Object.constraints = { horizontal: 'Left', vertical: 'Top' }

Output

Object will stay fixed to the top-left corner of the frame when resized.

💻

Example

This example shows a button inside a frame with constraints set to keep it pinned to the bottom-right corner when the frame resizes.

css

Frame {
  width: 300px;
  height: 200px;
  contains: Button {
    width: 100px;
    height: 40px;
    constraints: {
      horizontal: 'Right',
      vertical: 'Bottom'
    }
  }
}

// When Frame width or height changes, Button stays at bottom-right corner.

Output

Button remains at bottom-right corner inside the frame regardless of frame resizing.

⚠️

Common Pitfalls

Common mistakes when using constraints include:

Setting conflicting constraints like both Left and Right without Scale, causing unexpected stretching.
Forgetting to set constraints, so objects don’t move or resize as expected.
Using Center constraints but resizing frames unevenly, which can misalign objects.

Always preview frame resizing to check constraint behavior.

javascript

/* Wrong: conflicting horizontal constraints */
Object.constraints = { horizontal: 'Left & Right', vertical: 'Top' };

/* Right: use 'Scale' to stretch */
Object.constraints = { horizontal: 'Scale', vertical: 'Top' };

Output

Wrong: Object may stretch oddly. Right: Object stretches proportionally with frame width.

📊

Quick Reference

Constraint	Effect
Left	Object stays fixed to the left edge of the frame
Right	Object stays fixed to the right edge of the frame
Center	Object stays centered horizontally or vertically
Left & Right	Object stretches horizontally with frame width
Top	Object stays fixed to the top edge of the frame
Bottom	Object stays fixed to the bottom edge of the frame
Top & Bottom	Object stretches vertically with frame height
Scale	Object scales proportionally with frame size

✅

Key Takeaways

Set horizontal and vertical constraints to control object resizing and positioning inside frames.

Use 'Left & Right' or 'Top & Bottom' constraints to stretch objects with frame resizing.

Preview frame resizing to ensure constraints behave as expected.

Avoid conflicting constraints that cause unexpected stretching or movement.

Constraints help create responsive designs that adapt to different screen sizes.