Use repeat grids to design in Adobe XD

Congratulations! You’re well on your way to creating mockups for a responsive website. In the last two videos, Dave demonstrated how to create mockups for a website home page in Adobe XD. This reading will help you more deeply explore some of the tools and resources that were mentioned in the videos.

Use repeat grids

Repeat grids are a great way to improve the appearance of your designs, as well as make your design process faster and easier. Repeat grids replicate selected elements both horizontally and vertically. For example, you might want to replicate shapes, text, or graphics in your website mockups using a repeat grid.

Check out Create repeating elements in the Adobe XD User Guide and this article by XDGuru to learn more about using repeat grids.

Import photos

Using repeat grids makes it easy to import photos into your designs! Use blank rectangles in a repeat grid to represent the parts of the design where you’d like to insert an image. Think of the rectangles in a repeat grid as multiple photo frames that are waiting for pictures to be inserted.

You can drag and drop a collection of photos from your computer into Adobe XD, on top of a repeat grid. The photos will automatically populate each of the rectangles in the repeat grid. This makes adding a bunch of images to your mockups really quick and uniform.

Import text files

You can also use repeat grids to import text files into your designs. Text files are a computer file that is structured as a sequence of lines of electronic text. In other words, text files don’t have any formatting and can adapt into most text-based programs, like a repeat grid in Adobe XD.

To create text files on Macbooks, there’s a pre-installed program called Text Edit. To create text files on Windows devices, there’s a text file app called Notepad. Or, to create text files on Chromebooks, users have access to the Google Docs application from the launcher.

You can use blank text boxes in a repeat grid to represent the parts of the design where you’d like to insert text. Just like with images, you can easily drag and drop text files over the repeat grid to populate each text box. Pretty easy!

Sources: Google UX Design Professional Certificate

Coursera | Responsive Web Design in Adobe XD