7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Working With the Repeat Grid

It’s time to learn something quite special, and a real time-saver for UI designers: the repeat grid. This is a unique feature to Adobe XD; I haven’t seen it being implemented in any other software or design applications. So let’s jump right in and see what we can do with it.

3.5 Working With the Repeat Grid

Welcome back to the course. In this lesson you'll learn about the repeat grid. This is a unique feature to XD in the sense that I haven't seen it being implemented in any other software of this nature. So let's jump right in and see what we can do with it. Let's assume that we need to build, like a gallery, okay, so I'm gonna just quickly, I'll apply some styles here and I'm gonna create like a card element here. Maybe round off the corners a little bit and, you know, maybe add a little bit of a shadow. And then let's go ahead and import one of these pictures. And let's create another rectangle. That goes on the bottom side, and I'm gonna round off the the bottom corners as well. So this is top left, top right. I'm gonna do 13 here, 13 here, and I'm gonna do a background blur. Something like that. And I'm gonna remove the border. So in here, let's actually decrease the brightness a little bit, okay? And in here, I'm gonna add a piece of text that says the city. It doesn't really matter how big this is. Maybe get that a little bit smaller. All right, so that should do it. Let's go ahead and select, whoops, select all of this. Control G to group it. Let's make this art board a little bit bigger. There we go. And you know what, let's actually center this. Okay, so now let's say I wanna repeat this and create like a grid. Well, I can Ctrl or Cmd+C and then Ctrl or Cmd V to copy and paste it. I'm going to set it at the correct distance and then I can do Ctrl D to duplicate it. Ctrl D and so on and so forth. But the problem is right now if I want to change the distance between these elements, well, I got to do it manually. I got to change this and then I got to change this and this and this and so on. Well, a much easier way to make this happen is to use a repeat grid. So the way it works is very simple. You will select an element, click repeat grid or Ctrl or Command R and then you use these handles to define how big your grid should be. Mine should stop right about here and I can go this way as well. Now the beautiful part about this grid is that I can always change the distance between the grid items simultaneously. And notice I have a little indicator here on the top that's telling me the exact amount. In my case, let's go to like 90, it's fine and I can do this vertically but also horizontally. If I want no distance I can just bring it down to zero. But in my case, I'm gonna keep it something like this. And then, once you're happy with the changes, right. Let's do this a little bit. Once you're happy with the changes, you can hit ungroup grid and that changes from the repeat grid to just a regular list of groups. That is just fantastic. Let me just get rid of that line there. Okay. Now the cool part about this is that if I want to change these images all at once, I can simply go in, select a bunch of my images and drag them in, but for that the repeat grid still needs to be there. Okay, so with the repeat grid selected, I can select my images And I can bring them in and now I have five images and so the AI here inside XD, distributed my images, each one in each instance. Let's actually just to collapse this to a single row, and I can do the same for the text, instead of going in there individually and changing the text. Here's what I can do, I can create a new text file. So let me do that right now. I'm gonna to call this list dot txt and inside, I can say something like this, the city, and let's actually draw some inspiration from the images themselves. Well, I think that's a Harley and make sure you separate these each row with an enter. Food, nice car and vacation. Okay, so here's my list and what I can do now is grab this file, drag it in and see that when I hover, let me actually zoom in here a little bit. When I hover over the repeal grid, the text gets highlighted so I'm gonna drop it in. So now all of my items are changing. Here's the city, here's Harley, food. Nice car, vacation, doesn't really matter that they're out of order. Now you can go back into your text document and you can, Reorder them here. So Harley would be first, then it would be Food. Then it would be nice car, vacation and then the city. So now do the same thing lists and now they're in the correct order. Harley, food, nice car, vacation and the city. And now if you're happy with the changes, you can go ahead and ungroup the grid, but usually I just leave it on because it allows me to make further changes to it without much hassle. All right, and that's how we can work with repeat grids. A very handy feature if you ask me and definitely a time saver. Now, in the next lesson, we're gonna learn how to create responsive layouts in XD using a feature called responsive resize. So I'll see you there.

Back to the top