Understand Constrain and Auto-layout in Figma.

Credit: Hai Thắng (UI Design)

What sets Figma apart from other design tools like XD or Skecth are constrainand auto-layout tools. This is also one of the key points to the success of Figma. Through many updates, now the constrain and auto-layout toolset are much more powerful and useful than before. When you are processing related designs for different screen sizes, or you are creating a UI KIT, the proper use of the constrain and auto-layout will save you a lot of time, because those help you automatically position and reposition those items in the frame as desired when you resize them.

In this article, I will guide you in detail about the nature of the constrain and auto-layout and how to use them. In addition, I also have practical examples so that everyone can understand better!

1. Constrain

Constraints are used to make the design more flexible and adaptable across various screen sizes. These have two dimensions — vertical and horizontal. Both of these in turn have different options such as — left, right, bottom, center, scale, and top & bottom. Constraints can be set for any element.

Constraints work Horizontally and vertically. You can apply constraints along the X (horizontal) and Y (Vertical) axis.

Horizontal
The horizontal constraints are defined by how a layer should behave as you resize the frame along the x-axis.

• Left: maintains the positions of the layer relative to the left side of the frame.
• Right: maintains the positions of the layer relative to the right side of the frame.
• Left and Right: this will maintain the layer size and position relative to both sides of the frame, and may cause layers to grow or shrink along the x-axis when resized.
• Centre: maintains the position of the layer, relative to the horizontal center of the frame.
• Scale: will define the size and position of the layer as a percentage of the dimension of the frame and will then maintain those proportions as you resize it.

Vertical
The vertical constraints define how a layer should behave as you resize the frame along the Y-axis.

• Top: Maintains the positions of the layer relative to the top of the frame.
• Bottom: maintains the positions of the layer relative to the bottom of the frame.
• Top and Bottom: Maintains the layer size and positions relative to the top and bottom of the frame. It May cause layers to grow or shrink along the Y-axis when resized.
• Scale: Will define the layer size and position as a percentage of the frame dimension, it will then maintain those proportions as you resize it.

Constrain Example

For example with this text filed:

When you create a responsive text field. You have to set constrain to limit text message and text field icon. The limit text message is always at the bottom and right side so you need to set constrain to Right, Bottom. The text field icon is always at the bottom and left side, so you need to set constrain to Left, Bottom. Let’s see the result!

In real screen design:

This is the result:

2. Auto-layout

Auto-layout is an important feature, and it is the feature that sets Figma apart. It helps you structure elements and frame sizes in a way that can automatically respond to the number and size of elements inside the frame. When using auto-layout, you have to care about the parent frame and child item in that frame. The parent frame contains elements and objects of your design. Child items are the elements and objects inside the parent frame. You can quickly set auto layout with the hotkey Shift + A (after selecting all items to need to set auto-layout).

It has many properties in an auto-layout frame.

1. Direction — Allows your design layout either to be in Columns (Horizontal) or Rows (Vertical)
2. Padding — Determines the whitespace around your objects (Children)
3. Spacing between items — Controls the spacing between your objects
4. Spacing mode — Set space between items to Packed or Space between
5. Strokes — Set Strokes to Include in layout or Exclude from layout
6. Canvas stacking — Set Canvas stacking to Last on top or First on top
7. Alignment — align objects along one axis
8. Position — ability to change the placement of objects

Read more details about auto-layout in Figma help

For Example with a product card:

3. Resizing

One of the most powerful functions of auto layout is its ability to control the dimensions of the objects in an Auto layout frame.

Set resizing behavior for parent auto layout frames to adapt to any changes made to their children objects. Resizing settings can be applied for objects on both the X and Y axes individually using the dropdown menus in the right sidebar

Fixed width or height

When an auto layout frame is set to Fixed width or height, the values of the frame’s dimensions remain the same regardless of the content within them. The size of the frame doesn’t respond to changes in the objects within them, like a string of text that changes in length.

Hug content

Set an auto layout frame to Hug content to resize itself according to its child objects. The frame will keep the smallest possible dimensions to surround the objects within it, while respecting the padding value.

Note: If any child objects within an auto layout frame are set to Fill container, the parent frame will no longer hug contents and become Fixed for the axis.

Fill container

Objects in an auto layout frame set to Fill container stretch to the width and/or height of their parent frame.

Summary

Constraints and Auto Layout are powerful tools in Figma that allow you to automate different sizing behaviors. While they have a shared goal, and less manual resizing, they function in opposite ways. Constraints allow you to control how objects respond to changing frames, while auto layout allows you to control how frames respond to changing objects. It’s hard when you start using these tools, but you need to use them to increase your design skill. Using them every day will help you deeply understand and mastering in these helpful tools.

Hope this was useful for you. Thanks for reading through.