Using the repeat grid in Adobe XD

Hey there, welcome to the best video in this whole course. It's about the Repeat Grid. I love the Repeat Grid, it's got a lame name, it should have a super exciting name, but it doesn't. What it does is, you draw something once, and it repeats on forever. Look at that. Same with these, we're going to make this 'Course List', and it shrinks and contracts, it just keeps adding more and more forever. So good. I love it! Let's go learn how to do it now in this video. 

So we're going to be using the Repeat Grid on our dashboard here. So we're going to draw out a box for our-- I've got the rectangle tool. Grabbed the rectangle tool and I'm going to draw out a box roughly about that sort of size. So we're going to have kind of like three stacked across. And I'm going to add a bit of dummy text. I'll type in 'Stats'. I'll use my Character Style. I might actually use the 16 for this one. So it's going to have 'Stats' and there's going to be a number in the middle. What kind of number? I'm not sure yet. So probably '$' sign to start with. I'll put in 3000. This is going to have things like the monthly recurring revenue, how many visitors on the site, how many sales this month versus last month? All sorts of dashboard stats. So I'm just going to put this in. Trying not to design it, trying not to. So just some basics. 

There needs to be a little bit of explanation text at the bottom thing. I think I'll steal it from the Home Page. This will just describe what's going on in this particular Tile. All right, there we go. Paste, yes, that looks beautiful, it's going to go in the middle. They all go in the middle, let's do that. It's even, select them all, and do it properly, Dan. So we've got our Tile, actually there needs to be like a little 'See More' button. So we're going to add a little '+' probably in this top corner here. So you can kind of click. Not sure if it should be the three little dots or the Nav Sandwich. Not sure. We'll decide in user testing. 

So I've got my Tile, I'm going to select all of these parts. And this is the magical button here, 'Repeat Grid'. It should be called something more amazing, the amazing button or something. So click on this, and look what happens. Magic! Just kind of duplicates it, which is cool, but it's even more, look at that. I'm not sure how many of these we're going to actually have, so I'll do these many. So the things that you can do to do adjustments is, you can obviously see these pink things appearing between the lines. I can drag those out to expand them, or contract them. You can go in negatives. They're actually looking okay, the way that they were before. So I'm going to leave it like that. So the Repeat Grid will obviously duplicate them or I can grab the Type tool, and it can actually make these quite unique. 

This one might be 50K, so it might be to do with the numbers. Now you can adjust, see I can adjust the numbers. I'm going to actually make that centered. So I'm going to grab that and make them all centered. But if I start physically moving them, they're all connected. So it's kind of best of both worlds. I get to go through and actually put in different kinds of data just to kind of represent the different things, and I have full control over, like if I want to actually delete the '+' button, I just delete off one and they all delete, if I add one, if I decide that I actually want to add a little thing to this guy, you'll notice that they all get it. Repeat Grid is awesome. We'll leave that there. 

I want to show you one last amazing piece of feature for the Repeat Grid, is that you can work with images as well. So what I'm going to do is I'm going to build our Courses page, which is the next page on this list. And actually what I'm going to do is, I'm going to speed it up because it is nothing new. I'll just make a new page, and build out the first element. So let's speed through this. Tayla, take it away, speed it up, I'll see you when we're done. 

So here we are on our kind of Course page. I am going to select everything. I'm going to go to Repeat Grid, and just like we did with the Trainer thing-- I'm still amazed by this every time I use it. It's amazing. So let's say we've got these many courses. The image thing I was referring to now is probably my most exciting thing to show anyone. I am actually in our Exercise Files, I'm in Images. And I've found all our course images, I've selected them all. The easiest way is to be able to see, find a window or if you're on PC, have the window open and just drag it in from there into any of these blue squares. Ready for the magic? Oh my goodness, that is magic. I am super excited by that. Goes through and just replicates them all the way through. Yes, I love it. Repeat Grid, it's XD's magic weapon. And it means that I can still have a better control. I can select on here, and I can find my grids here. I can open and close these. 

Say I want these kind of banded together, or maybe a little bit apart. I've got a little bit of adjustment, and say, this check list here I need to go and change this to the black, or the gray. Easy to go and update. Now can you do text? Yes, you can. So in your example file, you just need a text file. Like this one here, it's got a bunch of names in there. You just got to make sure it's either a .txt, or rtf file. Just something really basic. Nothing that has any formating like Word, or a PDF. Just plain old text document. You need to just click, hold, and drag the actual document itself across one of the tiles. And, bingo. How cool is that? 

So I love the Repeat Grid. I couldn't leave it later in the course. Especially these images, because, aah, just too special. But for this actual Wireframe, we're getting too detailed so I'm going to have to go through and undo to get rid of all these images. And go back to where it was just plain old Jane. I should probably go and move this here and just put in 'Sample Course'. All right, so that is it for Repeat Grids, I love them but you are probably sick of me going on about them. Let's go on to more of the awesomeness in XD in another video.