Learn Figma Basics, Part 3: Frame Constraints.
Tags: figma, tutorial, design, beginners
Published: 2020-04-29 10:55:25

**Constraints** tell Figma how **objects** should **respond as you resize their Frames.** This helps you to control how designs look across different screen sizes and devices.

##**How constraints work:**
Each object has a combination of horizontal and vertical constraints. we access and modify an object’s constraints through the properties panel.

####**Horizontal Constraints**

Horizontal constraints define how an object behaves, as you resize the Frame along the x-axis.

![figma horizontal constraints](https://lh3.googleusercontent.com/cE7wX0Cu908B8mElLYaxPIWQXdXKYL6OEF_XnEtvRvVrz6IoxMV0OkzbOtWJ2gSoUpKk5O7-DOUr2y_VlW2AxL3qIkJ5U2rL3_aIbTmE8j6BUw62x1Tt_iw88AoyIR1feMj3fSni)

- **Left** maintains the object’s position, relative to the left side of the frame.
- **Right** maintains the object’s position, relative to the right side of the frame.
- **Left and right** maintain the object’s size and position relative to both sides of the frame. This may cause objects to grow or shrink along the x-axis when resized.
- **Center** maintains the object’s position, relative to the horizontal center of the frame.
- **Scale** will define the object’s size and position as a percentage of the Frame's dimensions. It will then maintain those proportions as you resize it.

 This is how our form field behaves when frame resized, with different horizontal constraints.

![figma horizontal constraints application](https://lh3.googleusercontent.com/PMdGJmVOaIKSchYjkfXeLdEfcTXabmN2bOCLOYhAzLBwrCtw_mfMYqngR0022Ge4VA2EtQhz1TiE6Fpm88iczTT_6wHl7HmVRaUybjRFkCpjlvTWZ6OH7NmMYyGgdLXYCN3Fq05r)

####**Vertical Constraints**
Vertical constraints define how an object behaves, as you resize the Frame along the y-axis.

![figma vertical constraints](https://lh3.googleusercontent.com/s0YVuQcYuM1f0c33nh8a_GxSRuT7TpfOFDCCAt8tX2bGngJrGPbQ7bNJBWZVTlBDHljOu5cOLGKcRGI1wml7BCKLPsNA7pof_h0A2clXWaSk1Ulm2hky5VGEJ2RRMcxXrjW_oHAI)

- **Top** maintains the object’s position, relative to the top of the frame.
- **Bottom** maintains the object’s position, relative to the bottom of the frame.
- **Top and bottom** maintain the object’s size and position relative to the top and bottom of the frame. This may cause objects to grow or shrink along the y-axis when resized.
- **Center** maintains the object’s position, relative to the vertical center of the frame.
- **Scale** will define the object’s size and position as a percentage of the Frame's dimensions. It will then maintain those proportions as you resize it.

 This is how our object behaves with different vertical constraints.

![figma vertical constraints application](https://lh3.googleusercontent.com/wG_k4Ca6idevGemTZ4RVTwX97yy9rdceYmWrZvzTHuOlbj3AchnMhOamtqRYaHfw9I38nw9swx0u2eE1BRld9PIdvqbd4iioJQch7x9r)

###**Exercise file:**
I created an exercise file to help you practice constraints. it contains ready to use elements with different constraints application.

File link : [figma constraints](https://www.figma.com/community/file/835622178387894425/Figma-Constraints-Tutorial)

That's all about the Figma Constraints Feature. In the next post, we will discover the Auto Layout feature and how to make auto resizable UI components.

This post is a part of a series that cover the basics of designing with Figma.
Please don’t forget to follow and share. See you in the next post ;)