Responsive Design

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.

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

• If we want the Purple Background layer in the example below to stretch full width when its parent, “Our Story-Mobile” frame, gets wider, we need to select Left and Right from the Constraints options.

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 need to have responsive settings applied to them as well.

FOR EXAMPLE

Inside this Announcement group below (Parent) we want:

• The Purple background to stretch full width and always touch the top
• The Announcement Text to always stay centered and 15px from the top
• The Close icon to always be 17 pixels from the left corner
• The entire Announcement Group (Parent) to stretch when its parent (Our Story frame) is stretched

Then, we need the following 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!

Try It!

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

• Preview live in the browser
• Open Figma Sample File