How to Apply Constraints in Figma

In this tutorial, we are going to explain to you How to Apply Constraints in Figma. It’s not like solving equations, but we are using math for sure… or maybe let’s call it the magic behind prototyping. 

Up and Down, Left and Right

In Figma we use two axis:

  • Axis X
  • Axis Y

This means horizontal and vertical constraints.  Both axes control how the layers behave. Axis X controls the horizontal constraints, and Axis Y controls the vertical constraints in relation to the frame. It doesn’t sound fun but knowing this will allow you to see the magic of prototyping, so stay tuned.

Constraints for Everything, Constraints for Everyone

You can apply constraints to any layer within a frame, not outside. If you do it outside no magic happens. You can apply constraints to both axis X and Y as you can apply constraints to frames you nested within other frames. If you have a scrolling Prototype, you can also apply constraints -check a small exercise we did on What are Constraints in Figma related to scrolling prototypes-

How to apply Constraints 

Simply select the layer you want to add the Constraints. You will know if the layer is selected because of the blue line around it. Next, check the Properties Panel where it says Constraints. You can adjust the vertical and horizontal constraints as you see the image of a square which will give you a reference. 

hPoogI fVjiK8sNusc9XHQHXiHw5 IXYieJcc7THjaTamYzW hqKfPqJ7hy05nW9NJa8a32bxcJmFqycnwTCkn THqjml2V1lDzZ423vlBo7UVc5gYvYCMNcBy7e0rReWPpDr8xU5a6FzppK4d9K9KZHvRbqK0nRgKPLGe

If you want to see the magic by keeping the layer in its position when you are scrolling, simply activate the option Fix position when scrolling, and voilá. Constraints will become your best friends once you get to the prototyping phase of your project.

Read The Next Lesson