F Figma

How to set up design constraints on Figma

intermediate 8 min read Updated 2026-03-18
Quick Answer

Design constraints in Figma control how objects behave when their parent frame is resized. Set constraints by selecting an object, opening the Design panel, and choosing horizontal and vertical constraint options like Left & Right, Center, or Scale to create responsive layouts.

Try Figma Full Figma Review

Prerequisites

  • Basic Figma navigation knowledge
  • Understanding of frames and components
  • Familiarity with Auto Layout concepts
  • Knowledge of responsive design principles

Step-by-Step Instructions

1

Select the object to constrain

Click on the layer, component, or element you want to apply constraints to within your frame. Make sure the object is nested inside a frame, as constraints only work within parent containers. You'll see the selection highlighted with blue handles around the object.
Constraints work best on direct children of frames - avoid deeply nested objects for cleaner behavior.
2

Open the Design panel

In the right sidebar, locate the Design panel (it should be open by default when an object is selected). If you don't see it, click the Design tab in the Properties panel. Scroll down to find the Constraints section below the positioning and sizing options.
3

Set horizontal constraints

Click the Constraints dropdown and select your horizontal constraint option:
  • Left - maintains fixed distance from left edge
  • Right - maintains fixed distance from right edge
  • Left & Right - stretches to maintain distances from both edges
  • Center - keeps object centered horizontally
  • Scale - resizes proportionally with frame width
Use Left & Right for elements that should stretch like headers or input fields.
4

Configure vertical constraints

Below the horizontal constraint, set the vertical constraint by clicking the second dropdown:
  • Top - maintains fixed distance from top edge
  • Bottom - maintains fixed distance from bottom edge
  • Top & Bottom - stretches to maintain distances from both edges
  • Center - keeps object centered vertically
  • Scale - resizes proportionally with frame height
Top & Bottom constraints work well for sidebar elements or content areas that should fill available space.
5

Test constraint behavior

Select the parent frame containing your constrained object. Drag the frame's corner handles to resize it and observe how your constrained object responds. The object should move, resize, or stay positioned according to your constraint settings. Try different frame sizes to ensure the behavior works as expected.
Hold Shift while dragging to maintain the frame's aspect ratio during testing.
6

Apply constraints to multiple objects

Select multiple objects by holding Shift and clicking each one, or drag to select multiple items. With all objects selected, set constraints in the Design panel - the same constraint settings will apply to all selected objects. This is efficient for applying consistent responsive behavior across similar elements.
Use this technique for button groups, navigation items, or card layouts that need identical constraint behavior.
7

Combine with Auto Layout for advanced responsiveness

For more sophisticated responsive designs, combine constraints with Auto Layout. Select your frame and click the Auto Layout button (plus icon) in the Design panel. Set Fill container options on child elements, then apply constraints to the Auto Layout frame itself for nested responsive behavior.
Auto Layout handles spacing and alignment automatically, while constraints control the frame's response to its parent container.
8

Create constraint presets for consistency

Once you've configured optimal constraint settings, save them as component properties or create a style guide document. Copy objects with well-configured constraints and paste them as templates. Document your constraint patterns in your design system for team consistency across projects.
Create a constraint testing artboard with various frame sizes to quickly validate your responsive design behavior.

Common Issues & Troubleshooting

Object jumps unexpectedly when frame is resized

Check that the object is a direct child of the frame being resized. Objects nested in groups or other containers may not respond correctly to constraints. Ungroup or move the object directly into the target frame.

Constraints options are grayed out or missing

Ensure the selected object is inside a frame, not floating on the canvas. Only objects within frames can have constraints applied. Create a frame around your objects using Ctrl/Cmd + Alt + G or the Frame tool.

Text gets cut off when using Left & Right constraints

Text with Left & Right constraints will stretch its container but may cause overflow. Switch to Auto Layout with Hug contents for text elements, or use Center constraints instead of Left & Right for better text handling.

Complex layouts break when constraints are applied

Start with simple constraint setups before adding complexity. Use Auto Layout for the immediate parent containers, then apply constraints to those Auto Layout frames. This creates more predictable and maintainable responsive behavior.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Figma website before purchasing.
Visit Figma View Figma Pricing