Exploring Repeat Grid In Adobe XD

Image of six faces and names.

by Elaine Chao

posted on 11-17-2016

NOTE: This article was updated on January 31, 2017.

If you’re a visual designer, you probably spend a majority of your time making small adjustments to multiple visual elements. Maybe your client has decided they need a few more pixels of padding between each of your elements, or perhaps they’ve decided that all of their avatars needed to have rounded corners. Any which way, you might find yourself making the same adjustment in your design over and over… and over again.

In Adobe Experience Design CC (Beta), we’ve introduced the Repeat Grid feature to address this tedious aspect of a designer’s workflow. In this article, we’ll dig deep to uncover the true power of this time-saving feature. We’ll create and adjust a Repeat Grid, add content to it, and wire it up in Adobe XD’s simple and powerful Prototype Mode. If you’d like to follow along, you can download and test Adobe XD for free.

Creating And Adjusting A Repeat Grid

At its core, a Repeat Grid is a special type of group. Just like we group objects, we’ll create our Repeat Grid by selecting an object or a group of objects and convert them to a Repeat Grid. In this exercise, we’ll make a simple phone contact list with an image and a name.

Note that we do not need precision at this point, as we can adjust the elements later.

Step 2: Create And Resize Your Repeat Grid

Convert the selection to a Repeat Grid by clicking on the button in the Property Inspector or by using the shortcut key Cmd + R (Mac), or Ctrl + R (Windows).

Our group is now a Repeat Grid. You can see that it now has two handles, one on the right and one on the bottom, and the box around your group is a green, dotted line.

Example of a Repeat Grid.

You can create your Repeat Grid out of any items.

Click and drag the right handle to the right, expanding the Repeat Grid. To expand the Repeat Grid down, drag the bottom handle down.

We now have repeated elements in our Repeat Grid. All of the styles we apply to any object will be to all repeated versions of it.

Step 3: Adjust Any Elements Within Your Repeat Grid

Like any group, we can access the Repeat Grid’s component elements by double clicking into the group. Once we’ve made our changes, we can exit the edit context by pressing the Escape key. However, there are other ways to access the component elements. For instance, we can drill down into the element in the Layers panel on Mac (Cmd + Y) or by direct selecting it (Cmd + Click on Mac, Ctrl + Click on Windows).

Shows cells in the Repeat Grid.

When you make adjustments to the attributes of any objects, they apply to all cells in the Repeat Grid.

Step 4: Adjust The Row And Column Padding In Your Repeat Grid

Now that we have our Repeat Grid, we can begin to adjust the space between each row and column. By hovering over the gap between elements, we can activate the column and row indicators and change them to our liking.

You can convert any set of objects into a Repeat Grid. Those objects become a cell in the Repeat Grid. You can then edit the cell and adjust the gap between rows and columns.

Shows padding between cells.

You can easily adjust padding between cells by hovering over the gutters.

Now that we have the overall shape of our contacts list, we can populate it with content. The simplest way to populate is to change each element separately.

Step 1: Update Individual Text Elements

Step 2: Create An Image Fill Pattern

Shows text being added to the Repeat Grid.

You can create overrides with text and patterns with images in Repeat Grid.

Text works on the concept of overrides; we can override the content of a text object itself, but the styles remain applied to all repetitions of the object. However, we can build out the concept of repeated patterns with auto-masked objects, where the image fill of an object is repeated in a pattern that you define. For instance, if you dragged your third image into the third rectangle, you would have created a 3-photo pattern. Similarly, if you had dragged an image into the fifth rectangle, you would have created a 5-photo pattern.

However, that can get really tedious. Instead, what we’ll do is use content that we’ve prepared ahead of time.

Step 3: Drag a Return-Separated Text File to your Text Object

Now our object repeats based on the number of lines in our text file. If our text file has four lines, it’ll place a line per text object and repeat after placing the first four.

