6 Creative Ways to Use Repeat Grids in Adobe XD

  •  3 Comments

AdobeXD recently made a big splash during their announcement because of a few unique features, including the “Repeat Grid.” This magical button that turns any group of elements into a grid that repeats those objects.

That’s not the best part, though. Using repeat grids, you can easily populate text and images so each grid has unique content. This makes it an obvious tool to use when creating tables and lists. But some might wonder what other uses Repeat Grid might have in their design workflow.

Video Tutorial

Well, worry no more. Below are six creative ways to use Repeat Grids.

The Hamburger Menu

Because spacing is consistent with some elements within icons you can use the repeat grid to test the appropriate spacing fairly quickly.

More menu

More Menu

Similar to repeating rows for a hamburger menu, you can also use the repeat grid to repeat the circles in a “more” menu to quickly adjust the spacing to your liking.

Pop-out menu

5-Star Rating

One neat trick about using repeat grid for ratings is the power of cropping the last star to ½ (or quarter if you really want to be that detailed with ratings).

The Hamburger Menu

Lists

This is, perhaps, the most common use for repeat grids. You can easily select a bundle of objects and create a repeat grid to populate different images and text in a list.

5-star rating

Album or Product Sliders

Recreate new albums or artists in a slider using the repeat grid, which has the ability to populate album images on the fly.

Album or product sliders

Pop-out Menu

Instead of creating 10 different menu links that you’ll have to change 10 different times if you change your mind about font styles or objects, use the repeat grid. That way you’ll have the power to change your mind in the future (and make the changes instantly).

Lists

Conclusion

These are only a few examples of how Repeat Grids come in handy. The possibilities are endless with a tool like this. If you have any other examples of how you use repeat grids, we’d love to hear about them!

To learn more about Adobe XD, review my online course Learn Adobe XD which is on sale now for 80 percent off.

Newsletter

3 Comments
  1. Rajinder Singh Sep 21, 5:51 am

    I like your idea :-)

    The repeat grid is one of the best tools Adobe XD has to offer. Repeat Grid In Adobe XD powerful time-saving feature. We can create & adjust a Repeat Grid, content to it, and wire it up in Adobe XD’s simple and powerful Prototype Mode.

  2. André van Reenen Sep 28, 3:33 pm

    Nice feature.
    Hopefully more features are coming.
    It’s a great tool to show the navigation of an app or website.
    Still searching for a way to have a mobile menu which is functional on all screens.
    Also miss a way to add a sticky menu.

    • Caleb Kingston Oct 11, 8:23 pm

      I couldn’t agree more. Sticky menu is highly needed. Also, symbol overrides similar to figma and sketch would be very welcomed :)

Leave a Reply

*
* Minimum length: 20 characters