Figma Constraints: Building Responsive Layouts
Constraints are rules for how layers react when their frame is resized. Use them to build responsive designs, like pinning a logo to the top-left or stretching a background. The footgun: Constraints don't work on groups or inside Auto Layout frames.
Why it exists
Constraints were created to solve the problem of designing for multiple screen sizes. Without them, you would need to manually reposition every element for each device width, which is tedious and error-prone. Constraints provide a basic but powerful way to define responsive behavior directly on your layers.
The mental model
Think of constraints as invisible pins or rubber bands connecting a layer to its parent frame. You can pin a layer to an edge (Top, Left), which keeps its distance from that edge constant. You can pin it to two opposite sides (Left and Right), which acts like a rubber band, stretching the layer as the frame resizes. Or you can tell it to 'Scale', maintaining its size as a percentage of the frame.
How it works
Every layer inside a frame has independent horizontal and vertical constraints, which default to 'Top' and 'Left'.
For the horizontal axis, your options are: Left, Right, Left & Right, Center, or Scale. 'Left & Right' maintains the layer's distance from both side edges, causing it to stretch or shrink. 'Scale' resizes the layer's width proportionally to the frame's width.
For the vertical axis, the options are analogous: Top, Bottom, Top & Bottom, Center, or Scale.
When to use it
Use constraints for simple, predictable responsive layouts. It's perfect for pinning a status bar to the top of a screen (Top, Left & Right), keeping a floating action button in the bottom-right corner (Bottom, Right), or centering a modal on the screen (Center, Center).
When not to use it
Constraints are the wrong tool for dynamic content where elements should reflow or push each other, like a list of tags. Critically, you cannot apply constraints to layers within an Auto Layout frame, as Auto Layout uses its own resizing system. You also can't apply constraints directly to a group; you must select the individual layers inside it.
One canonical example
Consider a mobile app screen with a header. The header frame itself would have its constraints set to 'Top' and 'Left & Right'. This pins it to the top edge of the main screen frame and ensures it stretches horizontally to match any device width, keeping the UI consistent across different phones.
Interview question
Which scenario describes a key limitation when working with Figma Constraints?
- a.They cannot be applied to elements that are nested within a group.
- b.Layers inside an Auto Layout frame cannot use constraints.Correct
- c.They only allow pinning to one edge at a time, not stretching or scaling.
- d.They are primarily designed for dynamic content that needs to reflow, not fixed elements.
Why? this is the answer
The card clearly states that 'you cannot apply constraints to layers within an Auto Layout frame,' as Auto Layout manages its own resizing. This is a critical limitation, unlike applying to elements within a group, where constraints work on individual layers.
Just read this? Test yourself on what you have been reading.
Read the original → help.figma.com
- #figma
- #ui design
- #responsive design
- #constraints
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on figma — each one lists the topics its interview covers.
See open roles