How to Use the Repeat Grid Tool in Adobe XD

In this tutorial, we’re going to learn how to use the repeat grid tool in Adobe Experience Design CC (Adobe XD).

The Steps (1-9)

1. Create a new document by selecting iPhone 6 from the Start Screen.

2. Select the Rectangle Tool and draw a landscape-orientated rectangle in the upper part of your screen, and give this shape a fill colour of your choice.

3. With the Rectangle Tool still selected, hold Shift to draw a square, and again, give this shape a fill colour of your choice.

4. Select the Text Tool, click anywhere on the artboard, and start typing some title text.

5. Duplicate this layer by going to Edit > Duplicate, move this under your title text, reduce the size, and insert some text of your choosing.

6. Repeat Step 4 and type your CTA (call-to-action) text here. For example, it might say ‘Read More’. Make this text prominent in order to grab your users’ attention, and position this under the text created in Step 5.

7. With your mouse, drag over all of the elements created in Steps 2-6, and then click the Repeat Grid button in the Property Inspector on the right-hand side.

8. Notice the green border that appears around your content? Select the bottom slider and drag this down to repeat your content so that it fills the screen.

9. When using the Repeat Grid Tool, Adobe XD automatically creates a gutter (spacing) in between the different objects that are being repeated. By selecting and clicking inside this space (the gap in between objects) you will see some pink guides appear, that allow you to adjust the gutter spacing. For this tutorial, reduce the spacing here to around 10-30 pixels.

Download Adobe Experience Design CC (Adobe XD).