Constraints help designs to adapt to screens with various sizes by controlling how layers behave when the parent frame is resized.

Horizontal constraints

• Left: Keeps the layer fixed relative to the frame's left edge

• Right: Keeps the layer fixed relative to the frame's right edge

• Left and right: Maintains the layer's size and position relative to both horizontal edges

• Center: Keeps the layer centered horizontally

• Scale: Maintains the layer's horizontal size and position as propotions of the frame's width

Vertical constraints

• Top: Keeps the layer fixed relative to the frame's top
• Bottom: Keeps the layer fixed relative to the frame's bottom
• Top and bottom: Maintains the layer's size and position relative to both vertical edges
• Center: Keeps the layer centered vertically
• Scale: Maintains the layer's vertical size and position as propotions of the frame's height

Apply constraints

To apply constraints to a nested layer in a frame

• Select the nested layer you would like to apply constraints
• Find the constraints section in the right sidebar
• Use the first dropdown menu to set horizontal constraints
• Use the second dropdown menu to set vertical constraints

You can also click on the left side of the dropdown menu to set the constraints for the layer. The blue line shows the currently applied constraints.

👍🏻 Helpful or 👎🏻 Not Helpful

👉🏻 Was this article helpful to you? We look forward to your feedback.
👍🏻 Helpful
👎🏻 Not Helpful