Using Figma constraints for responsive design

Constraints in Figma allow a child element to automatically resize itself relative to its parent. Thus, when you stretch a Frame to resize it, the elements contained in this Frame will adopt a responsive behaviour according to the defined constraints. This is a fairly advanced tool in Figma, which once mastered, is a real productivity booster.

Whether for your UX and UI mock-ups, constraints are therefore very effective tools for designing responsive web interfaces. These features will apply to all types of design elements such as images, components, texts, buttons, groups, etc.

There are several types of Figma constraints that you can use depending on the needs of the project. During the conception, prototyping and design phases, they allow you to assign several responsive behaviours to one or more child elements: horizontal constraints and vertical constraints.

Horizontal Constraints

Horizontal constraints willallow you to define how your layer will react when you adjust your frame horizontally.

Here are the different horizontal constraints you can apply to child elements:

• Left: will set the position of your layer on the left side of the Frame. When you stretch your frame to the left, the child element will follow.
• Right: will set the position of your layer to the right side of the Frame. When you stretch your frame to the right, the child element will follow.
• Left and right: maintains the position of the layer when you change the position of the Frame from the left and right. This may affect the size of the layer, however, by making it larger or smaller.
• Center: maintains the position of the layer relative to the horizontal centre of the frame.
• Scale: the size and position of your child element will be readjusted in a propositional way (in percentage) to those of the Frame. For example, let's take a 100 px frame which contains an 80 px layer. In this case the child element represents 80% of the frame. If we increase the Frame to 200px, i.e. +20%, the layer will increase to 160px, also +20%.

Vertical Constraints

The vertical constraints in Figma will allow you to define how a child element will react when the vertical dimensions of the Frame are modified.

There are several types of vertical constraints:

• Top: sets the position of the layer on the top of the frame.
• Bottom: sets the position of the layer on the bottom frame.
• Top and bottom: maintains the position of the layer when you change the position of the Frame from the top and bottom. This may however affect the size of the layer, making it bigger or smaller.
• Center: maintains the position of the layer relative to the vertical centre of the frame.
• Scale: as with the horizontal scale, the size and position of your layer will adjust proportionally to those of the Frame.

Uses of constraints in Figma

Figma constraints apply to any element contained in a Frame :

• Slap in a Frame
• Frame within a Frame
• For your groups

Constraints can be used to define how your elements will react in your prototypes. For example when creating animations.

Adding constraints in Figma

1. Select the child element contained in the frame. In the design slide bare (on the right of your screen), you will see a "Constraints" section.
2. The blue notches represent the horizontal and vertical constraints applied to your layer. You can either adjust your vertical and horizontal constraints by clicking on the interactive dashes; or adjust by selecting your constraints from the drop down lists.
3. The "Fix position when scrolling" option will allow you to freeze the position of your layer when scrolling. This will allow you to create "Sticky Element" in your site.

Ignore constraints in Figma

Sometimes you will need to resize your frame or layer, without affecting the rest of the elements. Rather than removing the constraints one by one, use the following keyboard shortcuts while resizing:

Mac: Hold "Cmd" + resize

Windows: Hold down "Ctrl" + resize