Adobe XD Repeat Grid: Building a Card List Without Copy-Paste Drift
Adobe XD's Repeat Grid turns one card design into a synchronized list: per-cell text and image overrides, bulk image fill by dragging a folder, and layout edits that propagate to every cell.
06 Jul 2025, 21:33 UTC

If you're mocking up a list of cards in Adobe XD, the fastest reliable method is Repeat Grid: design one cell, select it, click Repeat Grid, and drag the green handles to duplicate it into rows or columns. You get per-cell content overrides (different text and images in each card) while layout, spacing, and styling stay synchronized. That's the whole value proposition — you edit the pattern once, and every instance follows.
How the mechanism works
Select any element or group and click the Repeat Grid button in the Property Inspector (or press Cmd/Ctrl+R). Two green handles appear on the right and bottom edges of the selection. Drag them outward and XD tiles the group into a grid. Hovering between cells reveals pink gutter guides you can drag to adjust spacing uniformly.
The key behavior to understand is the split between synchronized and overridable properties. Geometry, internal padding, fonts, colors, and layer structure are synchronized: change them in one cell and all cells update. Text content and image fills are overridable per cell: type different names into each card and XD keeps those overrides intact even as you restyle the shared layout.
A worked example: a six-row contact card
Build one card as a group containing three layers: a rectangle (the avatar placeholder), a title text layer, and a subtitle text layer. Select the group, press Cmd/Ctrl+R, and drag the bottom handle down until you have six rows. Drag the gutter guide between rows to set, say, 16 px of vertical spacing.
Now fill it with content:
- Click into each title layer and type a different name. XD treats these as overrides and won't clobber them later.
- Select a folder of six images in your OS file browser and drag them onto one of the avatar rectangles. XD distributes one image per cell automatically — this bulk image fill is one of Repeat Grid's most useful shortcuts.
- Move the title layer a few pixels down inside one cell. Watch the same shift apply to all six rows. That propagation is what saves you from the copy-paste drift that plagues manually duplicated groups.
To verify it's working as expected, edit one cell's text and confirm the other five keep their own text, then nudge an element's position in one cell and confirm all six move together. If text changes propagate too, you've edited the layer style rather than the content — undo and retype into the specific cell.
Limits you should know before committing
Repeat Grids produce uniform rows and columns only. Every cell is the same size, so masonry layouts, variable-height lists, or a "featured" first card that's larger than the rest can't be expressed directly. For those, either ungroup and hand-adjust (losing sync), or use Stacks with padding for the variable parts.
Repeat Grids also cannot be nested inside other Repeat Grids. If your design needs a grid of cards that each contain a repeated tag list, build the inner repetition with a Stack or manual duplicates. Try nesting one in a test file and you'll see XD blocks it — knowing this upfront saves a restructure later.
Finally, Repeat Grid is a layout-time feature with no data binding. The repeated content is static placeholder data; nothing connects to an API, JSON file, or CMS. It's a design-canvas convenience, not a prototyping data model.
Common mistakes
The most damaging one is ungrouping the grid (right-click > Ungroup Grid) to fix a single awkward cell. That converts everything to independent copies and permanently breaks synchronization — from then on, every spacing tweak is manual again. Instead, use a per-cell content override, or restructure the source group so the layout itself accommodates the variation.
Other frequent missteps:
- Editing before grouping. If you enable Repeat Grid on loose layers instead of a group, each layer repeats independently. Always group the card first.
- Expecting text edits to propagate. Only styling propagates; content is an override by design. If you want identical text everywhere, edit it before duplicating or accept that you'll change each cell.
- Fighting the uniformity. If you find yourself overriding most cells' layout, Repeat Grid is the wrong tool for that section — switch to Components with overrides or Stacks.
A note on tooling longevity
Adobe XD has been in maintenance mode with reduced investment since Adobe's attempted Figma acquisition, so teams starting new projects should confirm its support status before standardizing on it. Menu names and exact behaviors also vary between XD versions and platforms, so verify the steps above against your installed build — the five-minute test file described earlier (group, repeat, override text, drag images in) will confirm everything this article claims.
0 replies
A thoughtful contribution can make all the difference. Be the first to share one.