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.
Using Anima, you can now create fully responsive designs that can be resized 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 an artboard, a group, or a component/symbol.
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
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.
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:
Click “Preview in Browser” in the Anima plugin to see it come to life!
What is Anima?
Anima is automating the design-to-code process, allowing designers to achieve more without learning to code, and helping teams to deliver faster.
Design to code, automated.