By Howard Pinsky
Hey everyone, I'm Howard Pinsky. In my latest Adobe XD series we're going to take a look at building up various elements for your web and desktop experiences -- starting today with a pricing table. Let's get to it.
All right. Here we are in Adobe XD and we are going to get going creating our pricing table. I'm going to start off with the good old Rectangle tool, shortcut key R and drag out a box across my document like this. With that in place, I'm thinking we might want nice rounded corners on this rectangle. So I'm going to go ahead and grab one of these handles and round it on in, somewhere around 24 pixels. Next up, I'm feeling quite colourful today. So in the Fill Picker, I'm going to go ahead and choose a nice vibrant pink for this first pricing table, somewhere right around there. And now that we've gone ahead and set up our container, we can start adding in some content. And the first thing we're going to be adding right at the top, is a header. And this will help to tell users what tier they're looking at. So, with the rectangle, one more time, I'm going to go ahead and drag out a box right about here. And then round out the corners completely.
Now, inside of this box, we may want the title for this particular tier. So with the Text tool, shortcut Key T, I'm going to type out: Second Tier. And this one we're designing right now is going to be the tier in the middle. So there will be one on the left and one on the right as well. Now for the text properties, I'm thinking we're going to go for something pretty simple. Sofia Pro should do. And since this is the header, I'm going to go ahead and bold it, make the text size a little bit larger and then we may want to bring in the pink that we're using for the container. So with the Eyedropper tool, shortcut key I, I'm simply going to click. And then, since I will be using this pink throughout several elements, what I'm going to do is, I'm going to also hop into my assets right down here at the bottom and just make sure to add that colour. I can also add the character style, if I choose, as well.
Now, to keep things organised, I'm going to make sure in my Layers panel to group both of these elements. I'm going to call this: Tier. Next and this may only apply for this particular tier, over to the right, I may want one additional badge that lets users know that this is the most popular tier. So again, with the good old rectangle, I'm going to draw one out right in this area here. And just like I did with the first container, I'm going to round out the corners completely. This one is going to be placed behind this badge. And in terms of the styling, we don't want this one to stand out too much. So I'm going to go ahead and set the colour to a pure black and then drop the opacity, just so that it's there, but it's also not completely there... if that makes any sense. And then inside this container, we're going to go ahead and grab the Text tool one more time and type out: Most Popular. I'm going to change the colour to white. Since this is secondary information, I'm going to bring down the size and I may bring down the weight just a touch as well, to around semi-bold. And then make sure that everything fits nicely. All right. I'm gonna go ahead and group these two elements, call this: Popular. And then make sure again it's behind that badge. It may also make sense to group these two elements as well, so I'll just go ahead and place this Popular group into the Tier group. Then it can centre this inside of this container. Perfect. Now, of course, as you're designing, if you feel that some elements are a little bit too large, you can simply go ahead and shrink this down a touch, so that things look pretty nice. Great. Now, below this tier header, we may want some additional text to let others know exactly what they're getting with this tier. So with the Text tool, one more time, instead of a simple click, I'm going to click and drag to define an auto-height text box. And I already have some text on my clipboard. So I'm simply going to paste it into place. And the styling doesn't look too bad right now. But if you need to, you can always go ahead and make this larger or smaller. But, I'm going to stick with around 16 pixels and then just shift this down just a little bit. And as we continue building out this pricing table, we can definitely go back and adjust it.
Next up, in this area here, we may want to display what the benefits are of this particular tier. Both the benefits that they will be getting and the benefits that they will not be getting. So, starting off with the included benefits, I'm going to grab the Ellipse tool, shortcut key E, drag out an ellipse, holding down my Shift key to constrain it to a perfect circle. And this one is going to be filled in. So I'm not going to be worried about the border and the fill is going to be set to a white. But on the inside, we may want to add a check mark. And for that, you can bring in an icon if you want to... or you can activate your grid with Command or Control+Apostrophe. And then, grabbing the Pen tool, shortcut key P, I'm going to simply create a check mark. Now, for the styling, I'm going to use the Eyedropper one more time to sample one of these pinks. Or, back within the assets, I can right-click and apply as border as well. I'm going to thicken it up just a little bit. You can also round up the caps and round out the joints as well. Make it smaller and then pop it into place. It's always a good idea to launch the preview at the top, just to see how things are looking at a more zoomed out view. And there's definitely a little bit of a spacing issue. We'll deal with that in a moment. But the check mark looks a little bit too thick. I'm going to bump it down to about 3 pixels. Now, finally, over to the right of this check mark, we want one more text layer. I'm going to go ahead and click and just type out some placeholder text for now. All right.
Now, since we will be putting this particular text layer into a Repeat Grid, what we'll likely want to do is make sure that the width is defined. So within the Properties Inspector, right now, it's set to auto-width. We're going to go ahead and switch this over to auto-height and just drag this text layer over to the right. That will just give us some extra breathing room so when we do put this into a Repeat Grid, we won't get cut off. So we have our text layer in place and we also have our check mark, which I'm going to go ahead and group and call this Checked. And what we want to do is select both of these layers and then at the top right-hand corner of the Properties Inspector, go ahead and press the Repeat Grid button. And this will allow you to drag out additional benefits going down your artboard. So, we'll go ahead and drag out about four of them. And then, if you need to, you can always hover in between any of them and adjust the spacing. Let's go for about 16 pixels and take a quick peek at how that's looking. Again, might be some spacing issues and possibly some sizing issues but we'll deal with that in just a moment. And of course, the beauty of using a Repeat Grid is, if you need to make the text larger, you can always dive in here and make the text larger. It's going to populate to all the other cells.
So now that we've gone ahead and defined the included benefits, we can now define the benefits you will not be getting. So I'm gonna go ahead and duplicate this Repeat Grid down this artboard, change the name in the Layers panel to Not Checked and now I can dive in and make changes. So I'm going to double-click into this Repeat Grid. And for this one, we don't want the check mark to be seen. So, I'm going to simply select it and then turn it off in the Layers panel. Now, for the ellipse, we really want to make it clear, that this is not a benefit you're going to be getting. So within the Properties Inspector, I'm going to set the border colour to a pure white and then the fill is set to a pure black and then drop the opacity, very similar to what we did with that badge at the top. And then finally, to emphasise this a little bit more, I'm going to select this text layer and then drop the opacity and then possibly even drop the weight as well. Medium, regular, either of those should work.
Now, currently the text layer inside of this Repeat Grid says Benefit you will be getting. But of course, we want to update this to make sure that users know, they will not be getting this benefit. Now you're going to notice that, because text layers inside of Repeat Grid are made to be overridden, it doesn't push those changes to the other ones. Now, hopefully, in your design, you're putting actual copy in these cells. But if you want to make sure that this text layer repeats, simply go ahead and duplicate it and then delete the previous one. Alright.
So at this point, we've gone ahead and defined the benefits you will be getting, the benefits you won't be getting, which... let's go ahead and drag this up, so there's only about two of them. We have our description and we have our header. But, of course, one of the most important things in a pricing table is one: the pricing and two: a button to choose this particular tier. So, starting off with the pricing, I'm going to grab the Text tool, one more time and type out $13.99 per month. Now for this text layer, I really want to emphasise the $13.99 part. So I'm going to start by making the entire text layer quite a bit larger, then I'm going to double-click into it and select just the $13.99. We're going to go ahead and set this to bold. Then, if we go ahead and select these/month, will keep that at regular, but we're going to drop the size quite a bit, somewhere around 18. And then finally, the last thing we want to add is the button at the bottom. So what the rectangle, one more time, I'm going to drag one out. I'll round out the corners just a little bit, somewhere around 8. And then with the Text tool, one more time, we're going to go ahead and type out: Choose. Now for this one, because we're dealing with a call to action, we're going to set this at bold. I'm also going to make sure to sample this colour in the background or again, you can use a colour in your libraries. And I'm going to make sure to place this in the centre.
Now in future videos in this series, we are going to be taking a look at using components, but if you did want to, you can always go ahead and select both of these and hit the plus button beside Components inside of the Properties Inspector. And this will allow you to not only use this button over and over again, but you'll also be able to create several states. Again, we're going to get more into that, later in this series.
So at this point, almost all the elements that we need on this pricing table are in place. And if we go ahead and press the Play button... it's looking okay. Certainly not great. Let's go ahead and fine tune this a little bit one. I may want to put a very simple separator right down here at the bottom. So with the Line tool, shortcut key L, I'm going to drag one out, I'll set the colour to white and then drop the opacity quite a bit. And you can certainly experiment with white borders or dark borders. Both of them will give you pretty acceptable results. You can also round at the caps, if you want to give a little bit of style. Next back of the top, I just want to make sure that our spacing looks pretty good. So, I'm going to go ahead and move this up a little bit. Might want to make this just a touch larger. Push this up as well. Move both of these benefits down a touch. And then maybe make our button just a little bit longer. And, just to make sure that the padding around all of our elements are about equal, I'm going to go ahead and select all the elements that make up this particular tier, pop them into a group and call this: Second Tier. And then, within the Properties Inspector, I'm going to turn on padding which is automatically going to define that padding based on the elements inside of it. And right now we have about 40 pixels at the top but 54 pixels at the bottom. So I'm going to go ahead and change that to 40 and this one to 38, so it's even. And one more time, hitting the Play button. Things are looking a little bit better. I think the text layer with the pricing at the bottom is still a little bit too small. So I'll go ahead and make that touch larger and move it on up. Alright.
So the first table or I guess in this case, the Second Tier, is complete. And now we can go ahead and use this to create the first and the third. So, duplicating this over to the right by holding down Alt or Option and dragging, I can now dive in here and make some changes, So, I'm going to double-click into here. I'm going to start by hiding the Popular badge. And I want to change this text layer to say: First Tier. Now, right now, these two elements are not grouped together. So very quickly, I'm going to go ahead and group these and call this: First. And then, within the Properties Inspector, I can turn on padding, just like I did with the Tier. And now if I double-click into this and I change this to First, the background is automatically going to resize. Down here, for the benefits, I'm going to go ahead and drag this Repeat Grid back. So we have about two benefits showing. Drag this one up. And then drag this down. Then I'll go ahead and change this text layer. Make sure it's centred and change this to $9.99 per month. Now, one more thing we may want to change for these various tiers, is the background colour. So instead of this vibrant pink, we may want to shift this over to more of a purple colour. And just so that everything matches, for some of these elements, we may want to dive in and sample the colour so everything looks consistent. All right. That one's looking pretty good. I'm going to go ahead and change the Layer Name inside of the Layers panel. And then finally, we can duplicate this one over to the right, one more time. And just like we did with the first and second tier, we can dive in here change this to Third. Adjust our benefits by pulling on the Repeat Grid. We'll move this one down. Add some more benefits right here. Change this text layer to $19.99 per month. And then finally, we'll change the background colour to a nice vibrant blue for this particular tier.
All right, so all three of our tiers are in place. The final thing we may want to do, just for marketing purposes, is to lay these tiers out. So I'm going to select the first tier and the third tier, then make sure inside of the Layers panel, they are behind the second tier. And then I'm going to go ahead and slightly position them behind the second tier, so I can use Responsive Resize to pull them in, just a touch and move them on down. And, of course, from here, you can add drop shadows, 3D transforms or whatever else you see fit.
And that's how you can build out a pricing table using Adobe XD. In the next video, we're going to be designing out a sign-up form using components. I'll see you all soon.
Learn how to build a pricing table that displays the costs and benefits of product tiers. Use the Rectangle tool to draw backgrounds and design three different pricing screens, then round the rectangle's corners and set attributes in the Properties Inspector. Add and format text that lists the names, prices and benefits of each tier. Learn best practices like grouping sets of elements together, nesting groups inside groups and saving colours and character styles as assets for reuse. Rearrange layers in the Layers panel to control which items appear above others on the design canvas.
