If you’re using XD’s Responsive Resize or Figma Constraints, you probably save a lot of time. Having a responsive behavior inside your design makes it easier to design for multiple screen sizes.

We’re thrilled to announce that Anima Prototypes fully support XD and FIgma’s Responsive Resize.

Using Anima, you can now create fully responsive designs that can be resized in the browser preview, synced projects and generated code.

Preview Live Website | Download Sample File

How Does it Work?

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

FOR EXAMPLE

  • If we want a background layer to stretch full width when its parent, the “Homepage” artboard, gets wider, we need to select Left, Right from the Responsive Resize

  • And if we want it to keep the same distance to the top of its parent at all times, select Top

Learn about Adobe XD’ Responsive Resize

Responsive Resize inside Groups and Components

As mentioned, the responsive 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.

Adobe XD Example:

Inside this Navigation group (Parent), we want the:

  • White Background to stretch the full width

  • Foodie logo to stay 30px from the left corner

  • Group of navigation Links to stay 30px from the right corner

  • The entire Group (Parent) to stretch when its parent (the artboard) is stretched

We can achieve this by adding the following resize constraints:

Figma Example:

  • Header elements are all grouped together

  • Set constraints to top right and left

  • Entire header stretches along with artboard

❗️ Please Note: Before preview/syncing your responsive Figma design, make sure to check off 'Use Figma Constraints' from the Responsive tab in the Anima plugin.


Once all constraints are set, click “Preview in Browser” in the Anima plugin to see it come to life!

Preview Live Website | Download Sample File


Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?