By Howard Pinsky
Hey everyone, I'm Howard Pinsky. And in this Adobe XD video, we're going to take a look at using padding to create marketing banners that automatically resize as you rearrange and add in content. Let's get to it.
All right, here we are back in Adobe XD and we're going to start the process of creating our marketing banners using padding and Stacks. So starting off, we're going to grab the good old Rectangle tool and draw one out across this artboard and place it in the center of your document. To give it a little bit of style, I'm going to go ahead and round out the corners ever-so-slightly, somewhere around 16 pixels. You can do that by pulling on this handle on the inside of a rectangle or within the Properties Inspector. Now, on the inside of the shape, I may want a nice image for our banner. So I'm going to hop over to Finder or Explorer on Windows, grab this wonderful image of avocados I found on Adobe Stock and pop it directly into the shape.
Now what I'm thinking for this banner, is that the majority of the content is going to go on the left-hand side. So to avoid too much distraction, what I'm going to do is, within the Properties Inspector, I'm simply going to flip it horizontally. And now that that's done, let's go ahead and start adding in some content and stylizing our banner. And before we get to the text and the buttons, very quickly in the Properties Inspector, for the border of this banner, I'm going to go ahead and set it at white, bump up the size just a little bit, and maybe decrease the opacity of the border just so that it has a little bit of an edge. And the next thing I'm going to do -- and this is completely optional -- is add a little bit of a shadow. So I'm going to go ahead and bump it down on the y-axis. I'm going to blur it quite a bit, so it's nice and subtle, and then maybe we'll add a little bit of color. So I'm going to go ahead and choose a nice green in this area here. And bump it up in opacity, just a touch. So we have a nice subtle shadow against this nice green background.
Alright now, let's go ahead and add some content on the inside of this banner. I'm going to grab the Text tool shortcut key "T" and type out something like Very large avocados. Now, styling wise, I am digging this Museo typeface, but I definitely want this text a little bit larger. So I'm going to go ahead and increase it by pulling on that handle underneath. I do want it left aligned. And since this is the main header, 900 for the weight should work. 700 we can probably get away with, but I'm going to go ahead and stick with 900. Next up, we may want some sub information right below this header. So I'm going to duplicate this text layer down, holding down Alt or Option and dragging it. I'm going to bump down the size quite a bit, somewhere around 28, and then drop the weight as well. Let's try 700. Now we can go ahead and type out some information. All right, so there is a little bit of overlapping over here to the right. Now, there are two things we can do to help this. One: We can drop the size of the text a little bit and then... Two: We can also adjust the mask of the image in the background. So if I double-click on the shape, I'll be able to grab the handles and enlarge it and then shift it on over. Alright, the second text layer is complete. We will worry about the spacing in just a moment, but right underneath we might want some buttons. So with the Rectangle tool one more time, shortcut key "R" I'm going to drag out the first button, round out the corners completely, and turn off the border. And this is going to be the primary button. So it's going to be nice and bold. I'm going to grab the Text tool, shortcut key "T" and type out Call to action. This will just be placeholder for now. And since this is going to go on top of this button, we definitely don't want white text on a white background. So I'm going to grab the Eyedropper tool shortcut key "I" and click. I'm going to make this a little bit smaller, position it in the center of this button, and then maybe bump the weight back up to 900 and make sure that it's centered.
Now starting off our look into padding... we may want this button to automatically enlarge as our text has changed. So with the text layer and the button selected, I'm going to start by creating a component within the Properties Inspector to the right. Or you can go to your libraries and your document assets and create one right here as well. I'm going to go ahead and name this button and then, over within your Properties Inspector one more time, you can turn on padding, which is automatically going to define that padding based on the elements inside of it. So, if I did decide to change this text, I can dive in here, type out Hello and the background automatically resizes. So now that we have our first component and state in place, we may want to create one more for our secondary button. So over to the right within the Properties Inspector, go ahead and press the plus button and create a new state. This I'm going to call Secondary. And once that's been created and active, I'm going to dive in and make some changes.
The first change I'm going to turn off the fill, turn on the border, set the color to white, and then bump up the size. Next, I'm going to select that text layer and change that to white as well. And then I may want to change the label to say Secondary. So we now have our default state and we have our secondary state.
I'm going to go ahead and duplicate this button over to the right and then switch it over to our secondary state. And since these buttons will be anchored over to the left, I may want to dive into the main component and simply set the text align to left. That way, if I do decide to change the labels of any of these text layers, I won't have to reposition the button afterwards. Another thing we're able to do to help us design even faster, is set up a Stack with these buttons. So selecting both of these buttons at the bottom, I'm going to go ahead and place them into a group, Command or Control+G, and then within the Layers panel, I'm going to name this Buttons. And with that created, back within the Properties Inspector, I'm going to turn on a Stack, which is automatically going to define this as a horizontal Stack and there's currently 19 pixels in between each of these objects. I'm going to just bump this down to about 16, and this will allow me to dive into this group of buttons and simply shift them around, if necessary. We can also include this Stack inside of a larger Stack. So with this group selected, I'm going to also go ahead and select both of these text layers, Command or Control+G to place them into a group, and I'll call this Content. And one more time, I'm going to turn on a Stack within the Properties Inspector. And now, if I need to, I can always shift these elements around very easily. And if this changes in size, the buttons below will automatically move. And you'll see this more in action in just a moment.
All right, so we have some of our content now in place, but we may want a few additional elements to really bring this banner to life. And I'm thinking, over to the left-hand side of this banner, we may want a really nice looking graphic. So, over within my assets, I have this avocado loaded in, which I found on Adobe Stock. I'm going to grab that, drag it over, make it a little bit larger, and position it over to the left. And since I wanted to ever so slightly be hanging off the side of this banner, what I'm going to do is, select the banner and then drag it on over until it's slightly peeking off. Maybe I'll also drag this leaf in, make it a little bit smaller, just to give this design a little bit more depth.
All right, so we have our content now in place, but of course what we want to do now is set up this banner in such a way that, as we make changes, our design automatically adjusts. And very often, it's simply a matter of selecting all of these elements, popping them into a group, and enable padding. But since we have this avocado over to the left and we want this to adjust as well, we need to keep that in mind.
So, what we're going to do is, we're going to select this background container. And then we're also going to select the avocado to the left and the leaf at the top. And with all of those selected, we're going to pop them into a group, Command or Control+G. I'm going to call this Background and then make sure it's at the very back, behind all of our content. Now that's done, we're going to go ahead and select all the elements that make up this banner, pop all of that into a group, which I'm going to call Banner. And then within the Properties Inspector, we're going to enable Padding. And because we made sure to place this avocado into a group with the background layer, that has been taken into account for the padding. And if you need to adjust the padding, you can either do that directly within the Properties Inspector over to the right or by holding down your "S" key on the keyboard and dragging. And if you need to, you can still dive into the background group and adjust the sizing as necessary.
Now the big question is, what happens when we dive into the content group and start adding in new elements? So, if I grab my Rectangle tool, shortcut key "R" and drag one out at the top, you're noticing the banner below resizes beautifully. Now one thing you may want to do, especially if things are not resizing as you'd expect, is take a look at the various elements inside of the background group. By default, Responsive Resize is set to Auto. But if you go ahead and switch it over to manual, you'll have more control on how it resizes. So in this case, you'll want to make sure that Fixed Height and Fixed Width is not turned on. Then I'm going to make sure it's not anchored to the bottom. I'm now going to do the same thing for the avocado: switch it over to manual. And in this case, I may want it to stay the same size, Fixed Width, and Fixed Height. And fix the top and the left. Looks pretty good. So now, one more time, I can dive into our Content group, grab my Rectangle, draw one out, and the banner resizes exactly as I would expect. And of course, as you continue making tweaks to this design by adjusting size and spacing, everything else shifts nicely.
And as another example, here's another banner that I created a little bit earlier. And it's set it up basically the exact same way. Inside of this banner there's a background group which contains the buttons, the cupcake over to the left, the mask donut over to the right, an outline, and the background. And just like in the last example, if I grab my Rectangle and dive into this group with a Stack enabled, the banner resizes as I design.
And that's how you can use padding in Adobe XD to make your designing that much more flexible. In the next video, we're going to be adding some animated elements to an online dashboard. I'll see you all soon.
Create designs that resize as you rearrange grouped elements and add new content. In this tutorial, learn how to create a marketing banner using padding and Stacks. See how to draw a banner using the Rectangle tool, round its corners, and align it. Update attributes in the Properties Inspector to flip the banner horizontally, adjust color, width, opacity settings, and add a drop shadow to a border. Bring in Adobe Stock images to add beautiful graphics. Design buttons and add text with the Text tool, then apply styles. Learn two ways to create a new component in the Properties Inspector and in the Libraries panel. Use the Properties Inspector to create new states and enable padding. Then, experiment by editing button labels and using different alignment settings to see how Adobe XD preserves the spacing between elements. When you edit the grouped content in a Stack with padding enabled, the content resizes automatically as you work.
