By Howard Pinsky
Hey everyone, I'm Howard Pinsky. And in this video, we're going to be taking a look at how you can build out content cards for your social media application and how you can use Scroll Groups to add interactivity. Let's get to it.
All right, here we are back in Adobe XD with the profile that we created in the last video. I did make a few changes, but nothing too drastic. The most notable is this navigation at the top, which we're actually not going to be using right away. So I just threw it in there. Now, down here, I'm thinking we're going to have some content cards that will display the user, the name, photos, buttons and some text. So to help make sure everything is aligned, I'm going to go ahead and turn on my guides Command or Control+semicolon, then I can start building out some of the information, we'll go top to bottom.
I'm going to start with my Rectangle tool, shortcut key "R" and drag out the user profile right about here. And we have been using a lot of curvy lines in this project. So I'm going to go ahead and round out the corners just a little bit. And then, to keep consistency, I'm going to hop over to Finder where I have these great looking toy images. And let's go ahead and choose this one here, looks pretty fancy. Pop that directly into that square. Great. Now over to the right, we may want this person's name and maybe some secondary information. So grabbing the Text tool with the shortcut Key "T" I'm going to go ahead and type out Gaming Designer. This is probably a little bit too big. So I'm going to grab that handle in the center, bring that down to around... let's try 14. And I can also enter it in the Properties Inspector. I'm going to drop the weight just a little bit, to about semi-bold. I'm going to make sure to left justify it. Let's see what this looks like. I'm going to press the Play button at the top to take a quick peek. And I think that can work.
Now, right down below, we might want some secondary information. So I'm going to go ahead and hold down my Alt or Option key, drag down just like this, and maybe in this area here it can show people what this person is designing. And since this is secondary information, I definitely want to bring this down a little bit. Let's try 12, and I'm going to drop the weight to about regular. And I may even consider dropping the opacity as well. Not too much, 50% could work. It'll make sure to bring this up a touch. So it's a little bit closer. And then make sure both of these are centered with our profile photo.
Alright, so that is coming along. Pretty happy with how that's looking. Now, over to the right, just to fill out some of this space, we may want an icon to activate more information or a menu. And of course, you can simply grab an icon, but you can also use a Repeat Grid. So with my Ellipse tool, shortcut key "E," dragging out a small circle like that. Then I can go ahead and create a Repeat Grid or Command or Control "R," pull this out and bring this back on in. I think that's a little bit too large. So I'm going to zoom on in here. Grab one of these dots, make a little bit smaller, bring this back and then shift it on over. That's looking better. Now, I don't want this as a focal point. So I'm going to go ahead and just drop the color a little bit, or I can drop the opacity as well. And then make sure this is centered with all the other elements on this design. Perfect.
So now that this area at the top is done. I'm going to go ahead and select all this information, make sure to pop it into a group, and I'm going to call this User. Wonderful. Now, right below this user, we may want a nice large image of what this person is doing. So with the Rectangle tool, one more time, I'm going to start on the left guide, drag one out all the way over to the right, and I'm going to round out the corners quite a bit, so we have a nice, fun feel to this image.
Now, back over in Finder, I do have a nice gallery of images, very colorful photos that I grabbed from Adobe stock. I'm simply going to grab one of them and drag it directly into the shape. All right. Now right down below, we may want some icon so that users can interact... a thumbs up, a messages icon, share, and maybe even bookmarks. So for this we can hop into our Plugins panel like we did in the last video. I do have the Icons 4 Design plugin up and I'm going to start typing out thumb. And I'm thinking we're going to go with a line-based icon. So this one from FEATHER looks pretty good. I'll drag this in, I'll change up the border to white, and I'll go ahead and shrink this down. Now you're noticing as I'm shrinking this down, because it's a border-based icon, it's looking a little bit thick because the border remains consistent. So in that case, I could just drop this down to about 1 and pop it in place. Again, check out the Preview to see how things are looking. It might be a touch small. So I'll go ahead and increase it just a little bit and then bump the size of the border up to 1.5. All right, next icon, we'll go with a chat icon. And again, I'm looking for border-based icons, and so this one right here could work. We can also try message and this one actually looks a little bit better. Make that a bit smaller, so it matches the other one. Go ahead and change the color to white, 1.5 for the border to keep consistency. And there we go. I'm not too worried at this point about the alignment. I will get to that shortly. Next up, we're going to do a share icon. That one looks good. Make a little bit smaller, white, 1.5. Perfect. And then finally, over to the far right, we may want a bookmark icon.
And just like I did before, I can change the color to white, 1.5, and then I'm going to shift this one all the way over to the right-hand side. Now, in terms of alignment, there's a few things that we're going to be doing. First, we want to make sure that they're all aligned to the vertical center. So I'm going to go ahead and select all of them here, making sure not to select that background, and then right at the top where we have our Alignment and Distribution options, I'm going to start by hitting this icon here to align to the middle. Now, typically I would also hit this icon right here, which will distribute horizontally. But in this case, I don't necessarily want all of the icons to be distributed horizontally. I may only want the icons on the left. So to help with that, I'm going to go ahead and grab the share icon, move it to the location that I want. You're noticing, it's already helping me out in the process. But let's assume that it doesn't. I can go ahead and select all three of these icons, holding down Shift, and then press that same distribute horizontally button, and it'll line those ones for me now. I can select them all one more time, make sure to group them, and in my Layers panel, just name this Icons. Great.
Now next right below the icons, we may want to add a little bit of a description of what this user is showing in this photo. Now up here, we do have a text layer that we can probably use for this area. So I can go ahead and select this text layer here, copy it to my clipboard, hop down here and paste it. Now, it's not perfect. We definitely need to make some changes. The first change being, we have to left justify it. I'm going to move it over to the left guide and I'm also going to drag out this handle on the right, so that the auto height text box enlarges nicely as I'm typing. And taking a quick look, it's looking like that text at the bottom is looking a little bit large, so I'm going to go ahead and drop it just by about 2. And now I can dive into this layer and make changes to our description.
Alright, so now that all of our information is coming together really nicely, I'm going to make sure in the Layers panel, select all the layers, group them Command or Control+G and then call this Card. Now the final thing we're going to add, I'm going to move this up just a little bit, is a little bit of a break across this artboard to separate the various content cards that may be present. And for that, I'm going to grab my Rectangle tool, simply draw one out, right across this design. I can use my Eyedropper, using the shortcut key "I" to sample this background color. Then I'm going to add a very slight border. I'm going to set the border to white, and then drop the opacity quite a bit, and make sure the border is on the outside of the shape. Then, if I need to, I can always adjust the color as well. Let's make it a little bit darker, and then drop the border a little bit more. And if we take a quick look at the Preview, we can now see it almost looks like there's a nice separation down there.
All right, let's go ahead and put this back into place. One of the main topics of this particular video is scrolling, and I want to show you a few different ways you can set up scrolling on a design like this. So, we do have one card that we've created and we may want a few additional ones going down the artboard. And we may want some content going to the right. So starting off, going down the artboard, we can either use a Repeat Grid or we can use a Stack. Because we've been using Repeat Grids quite a bit, I am going to go ahead and use a Stack. So I'm going to make sure I have this card selected. I'm going to go ahead and pop this into a larger group, Command or Control+G, and call this Cards. And then over within my Properties Inspector to the right, I'm going to turn on the Stack option and make sure it's set to vertical. It defaults to horizontal because there's only one group inside of this larger group. So it doesn't know, at the moment, which way to define it. But you'll notice, if I dive into this group and add a stack to this card, it's defining it as vertical because it's noticing that the content is laid out top to bottom. Alright, so now that the Stack has been created on this larger group, we can dive in and select the individual group and duplicate, Command or Control+D, and it's going to pop a new one right down below. Now, if I were to go ahead and play this preview and try to scroll, nothing is going to happen because we have to set up scrolling. And there are two ways to set it up, in this case. The first way is, we can go ahead and select the entire artboard and then, right at the bottom, we can pull this handle down and this will reveal the viewport height over to the left. Anything above this is going to be visible immediately. Anything below will be visible upon scroll. So now, if I press the Play button, I can now scroll and see that additional content.
Now, I am noticing a few issues back here. This background container that we created. We're definitely going to have to bring this down quite a bit. And then on this Stack, I may just go ahead and increase the spacing in between items, just a little bit. So that's the first way you can create scrolling in Adobe XD. And in the case like this, that may work. But let me show you how Scroll Groups can give you a little bit more flexibility.
So again, we have our group containing two cards and we want to be able to scroll on this. The first thing you can do is, with the entire group selected, you can hit this icon right here, which is to set up a vertical scroll group. And this will give you two handles: one at the top and one at the bottom. And anything inside of these handles will be visible at all times. So if I go ahead and press the Play button, I can now scroll in this area. But what you're noticing is that everything else remains fixed. And in many cases, you may absolutely want that. But for this example, I think I might want all of this content to scroll. So, let me go ahead and undo this. Then, within the Layers panel, I want to make sure to select all of that content, so the cards, all the way down to our container. And then again, like I did before, I'm going to enable a vertical scroll group. And now, because the content extends all the way up here, I can go ahead and adjust the handle to push it on up. And now when I press Play one more time, I can scroll on down. Now we have run into those same issues that we did before, but that would be another quick fix.
Now finally, to wrap things up, inside of this Scroll Group, you may want to be able to give users the option to scroll to the right, so they can see additional photos. So diving in here, I have this one image selected, and I may want a few more extending off the artboard. So for this, we can go back to our Repeat Grid, Command or Control "R" and drag out additional photos going across.
Zoom on back over here and then, switching over to Finder really quickly, I'm going to grab, let's say this image here, and this one, and pop them directly into the grid. Now, just like we did a moment ago with the vertical Scroll Group, we can now set up a horizontal Scroll Group on this group of photos. And depending on whether or not you want some of that photo on the right to be peeking through, you can either leave the handle as-is or snap it over to the left here. And this one on the left, I'm going to definitely extend it outwards so that as I'm scrolling, I can see the photo kind of extending off the artboard. Now if I go ahead and press Play, I can not only scroll down the artboard, I can also scroll across using the scroll wheel on my mouse, my trackpad, or clicking and dragging.
And that's how you can build out content cards using Scroll Groups in Adobe XD. In the next video, we're going to be taking a look at using Repeat Grids to create a friends list. I'll see you all soon.
Learn how to build content cards for a social media application. Explore how to use Scroll Groups to add interactivity and display content that appears as the user scrolls. This tutorial describes how to use the Rectangle tool and Text tool to design a user profile card. You’ll see how to edit the content and apply text formatting in the Properties Inspector. Along the way, you’ll take a look at using a Repeat Grid to display data, how to add border-based icons using the Icons 4 Design plugin, and how to edit border widths to customize icons.