Step 4: Drag a Selection of Image Files into your Rectangle

Shows filling the grid with repeat items.

Similar to dragging images in one at a time, you’re creating a repeating pattern for your object’s fill. And, just like text, any change to the container is propagated to all of the repetitions of the object in the Repeat Grid.

Note that you can easily change the content of a Repeat Grid, either by changing an individual object or by dragging in data sources. Note that the data is imported and not linked, so any changes you make to the source file won’t affect the data you’ve already placed in your XD file. All of your styles and the size and shape of any container is reflected in all repetitions of an element.

Adding Content to a Repeat Grid

Now that we have a fairly fleshed out contacts list, we can continue our design process, iterating as we receive feedback from our colleagues and stakeholders. In this case, we might need to add elements after the fact. Repeat Grid makes this easy by allowing us to add elements to a cell.

In our example, we’ll add a horizontal line to separate the cells vertically.

Step 1: Draw While in Edit Context

We can draw any element or add text within the Repeat Grid’s edit context, even after you’ve created it. Since Repeat Grid automatically repeats every element, this allows us the flexibility to play with design in a new way.

We’ve just added a line, but now the cells are overlapping one another, leaving us with a visual mess. We’ll need to add vertical space between cells. When something like this happens, Repeat Grid recalculates the gutter between the row or column (from the bottom of one to the top of the next, or from the right of one to the left of the next) and sets it to a negative number if they overlap.

Step 2: Readjust Negative Padding

Shows how to add more padding.

Adding elements that expand the cell of the Repeat Grid may cause negative padding.

We’ve solved this problem, but what about adding artwork that we’ve already created? We can cut from one context and paste into another.

Step 3: Cut and Paste into the Repeat Grid’s Edit Context

Zeroes in on one item and shows how to make adjustments.

Sometimes, though, we’ll want to break apart the Repeat Grid; sometimes you just want independent objects after you’ve lined them up. In order to do this, we’ll ungroup the Repeat Grid and make our changes.

Step 4: Ungroup the Inner Repeat Grid and Edit as Necessary

Shows how to ungroup items.

If your image is an SVG, it’s imported as an editable path. You can use Repeat Grid to align and repeat, then adjust afterward by ungrouping it.

You can even add objects to the Repeat Grid after you create it, either by drawing or pasting into the edit context. If you have negative padding, you can adjust it easily by hovering over the overlap area. You can use Repeat Grid as an easy alignment tool between elements and decouple the repeated elements by ungrouping.

Prototyping from a Repeat Grid

Now that we have a Repeat Grid, we’re going to wire it to another artboard in Prototype Mode. Using Adobe XD, we can switch back and forth between Design and Prototype Modes quickly, which allows us to edit both the UI and interactions at the same time.

In this case, we’re just going to create a second artboard and wire from our Repeat Grid in three different scenarios.

Option 1: Wire the Entire Repeat Grid for a Single Interaction

Shows hot to preview the grid.

Wire from the entire Repeat Grid.

What we’ve done at this point is wire the entire object, including its padding, as a hit point for the interaction.

Option 2: Wire a Single Element of a Repeat Grid for an Interaction

Wire from a single element from within a Repeat Grid.

At this point, we have a single element, but what happens if we want to select the entire cell? We can create a group within the Repeat Grid in order to make this a valid hit point.

Option 3: Create a Group of Elements within the Repeat Grid and Create an Interaction from the Group

Shows an example of a wired group area.

Create a group inside the Repeat Grid and use that as your interaction target.

You can even create an interaction by setting the hit point to the entire Repeat Grid, an individual element from inside it, or a group created inside of it.

That’s It!

I hope that this brief tutorial has helped you explore the power of Repeat Grid. This simple and powerful feature has been quite popular in the beta version, and it’s evolving as we get more feedback from users. If you have an idea for improvements, please do share them in the comments section below.

Topics: Creative Inspiration & Trends, Design

Products: Creative Cloud