Hidden features for Adobe XD Repeat Grid

Hey there, in this video we're going to use Repeat Grids to do easy repeats, but we're also going to do some fun stuff. Can you see, it repeats with separate images and different bits of text, all automatically, that is pretty cool. Let's go and learn how to do that now in Adobe XD. 

First thing is, don't be surprised by this page. I made it in between videos. If you're following with the tutorial, you'd go, "Where did this page come from?" I just made it now because I want you to click on this option and be able to go to some settings in the app. So the first thing I want to do is build my Courses page. I'm going to 'Command 0' to see the whole thing. Zoom it a little bit, and I'm going to start with this option here. You'll just notice some weird bits of text left over from another page, so I'm going to 'Command L' to unlock them, or 'Control L' on a PC. What I might do is start clicking on it, just to tuck it up a little bit. It's a little bit too long. I'll grab this one, copy and paste him. Move it along so it's the same distance as all its buddies. And this is not going to be the Dashboard now. This is going to be the Courses page. And now it doesn't need the word Page in there. So I've got Courses because what I want to do is get the navigation to come along for both left and right, which is Symbols. 

So what I want to do is adjust bits and pieces. So I want you to disappear. We turn to turn our columns back on. So I'm going to go to Layers panel. Find these 12 guys, and go 'Command ;' but I'll turn them back on so I can see them. They're actually a funny color now, so I'm going to unlock them and just make them a darker color so I can see them for the moment. Lock them again, 'Command L', or 'Control L' on a PC. What I want to do is build out my Courses page. So this is now going to say 'Courses'. And I want to go and throw in-- So this menu, I've decided, straddles three columns, so I'm going to make sure I don't use those three. I'm going to put an image in for two of them in my 12-column grid. Then I'm going to have a text box that goes for about five. I'm just kind of guessing now, looking at my printed out Wireframe next to me. And I'm going to put in some place holder text. This is going to be one of the secret awesome things I'll show you in a second. 

So I'm going to go back to Assets, and pick the Style that I've been using. Now I'm working at 75, so it's just too zoomed out. So I'm going to go 'Command 1' to make sure I'm at 100%, or 'Control 1' on a PC. That's just looking too big now. I want to leave it, because I don't want to actually do 1 1/2 columns, they'll be fine but we have the room so we're going to use it. So, this is going to be my text, it's left aligned, it's going to go in there. I'm going to add a little checklist button so I'm going to borrow him from my buttons from my symbols, ungroup them. Decide on this fellow. And this one here is going to actually-- it's going to be too small if it's only one column. So I'll get him to be one and a bit. This one's going to say 'Checklist' So big part of this thing here is 'Checklist for Courses', so you can know where you're up to. 

So I'm going to use this little checklist button. So in my Wireframes, I've already kind of mostly done that. So I'm going to grab these two guys, double click it to get inside, grab all three of these, holding 'Shift' to set them all. Copy, move him across, paste him. Get them into this spot that I want. I'm going to turn off my columns now by selecting them all because now they're just in the way. That's 'Command ;', or 'Control ;' on a PC. You're sick of me saying that, right? You know what it is on a PC, and you know what it is on a Mac. I got to keep saying it though. 

So all my borders are going to be green. Tick box, I'm going to double click it, get inside of it to make that green as well. And my little thrash can can stay gray. So what makes this super awesome and super hidden? So the first option, you may or may not have seen already. So I'm going to select them all, and go to 'Repeat Grid'. This is that super magic thing that happens, I love it. So it just means it's really easy to go and generate lots of these options. So how many do I need? I'll just do this many for the moment. One of the secret super-duper awesome hidden feature is, if I grab some images-- so inside my Course images, inside your 'Exercise Files', 'Images', 'Course Images', I can grab all of these - I've got loads of them, way too many than I need. All 16, and just drag them into that first icon. And they go and populate. That's one super cool awesome option. 

The other thing is that you can do it with text as well. So here is my place holder text. Now I've got a text file in my exercise files. There it is there. This needs to be a plain old txt file. No special word for that, just Notepad on a PC or Text Editor on a Mac. And just save it as a .txt file, and just have them all on separate lines. And what you can do is just drag that the same way we did this. So drag that into this bit of text here, and, magic potion, look at that. Goes and fills them all, and through that list. I love those secret features. Other little things that aren't so secret. If I have this grid selected, you can adjust the spacing between them and you can eventually ungroup them which will break this kind of nice little Repetitive Grid, but it will mean that you can edit them individually. At the moment, lot of things are kind of tied together. If I move this Type, it all moves. 

Couple of things I want to finish up before I move on. You can skip on now if you like. I'm going to go to this to one that says 'Add Course', so it need to be an 'Add Course' button. And move him across. You, and you. Don't need that. What I might do is, that button there is looking like they're looking too similar, the same size. You need to kind of overcook one so that they feel like different sizes. And then I'm not happy with what I've done there so I'm probably going to have a little play with that. A little bit later. And I want this bin to be lining up with this edge here. You can see, if you adjust one, they all adjust. How am I getting in there to adjust them? Just double click them to go inside the Repeat Grid. Select both of these guys, tack them across, they all come along. Love you, Repeat Grid. 

One thing I forgot. I've got this Courses page, but I just realized I don't have actually have it as an option in my Navigation, so you go to the Dashboard, and you're like "How am I going to add a course?" There is no options to do, you can either use this. So I need to add this. So what we're going to do is, we're going to-- I've turned this earlier into a symbol. If you haven't, you have to go through and just manually adjust the two pages. So what I'm going to do though, is I'll double click to go inside. You end up with this kind of green bar. I'm inside my Symbol now. What it means is that I can select all of these guys holding 'Shift', and clicking them all. Actually I didn't want this first guy first. So I'm going to double click it to go inside, grab this first guy I'm going to hold 'Alt', or 'Option' on a Mac. So I've got this extra one here called 'Courses'. Why can't I swipe Courses today? I'm not sure. And I'm going to 'Shift' click all of these guys. I don't want to move them down. 

So now I've got this extra option. What you'll notice is if we click that, this guy didn't update. So what we need to do, we need to click on him. Right click him, and say, update all symbols. And magically, he updates over here as well. And now he's kind of handy when you only have two but when you've started repeating this thing over and over again, like our logo at the top here, it's going to be a little bit more of a time saver. So I'm going to do the same thing here. I've got a logo that I want to bring in. Where is he? He is down here. Can't find him. Zoom my app, there's a PNG that I'm using. Copy him, and I want to go up here. 

Page navigation, it is a bit of a pain in XD at the moment. Hopefully they'll come up with a nice method to fix that. So I'm going to put him just there for bit of a second. Actually I'm going to cut him, double click to go inside of it. I'm going to paste it, so now he's part of that. And as long as I still got that green liner on the outside I'm working within the symbol. So actually I'll just line him up there, delete you. Move him up. Same thing as before, if it hasn't gone and updated you can right click it, and say, update all symbols. In my case, it already has. Nice! I'm over them. Great! So you can see here, as we're developing the logo for this business we can go and adjust, because we used symbols earlier on. All right, I'm scrolling around fast for no reason. That is going to be the end of this video. Let's get into the next one.