We are constantly exposed to Constraints, but we don’t know what they are. In this Figma tutorial, you will learn what Constraints in Figma are and how to use them to understand your design.
Most of the time, you expect to find a service in different versions. For example, If you use an app, you expect the app to have a desk version, a tablet version, maybe an Ipad version, and so on. You also expect that the functions and aspects of the app adapt to all its different versions. This function in Figma is known as the Constraints. Basically, the constraints tell Figma how your design will respond when you resize the frame, meaning that your design will adapt to different screen sizes and devices.
NOTE: We suggest checking our previous tutorials on How to Understand Interface Principles and What is a Wireframe in Figma, to understand better the function behind some concepts previously mentioned.
Constraints manipulate the behavior of layers depending on your design in the prototyping phase. Let´s do a quick exercise creating a long frame, long enough that you have to scroll and add some shapes.
In this case, we will add Constraints to the text in the reference image. Let’s say you want the text to remain at the top of the frame while you are scrolling -like some shopping webs have when they offer a discount, and they want you to see it no matter what-. While selecting the text -or shape- check the Constraints menu at the right and activate the option “Fix position when scrolling”.
What should happen in the actual prototype is that when you start scrolling down, the text -or shape- must remain at the top of the frame in this case. In How to Apply Constraints in Figma, we will explore the functions of Constraints for you to become an expert using Figma.
