Figma Constraints: Building Responsive Layouts

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.