When you want to control how your designs look across different screen sizes or devices, constraints allow you to keep all your designs within the bounds of the appearance size.

Horizontal constraints

Horizontal constraints define how a layer behaves, as you resize the frame horizontally.

• Left upholds the layer’s position, relative to the left side of the frame.
• Right upholds the layer’s position, relative to the right side of the frame.
• Left and right upholds the layer’s size and position relative to both sides of the frame.
• Center upholds the layer’s position, relative to the horizontal center of the frame.
• Scale defines the layer’s horizontal size and position as a percentage of the frame's dimensions and upholds those proportions as you resize it.

Vertical constraints

Vertical constraints define how a layer behaves, as you resize the frame vertically.

• Top upholds the layer’s position, relative to the top of the frame.
• Bottom upholds the layer’s position, relative to the bottom of the frame.
• Top and bottom upholds the layer’s size and position relative to the top and bottom of the frame.
• Center upholds the layer’s position, relative to the vertical center of the frame.
• Scale defines the layer’s vertical size and position as a percentage of the frame's dimensions and upholds those proportions as you resize it.

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