By Dani Beaumont
Content-aware layout in Adobe XD enables you to quickly create and edit common design elements without a lot of tedious work in the latest release of Adobe XD.
We've added group padding and coupled with responsive resize taking this capability even further.
I'm here in Adobe XD and I have a few elements that I'm working on here on the design canvas. On the right I have a master button that I've defined and then two instances that I've placed inside these two card designs here towards the left.
Because this is a component I can come here to the master instance and double-click inside and then select for example the rounded corner radius.
When I change the master the instances update appropriately. I could also come in and let's say move the location of the text that I've placed inside the button. I'll go ahead and undo those two changes.
Let's say I wanted to come in and change the actual label or the text that appears inside the button. This is something I've not traditionally been able to do very easily. So, if I come into the word button here and change it to "Plan Your Visit". Notice that the text overruns the container. With the new padding feature I can automate this in a way that makes it pretty much foolproof.
Once again I'll undo the change that I made.
Next, I'll press the ESC key to select the button at its topmost level. In the Layers panel I see that I have that button selected. Towards the right in the Properties inspector I can now come to the layout section and notice I have a padding toggle.
If I toggle that value on XD looks at the back-most layer in the group and calculates the distance from its outer edge to any of the content sitting on top of it and then determines the padding values.
If I zoom on in more tightly to take a closer look at the button notice here in the properties inspector I can actually click any one of the padding values and see it live there on the canvas.
Hitting the tab key will advance me to that next padding value there on the right hand side then the bottom and then up towards the left.
If I don't like the values that I'm seeing I can always change them by either typing in the value here in the properties inspector I can use the up and down arrow keys or holding the shift key actually change that value in increments of 10.
Another way I can change any of the individual padding values is to hold the tilde key down on my keyboard and as I hover over the object I can visually see that padding value and then press and drag to change it again visually on the canvas.
With that padding defined, now let's go ahead and zoom back out and take a look at each of the instances along with the master.
If I now come in and change the text once again let's say plan your visit notice that the button is resizing dynamically preserving that padding on the left and right. I can even come to one of the individual instances.
Let's say this button here towards the left and override it a bit more so plan your visit to Yosemite. Notice that the button continues to expand even though it's an instance and not the master.
With that set let's take this a bit further with this card design element here towards the left. I'm gonna delete the one on the right-hand side and let's come in a bit closer so I can see the details. I'll come in and select the overall component which is a group of objects that I've saved out as a component.
Here in the saved out as a component properties inspector I'm going to toggle on padding. I can see the values here towards the bottom. I can always change the padding values to be equal on all sides but this one actually has an interesting implementation.
Notice that the padding value is actually a negative value there towards the bottom. This actually works in my favour because my background image is inset a bit from these Avatar images I have above it.
I can always come in once again and holding down that tilde key come to that object and hover over until I get to that padding value and just press and drag to fine-tune it a bit so that it's centred right behind those avatars. If as I'm designing the group of objects I want to move something within it I get a really nice visual representation showing me how those objects will bump or move out the overall group.
And lastly if I hit escape and come back up to the root level of this component and press and drag the object the responsive resize feature continues to perform, but it now does it in context of the padding on each of the sides of that group set.
This is once again one of those wonderful features that you'll definitely want to experiment with as you apply it to your everyday workflow. I encourage you to give it a try.
Use two powerful Content-Aware Layout features designed to make your design process more efficient. Padding in Adobe XD enables the ability to define spacing between the contents of a group and the background layer, reducing the time spent ensuring buttons and other UI elements have consistent padding in each instance. Adobe XD's Responsive Resize makes resizing objects in Adobe XD simple and easy. With the drag of a mouse an element can be resized when Responsive Resize is enabled, allowing a design to be adapted to accomodate many different screens.
