#Responsive resize according to contents how to#
#Responsive resize according to contents manual#

It’s not bad at all, but it could be better: Automatic resizing 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.įor example, here’s an interface where the objects are responsively resized automatically. Underneath the Responsive Resize toggle there’s a switch to make the process Manual, instead of Automatic.

#Responsive resize according to contents manual#

Manual constraints take things a step further by allowing us to be even more specific with how Adobe XD deals with responsive resizing. 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).īy 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 The alignment and spacing of objects can be tailored to your needs. Original and resized UI in Adobe XD Tailoring Alignment Equally, when I stretch the artboard vertically, the positioning of the UI elements is retained perfectly. 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. Open a document in Adobe XD and you’ll notice a Responsive Resize toggle in the properties pane: Responsive resize takes all of that manual labor and fixes things for you automatically.

For example, you’d make your artboard bigger, then reposition, realign, and resize the top bar elements and all other objects accordingly.

#Responsive resize according to contents how to#

How to Use Responsive Resize and Constraints in Adobe XDīefore Adobe XD introduced its new resize features, resizing a design meant manually repositioning all the required elements.