By Howard Pinsky
Hey everyone, I'm Howard Pinsky. And in this video, we're going to be taking a look at using Repeat Grids to build out a friends list for your social media application. Let's get to it.
Alright, here we are back in Adobe XD. And over to the left, we have the profile and the cards that we created in the last two videos. Now, over to the right, on this artboard here, we're going to be working on a friends list using Repeat Grids. So let's go ahead and zoom on in, and we are going to get going. Now, I'm thinking for this list to have nice large content areas that shows a good amount of information about each user. So starting off with the Rectangle tool, shortcut key R, I'm going to go ahead and drag one out across this entire artboard -- making sure things snap nicely into place. And then to keep consistency with the rest of the design, I'm going to go ahead and slightly round out the corners. Let's try 16 pixels for now. We can definitely bump that up a little bit later if we need to. Now for the styling of this container... it's sitting on a very dark background, so we likely don't want pure white. So I'm going to go ahead and jump into the fill and drop this down to a nice grey and then really experiment with the border. Again, I always like to set it at a white and then just drop the opacity like that. Make it a little bit darker, bump this up a touch. And we now have our background shape. Now, this is not going to be a focal point. So I want this background to be there, but also not be there. So now that this is in place, we can start adding in our content.
Now, over to the left. I may want a nice large user profile. So I'm gonna go ahead and select this background container, duplicate it, Command or Control+D and then bring it on in just a little bit on the side. And I can hover my mouse over the left-hand side with my Alt or Option key held down to see how far it is. So I can go ahead and bring it back 2 pixels and then from the top and bottom, holding down Alt or Option, one more time. Another thing you can do is, if you hold down your Command or Control key, you can use your Arrow keys on your keyboard to resize by 1 pixel. So if I bring it in from the bottom by 2 pixels and then move it down, one we should have eight pixels all the way around. And then finally, I'm going to go ahead and bring this one in quite a bit.
Now, what you're likely noticing is that, even though the corner radius is identical on both of these shapes, it's looking a little bit off. So what you're going to have to do is select the innermost shape and reduce the radius. Let's try 8 pixels for this one. It looks like a little bit too much. I'm going to bring it in just a touch more, until visually, they look like they match. Great. Now we're going to be using a Repeat Grid to bring in many images at once, but just to fill the shape in just a little bit, I'm going to hop over to Finder, grab an image and pop it into place. All right.
Now, over to the right, we may want this person's name or username. So with the Text tool, shortcut key T, I'm going to type out Deanne. 14 looks pretty good for the sides, but I am going to bump it up to about semi-bold and see what that looks like. And like I mentioned in the last few videos, whenever you're designing zoomed in, it's always a good idea to just hit the Preview button or zoom out to get a better perspective on how things are looking. And now that I'm looking at it from a zoomed out perspective, I'm thinking I'm going to bump it up by about 2. All right now, down below, we may want a description of who Deanne is, so I'm gonna go ahead and grab my Text tool one more time, drag one out. I do have some placeholder text copied to my clipboard, so I'm going to simply paste it. And for this, 16 is definitely too large. So I'm going to drop this down. Let's try 12 and then bring the weight down to about regular. Not too bad. I do want to decrease the line height just a little bit. So I'm going to bring down that. So it's a little bit squishier. And that should work.
Now we will be working on spacing and alignment in just a few moments. But right down below, we may want two buttons, maybe one to challenge this user and one to message. So with the Rectangle, shortcut key R, going to drag one out right about to this area here and then round out the corners completely. And for the colour of this button, I really want it to stand out. So let's go ahead and choose a nice reddish pink right about there. And then on the centre, we're going to go ahead and grab our Text tool and just type out the word Challenge. And since this will be a primary call to action, I'm going to bump this up to about semi-bold, make sure it's centred and then pop it in the middle of our button. Great.
Now, in this particular design, I'm not too worried about the button automatically resizing as I change the label. But since I may be using it across this project, I definitely want to turn it into a component. So I'm going to go ahead and press the plus button over to the right. And this will also allow me to create additional states. So let's go ahead and create one more new state and it's going to be the Outline state. And for this one, I'm simply going to dive in here, turn off the fill, set a nice white border, bump up the size by 1 and then in the centre, type out Message. And now we have two states. We have our Default state and our Outline state. So I can go ahead and duplicate another button, over to the right. Switch over to the Outline state. And I'm now good to go. So if any changes need to be made to the styling of these buttons, I can always dive into the main component, make changes and it pushes everywhere else.
So we have a lot of information on this particular card. But what we want to do now is start grouping some of this so that we can use a Stack. And what I'm thinking is, if more information is added, this profile should grow with the container in the background. So I'm going to go ahead and select the profile image, select the background as well and pop these into a group which I'll call Container. I'm also going to go ahead and rename this to be Challenge and this one over here to Message. Great.
Now in the Layers panel, I can go ahead and select all of these items, Command or Control+G to pop them into a group and I'll name this Friend. Next, as we've done in past videos. I'm going to go ahead and press the Stack button within the Properties Inspector. It's going to automatically define it as a vertical stack. And what's really nice is that it went ahead and grouped these buttons for me. And on this group, which I'm going to name Buttons, I can go ahead and add another Stack which we're going to define it as horizontal. So I can dive in and move these around if I need to, or I can grab the overall group and shift these around as well. But what's really cool is, because I put this profile photo inside of group with the background container, if more information is added to this area here, it should automatically expand. So let's try that out.
Right about here, I may want a progress indicator. So let me go ahead and grab my Rectangle, shortcut key R and drag one out. And you're noticing as I'm doing this, the profile photo is indeed getting larger... so I'll drag one out all the way to about here. I'm going to go ahead and round out the corners completely, turn off the border, set this colour to a nice dark colour, so it kind of blends in with that background. And I also want to make sure that there's enough of spacing right down below. So right over here in the Properties Inspector, I can just increase this here or I can do this directly on canvas by hovering in between any of the layers. Now, on top of this bar, I may want an additional bar that shows how much progress this user has made. Now what you're going to notice is, if I simply hit Command or Control+D, it's going to add that layer right down below. And that's how Stacks works. So in the case that you don't want an additional layer going below this layer, what you'll want to do is make sure this layer here is placed into a group, Command or Control+G. And I'm going to call this Progress. And now if I dive into this group, because the Stack is not enabled, I can safely duplicate. And I haven't got that issue. Now for this one, I'm going to go ahead and bring it on in, just like that. And then maybe sample this red colour right here. Great.
Now, of course, there's a lot of other information you can put on here, including a little circle and some text above it. But for now, we're going to leave it as this. So we have our first Friends card created and ready to go for our Repeat Grid. And before I do that, I do want to make sure that the padding is nicely set up on this card. So I'm going to go ahead and just increase it a little bit down below. That looks pretty good, right there. All right. So now, with the card selected, we're gonna go ahead and press the Repeat Grid button right here at the top. And because we want this going vertically down the artboard, I'm going to grab this handle and drag it on down. The spacing does look pretty good. But if I need to, I can always adjust by hovering and pulling.
Now, the final thing we need to do is add some additional content, so hopping back over to Finder, I'm going to start by grabbing a few images here, just completely random and bringing them directly into the grid. And then for the text layers, you can either dive in and make changes manually or you can utilise a plain text document. So back in Finder for a second. I have, over here, a list of first names and I can drag this text document directly onto a text layer. It's going to automatically fill it in. The final thing I want to touch on is how to tackle elements like this progress bar. You're going to notice if I dive in here, select the progress bar and then make it longer, it's also making it longer in all the other cards. And that's by design. That's how Repeat Grids work. However, if you utilise a component, you can get around that. So I can either turn just this pink bar into a component or the entire progress group, Command or Control+K. And now what you're going to notice, if I dive into this grid here, make it larger. The other ones are not affected, so I can go through and make manual overrides to these particular progress bars, because they are now components. And just like we did in the last video, we can go ahead and either enable scrolling on this entire artboard or by adding a vertical scroll group over to the right. Press Play. And we now have our completed friends list.
And that's how you can build out a friends list using Repeat Grids and Adobe XD. In the next video, we're going to be designing and prototyping an emoji picker using nested components. I'll see you all soon.
Build a friends list for a social media app prototype using Repeat Grids. In this tutorial you’ll learn how to use the Rectangle tool and Text tool to add shapes and text to your designs and you'll get helpful design tips for styling the elements. Experiment with using groups, components and Stacks to set up consistent padding, while applying unique changes to component instances. Create components with multiple states. See how to define horizontal vs. vertical Repeat Grids. Drag images and text files directly onto Repeat Grids to quickly populate and display a repeating list.
