This reading will help you more deeply explore some of the tools that will help you with the consistency of your overall website design.

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.

As shown in the video, to use the repeat grid feature, you first need to select all of the elements that you want to repeat in the Layers panel, on the left side of the screen. Then, with the group of elements you want to repeat selected, click the “Repeat grid” button in the Property Inspector on the right side of the screen, which is outlined in red in the image below.

Click and drag the green right handle to the right to expand the Repeat Grid. Or, to expand the Repeat Grid down, drag the green bottom handle down. More about repeat grids from Adobe blog.

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 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 to 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!

Check out video on how to add artwork and text content with repeat grids from Adobe XD.

Happy learning and good luck!