Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe XD
Webdesign

How to Use Responsive Resize and Constraints in Adobe XD

by
Difficulty:BeginnerLength:ShortLanguages:

In this tutorial we’re going to explore some new features in Adobe XD, namely “responsive resize and constraints”. These features, added in September 2018, allow real scaling of designs within Adobe XD, giving us genuinely responsive web design capabilities. 

To demonstrate these new features I’ll be using the Bones iOS wireframe kit available on Envato Elements:

Bones IOS Wireframe Kit
Bones IOS Wireframe Kit

Watch the Video

Resizing Before the XD Update

Before Adobe XD introduced its new resize features, resizing a design meant manually repositioning all the required elements. For example, you’d make your artboard bigger, then reposition, realign, and resize the top bar elements and all other objects accordingly. Not ideal.

Resizing Before the XD Update

Responsive Resize Now

Responsive resize takes all of that manual labor and fixes things for you automatically. Open a document in Adobe XD and you’ll notice a Responsive Resize toggle in the properties pane:

Responsive Resize toggle Adobe XD

Now when I resize the same artboard, you’ll see that centrally-aligned object remain in the center, right-aligned objects stick to the right, and left-aligned objects remain on the left. Equally, when I stretch the artboard vertically, the positioning of the UI elements is retained perfectly.

Original and resized UI in Adobe XD
Original and resized UI in Adobe XD

Tailoring Alignment

The alignment and spacing of objects can be tailored to your needs. For example, if you look at the four elements at the bottom of our demo screen, you’ll see that when resized the email and password inputs are spaced a bit too far away from one another (as we know, proximity is an important factor in designing visual relationships).

email and password inputs are spaced a bit too far away from one another

By first grouping the inputs we can inform Adobe XD that we want them to be visually connected, so they’ll be held closer together upon resize (note the pink line around the group):

Constraints

Manual constraints take things a step further by allowing us to be even more specific with how Adobe XD deals with responsive resizing.

Underneath the Responsive Resize toggle there’s a switch to make the process Manual, instead of Automatic. The controls we’re given allow us to specify, for each object, which edges of the artboard we want it to stick to, and whether we want to keep its height or width fixed.

Manual constraints in Adobe XD

For example, here’s an interface where the objects are responsively resized automatically. It’s not bad at all, but it could be better:

automatic resize
Automatic resizing

With one or two of the elements manually constrained, we can ensure the follow button sticks to the top edge, the tabs do the same, and the post content all stays aligned to the left:

Manual constraints much better
Manual constraints: much better!

Conclusion

Download the latest Adobe XD update and play around with the new responsive resize settings–I guarantee you’ll like what you find! With this update Adobe have made what was a very tedious process extremely intuitive and quick–and combined with functionality such as Repeat Grid you’ll find responsive design in Adobe XD especially powerful for complex UI design.

Learn More About Adobe XD

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.