Introduction
If you’re new to design, you may have noticed a lot of underused options when you’re designing. It may seem unimportant at first, but as time passes and you gain experience in the industry, you will discover the need to explore all of the options that a design tool provides. Constraints are one such thing. In this blog, we’ll look into what constraints are and how we may apply them.
Get Started
What are “Constraints”?
According to the Figma site, “(Constraints) let you fix design elements to various sides of their parent frame. Properly setting constraints will ensure that your design scales to any screen size.
How can you view constraints?
Constraints only apply to elements inside frames. The constraint’s box specifies how the design elements should behave when scaled or resized. Knowing the fundamentals of constraints can help you grasp the concept from the foundation. To ensure you understand, I’ll begin with a well-known illustration.
The FAB Button example
The constraints are set to left and top by default.
If you want to change the size of the frame, the FAB should adjust accordingly. With the right and bottom constraints selected, the FAB button should resize appropriately (as shown in the video).
With that said, I’ll show you some other constraint options you might need.
Horizontal Constraints
Left Constraint
Left constraints keeps your design elements in their original position, on the left side of your frame, regardless of how wide you drag your frame. However, the element travels along with the frame when you move it from the left side.
Right Constraint
Right Constraints helps keep an element in a frame at its rightmost place; it only moves when the right side of the frame is moved. Setting form components using this is beneficial.
Centre Constraint
This is extremely helpful when you want an element to stay in the same place regardless of which direction the frame expands, it keeps the centre. The icon set will benefit greatly from this. Same applies for the vertical constraints
Left and Right Constraint
This makes sure that when a frame is extended, its components scale uniformly to the left and right. This should only be used when you are certain of the desired behaviour your design element should exhibit.
Scale Constraint
You can maintain a constant scale for your frame by doing this. The components inside an expanding frame increase horizontally by a factor of two. This is perfect for backgrounds in form fields. This also applies to vertical constraints.
Vertical Constraints
Top Constraint
This is crucial and frequently the default setting for items in frames. When you drag your frame down, it ensures that your elements always remain at the top. Typically, the Top Nav Bar benefits from this.
Bottom Constraint
When you drag your frame and you require the elements to remain in bottom position, this is the best thing to do to ensure that they stay there.
Top and bottom Constraint
When you drag the frame vertically, this controls the movement to the top and bottom of the frame. Vertically, this works similarly to the scale function.
You are now aware of the various applications for constraints. It’s only the beginning; now comes the meat of the story.
Constraints using a Layout grid
Constraints can utilise the grid as a guide when resizing an element. You could, for example, resize a four-icon bottom navigation bar using a grid. It can be applied to a grid only if it is a column grid or row grid with the stretch option enabled. It will not work in the grid format.
Auto-Layout and Constraints?
You could wonder whether constraints apply to auto-layout because auto Layout has the potential to take us further.
Both auto-layout and constraints have their own resizing capabilities.
But the truth is no elements can have constraints added to them within an Auto layout frame.
Conclusion
I know it’s difficult to grasp the concept, and you might struggle with it at first, but practising will make it much easier (speaking from personal experience).
Once again, thank you for taking the time to read my blog. Check out my profile for more such blogs. I’ll see you all again in my next blog! Please leave any blog topic recommendations in the comments section till then. Bye! ;)
