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.
In Figma we use two axis:
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.
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-
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.
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.
