Layout

Constraints

Figma’s responsive constraints make it easier to design for multiple screen sizes. You can create fully responsive designs that can be resized both in the browser preview and in the code.

Figma Constraints Demo

How Does It Work?

An element’s responsive constraints are set in relation to its nearest parents. A parent can be a frame, a group, or a component.

FOR EXAMPLE

Figma Constraints enabled

IMPORTANT: Make sure that Layout Constraints are enabled in the Anima plugin

Constraints in Groups and Components

As mentioned, the constraints settings apply in relation to the element’s closest parent. This means that if the elements are inside a Group or a Component, these too need to have responsive settings applied to them.

FOR EXAMPLE

Inside this Announcement group below (Parent) we want:

Then, we need the following Constraints settings:

Figma Constraints Settings

Learn more about Figma Constraints.

Constraints + Breakpoints

If you have more than one screen size, connecting them with Breakpoints and adding Constraints is a very powerful combo! They will create a very smooth transition between all your screen sizes. Try it out!

Breakpoints and Constraints Combo

Try It!

Click “Preview in Browser” in the Anima plugin to see it come to life.

Figma Constraints Demo