Designing for screens often requires creating repetitive elements, like grids of product shots or price guides. Manually generating these kinds of assets can be very labor intensive.
XD can speed up our workflow by simplifying these repetitive tasks that are in almost every project.
Repeat grid
The Repeat Grid allows you to quickly generate grids based on a single group of objects.
To create a Repeat Grid, select a group of assets on an Artboard and select the Repeat Grid button at the top of the Property inspector. The assets will be grouped together and highlighted with a green border and show handles on the right and bottom edge. Drag the left handle to repeat the element horizontally, drag the bottom handle to repeat the element vertically.
You can adjust the padding of the elements by hovering over the Repeat Grid gutters and dragging the spacing to the perfect pixel.
You can update images in a Repeat Grid just by dragging new image files into the picture boxes. If you have a full set of images, you can drag all of the files to the repeat grid and it will update every repeat element.
To update text in repeat grid elements, you can simply type the new copy into each text field. If you have a file of the copy ahead of time, you can use this to speed things up. Save your copy as a text file with the extension .txt and separate content with carriage returns.
Padding
XD allows you to assign content-aware padding to groups of objects. You can make elements that change responsively based on the content you add to them. For example, you can make buttons and menus that adapt and stretch based on the amount of letters included in a label.
Create a group from a rectangle at the bottom, and text at top. In the properties panel, switch on the padding property and alter the padding value for all sides or each side independently.
Stacks
Stacks allow you to create predefined spaces for objects in a group. When you apply stack to a group, you can rearrange and modify the order of the the object and the spaces and padding around the object will remain consistent.
This makes refinement and revision to work more streamlined and efficient.
Responsive layout
Making your designs suit multiple devices and screen sizes is important. XD has a feature that allows you to responsively alter the scale of groups on and artboard. This is helpful for altering content and layout for a new screen size. By default responsive artboard resize is set to off. You can switch it on in the properties panel and responsively adjust the artboard size.
When you alter the artboard size, objects will scale and move depending on pinning setting that XD suggests. These auto settings and based on an objects original position within an artboard. These are usually pretty good, but can be altered manually if adjustments are required.
