Constraints in Figma: Responsive Design Made Easy

Constraints define how layers respond when you resize their parent frames, enabling responsive designs for different screen sizes and devices. Objects within a frame are called child objects, while the frame itself is the parent frame.

Constraints have horizontal (x-axis) and vertical (y-axis) settings. By default, objects are constrained to the top and left edges of their parent frame.

Horizontal constraints

• Left: keeps the object positioned relative to the left side;
• Right: positions relative to the right side;
• Left + Right: The object's size adjusts with the frame along the x-axis;
• Center: keeps the object centered horizontally;
• Scale: adjusts the object's size and position proportionally to the frame.

Vertical constraints

• Top: positions relative to the top edge;
• Bottom: positions relative to the bottom edge;
• Top + Bottom: the object's size adjusts with the frame along the y-axis;
• Center: keeps the object vertically centered;
• Scale: similar to horizontal scaling but for the y-axis.

Constraints can also be set visually using the constraints box in the design panel.

Using constraints for responsive design

• Align objects (e.g., text, buttons, images) with layout grids for precise positioning;
• Adjust constraints for each object based on how it should behave when the frame is resized;
• Ensure groups or masked objects behave as intended by nesting them into frames and reapplying constraints. Shortcut is CTRL + ALT + G (Windows), or Command + Option + G (Mac);
• Test responsiveness by resizing the parent frame to ensure no distortion or misalignment occurs.