<aside> 💡 Constraints: It allows you to fix elements of your design to different sides of their parent frame. If you set your constraints correctly, your design will scale to fit any screen size.

</aside>

1. Video Tutorial by Figma

Apply Constraints to define how layers resize

Apply Constraints to define how layers resize

Figma team collected five ways constraints can make your life a lot easier, ranging from beginner level to intermediate.

Tips for using Constraints in your workflow

2. Examples by Sizze

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2f781db5-d95a-4d9d-94a8-cffc3cc6c4d1/Frame_6580.png

Do: Use horizontal constraints on the right and left to make the content stretch to the full width of the screen

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fd2b503d-4af1-4621-bb2b-c9e295d042bd/Constraints.svg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0c66d0b7-fe98-4219-8416-ea40de539b6b/Frame_6579.png

Don’t: Include on one side only

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ee40710e-70aa-4812-a74f-4b6047ebb081/Constraints-1.svg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/637f0b43-4499-4402-be25-f5b2c7587991/Frame_6580.png

Do: Use a vertical bottom constraint for bottom elements

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8d880edf-d5cc-4c6f-9ca2-fe3f134b3518/Constraints.svg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e66b7dde-3357-4a4b-bb43-5371c01d7b71/Frame_6579.png

Don’t: Include on one side only

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ee40710e-70aa-4812-a74f-4b6047ebb081/Constraints-1.svg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d83515bf-420d-4c4c-8425-328bf6791208/Frame_6580.png

Do: Use the top vertical constraint for nav bars

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/94b7b711-82a4-4546-9032-64d02ad40f03/Constraints.svg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6ab160e3-95ba-45b1-9375-e6cece7f52ec/Frame_6579.png

Don’t: Include on one side only

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ee40710e-70aa-4812-a74f-4b6047ebb081/Constraints-1.svg

Example in Figma

🔥Examples Sizze