How to use constraints in Figma for responsive resizing
Introduction
Before Auto Layout, we had Constraints. While Auto Layout handles spacing relative to other items, Constraints handle spacing relative to the parent frame.
If you resize a desktop frame to mobile and your navigation bar stays stuck in the middle of nowhere, you have a Constraints problem.
Guide Steps
The Problem: Elements move unpredictably
By default, Figma sets constraints to 'Scale' or 'Top/Left'. If you make a frame wider, 'Scale' will stretch your button into a weird oval. If you make a frame taller, 'Top' keeps a footer floating in the middle of the screen instead of sticking to the bottom.
The Solution: Pin to edges
Select the element. In the Constraints panel, set the lines to match where the object should 'stick'. For a footer, choose 'Bottom' (vertical) and 'Left and Right' (horizontal). This tells Figma: 'Keep this object at the bottom, and stretch its width to match the frame'.
The Solution: Center alignment
For a modal or logo that should stay dead center, set constraints to 'Center' for both vertical and horizontal. Now, no matter how you resize the frame, the object stays perfectly in the middle.
What to avoid
Avoid using 'Scale' for anything other than vectors or background images. Never use scale for UI controls like buttons or inputs, as it distorts text sizes and corner radii.
Pro-Level Design Tips & Workflows
💡 Asset Export: Hold the Option (Mac) or Alt (Windows) key while choosing resolution multipliers to export layers in exact dimensions.
💡 Vector Grid Snapping: Enable 'Snap to pixel grid' (Shift + Cmd + ') to prevent decimal positioning values which cause asset export pixelation.
Practical UI Example & Screenshot Checklist
Here is a real-world scenario where you will apply these exact layout rules:
Build a container frame with a logo and menu links. Set Auto Layout horizontal direction, padding margins to 24px, and select 'Space between' alignment to keep elements pinned to the margins.
- ✓ Inspect the right-hand design variables sidebar.
- ✓ Verify child width dropdown is set to
Fill container. - ✓ Drag the parent frame width to verify elements adapt automatically.
Glossary of Core Design Terms
A sizing constraint instructing the container frame boundaries to fit around child layers automatically.
A responsive instruction that stretches child layers to consume the remaining horizontal space of its parent flex frame.
The primary component template source. Updates to the master component propagate across all visual instances.
Figma Templates & Resources
Figma Starter Playground (.fig)
Includes pre-built design grids, responsive card examples, and button variant frames.