By Howard Pinsky
As designers, we're always looking for new ways to speed up our workflows. And when I saw Repeat Grids, I knew that this was going to be one of those features. If you spend any time designing repeated elements, such as photo galleries, contact lists, or menus, you’ll definitely want to check this out. Let’s take a look.
On this project, I may want to design out a gallery of all the lovely photos in this user’s library, including location information. I’ll start by drawing out a simple rectangle that we’ll use to house one of the photos and I’ll set the color to a medium grey, just so I know it’s a placeholder. Next, I’ll grab this location icon that I have saved as a symbol and place it towards the bottom of the box. Finally, I need some text for the location name. We’ll start with San Fransisco for this card – and I think for the font, I’ll go with a medium Avenir Next, with the color set to white.
Great, our first card is set up, but assuming I want anywhere from 12 to 16 on this screen, the process would be incredibly time consuming in the good old days. Now instead of manually duplicating this over and over again then editing each card, I’m going to use a Repeat Grid to save myself a ton of time and sanity. Either in the layer’s panel or by creating a selection on the canvas, I’ll go ahead and select all the layers that make up this card. Now to create the Repeat Grid, I can either use the Command or CTRL + R shortcut, or press the Repeat Grid button to the right.
You’ll now notice two handles – one on the right, and one at the bottom. These will allow me to repeat this entry horizontally, vertically, or both – and I can create as many as I need. In addition to the handles, the padding between the entries can easily be adjusted by hovering in between them and dragging on the pink area. I’ll have a few extend off the bottom of the screen to give the impression that the user can scroll. In fact, I can even pull down the artboard a touch so that scrolling is enabled when previewing this prototype. The blue viewport handle to the left lets me know what will be visible initially and what will be visible once scrolling begins.
Perfect – now the real fun begins. With the cards now set up, we need some content. Here’s a folder containing all the images I want included, and when using repeat grids, all of your images can be dragged directly into the grid, and it will populate the boxes automatically – no matter how many you’re working with, and if you don’t have enough images, they’ll repeat them until all boxes are filled. What’s just as neat, you can even do the same for text. Here I have a plain text document with a bunch of city names, and just like with the images, I can drag this file right onto any of the text layers, and Adobe XD does the rest.
You know, now that I’m looking at this design, I may want to make a few changes. For text layers, you can edit those one a one-off basis. Let me quickly change the name of this city so that it matches the photo. For layout changes, you thankfully don’t need to update each entry individually. Changing one, changes them all.
The same applies if you need to add in additional objects to your grid. Back in my assets panel, I have this symbol which I’d like to include. With any of the entries active, I can simply drag in an object and it will automatically add it to the entire grid – and when I reposition it, they all stay in sync.
And that’s a look at how you can use use Repeat Grids to drastically speed up your design workflows. Thanks for watching.
Avoid tedious workflows for repeating objects like galleries and lists using Repeat grid in Adobe XD. Simply select the object to repeat, enable Repeat Grid in the Property Inspector and drag it to the desired number of copied elements. All elements within the Repeat grid will stay in sync as changes are made, and then elements like text and imagery can be overrriden on each element.
