Constraints
Define how layers behave when their parent frame is resized. Essential for responsive and adaptive design.
Layout
No shortcutIntermediate8 min readQuick Reference
Constraints
FigmaKeyboard Shortcut
N/A
Toolbar Location
Figma toolbar
Best Used For
- ▸Refer to the tutorial content for specific use cases
- ▸Practice with sample projects to build experience
- ▸Combine with other tools for advanced workflows
Intermediate⏱ 30–60 minutes to master
Key Settings
Left/Right:Top/Bottom:Scale:
Constraints control how child layers respond when their parent frame is resized. They are Figma's primary mechanism for creating responsive and adaptive layouts before Auto Layout was introduced.
Where to Find It
In the Design panel, select a layer and find the Constraints section below the layer's frame settings.
How to Use
- Left/Right: Choose Left (fixed distance from left edge), Right (fixed distance from right), Left+Right (stretch), or Center.
- Top/Bottom: Choose Top (fixed distance from top), Bottom (fixed from bottom), Top+Bottom (stretch), or Center.
- Scale: The Scale constraint resizes the layer proportionally with its parent.
Pro Tips
- Use Left+Right and Top+Bottom constraints for elements that should stretch with their container.
- Constraints work great for simple responsive needs, but Auto Layout is better for complex responsive layouts.