Create Responsive Adobe XD Prototypes Using Anima - Anima Blog
Design

Create Responsive Adobe XD Prototypes Using Anima2 min read

Reading Time: 3 minutes Control how your designs look across different screen sizes

Create Responsive Adobe XD Prototypes Using Anima

Create Responsive Adobe XD Prototypes Using Anima2 min read

Reading Time: 3 minutes

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

We’re thrilled to announce that with Anima for Adobe XD v1.0.7, Anima Prototypes fully support XD’s Responsive Resize. That means that viewing prototypes in the browser will now show a responsive prototype.

Using Anima, you can now create fully responsive designs that can be resized in the browser preview and in the 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, 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.

For 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:

adding the resize constraints to create responsive Adobe XD prototypesResponsive Resize inside Groups and Components: adding the following resize constraints

The Power of Constraints + Breakpoints

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

Learn how to create Breakpoints with Anima for Adobe XD.

Preview it!

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

Preview Live Website | Download Sample File

What is Anima?

Anima allows designers to create high-fidelity prototypes right inside SketchAdobe XD, and Figma and export HTML & CSS in a single click.

As always, we’re excited to hear your feedback!

Join the discussion or show off your designs on  FacebookTwitterSlackInstagramand vote for new features at UserVoice.

Stay creative!
❤️ Anima team

|

Co-founder & CPO

UI/UX master with a keen eye for user journeys. Working on improving the handoff from design to code and creating better interfaces. A huge fan of music festivals and a chocolate lover.

Leave a comment

Your email address will not be published.