While designing for web or mobile apps, there is often a need to define repeating elements or content lists. However, it can be time consuming to create these elements or update when there are design changes.

The Repeat Grid feature in Adobe Experience Design CC (Beta) changes a group of elements to a repeating element. You can simply pull the element in any direction and the grid repeats. When you modify any style of an element, the change is replicated in all the elements of the grid. For example, if you change the image size in one of the elements, all images in the grid are resized automatically.

If you have a text element in the grid, only the style of the text element is replicated and not the content. So, you can style text elements quickly while keeping the content different in the grid elements.

You can replace placeholder text in a repeat grid by dragging a text file onto the grid.

  1. Design the base element that you want to repeat. For example, a combination of image thumbnails and text.

  2. Select the elements you want to repeat and click Repeat Grid in the Property Inspector.

    Large handles appear on the boundary of the element.

    Handles for repeating an element or a group of elements

  3. To repeat the element in a vertical grid, drag the handle at the bottom of the element. To repeat the element in a horizontal grid, drag the handle at the right of the element.

    Horizontal grid with repeating element

    Vertical grid with repeating elements

  4. To adjust the padding between two elements in the grid, hover over the gap between the elements. When the cursor changes to double arrows, drag to increase or decrease the padding.

    Adjusting padding between repeating elements

  5. To replace the images in the grid, open Finder, and navigate to the location where you have stored the images for your project. Select all the images that you want to appear in the grid, and drag-and-drop them onto the target object within the repeat grid.

    The older images are replaced with the new images, which are resized automatically.

  6. To select elements in a grid to edit, double-click the grid.

To ungroup the grid elements and work on them separately, select the grid and click Ungroup Grid in the Property Inspector.

Drag a text file on to a repeat grid

You can replace the placeholder text in a repeat grid by simply dragging a text file onto the grid.

  1. Format the text in your text file to add line breaks at the points where you want the text to flow into the next grid.

  2. Drag the text file on to the repeating grid.

    The repeat grid is populated in the same sequence of the text as in the text file. If there are more grids than the lines of text in the file, the sequence repeats.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy