How to Use Guides and Grids in Adobe XD

Ethan Parry explains how to use guides and grids to create successful prototypes when designing UX interfaces using Adobe XD

As UX grows to play an even larger role in the way designers, developers, and businesses serve the needs of their users, the ability to easily iterate and test new solutions has become invaluable.

As a leading design software for UX interfaces, Adobe XD makes it easy and fast to prototype and test different UX designs. Beyond mastering its basic functions, understanding how to use the software’s guides and grids is crucial to creating prototypes that are effective, aesthetically pleasing, and consistent across the entire user experience.

Ethan Parry (@ethanparry), a service designer and UX research consultant, regularly uses Adobe XD in his own work. Here he explains the different functions of guides and grids, and how to use them to get the most out of your work.

Guides in Adobe XD

Guides are lines that you can superimpose on your artboard that help shape your design and plan where elements will fall. By defining certain guide layouts in your project, you’ll be able to create consistency between different screens.

1. To create a vertical guide, hover your pointer over the left edge of the artboard until it turns into two arrows. Then click and hold it, drag it to the desired position, and release. You can add as many as you’d like.

2. To create a horizontal guide, repeat the same steps but begin by hovering your pointer over the top edge of the arboard, clicking, holding, and dragging down.

3. If you’ve already added elements to your artboard, you can then adjust their positioning using the Select tool. As you drag design elements, like text boxes for example, to the edge of the lines, you’ll see that they snap to the guide.

4. There are a few ways to transfer guides to another artboard. If you copy and then paste your artboard, in addition to copying all your shapes and text it will also copy over all the guides. If you have a blank second artboard and only want to copy over the guides, simply select the artboard with the guides and in the upper menu go to View>Guides>Copy Guides. Then select the blank artboard and in the menu go to View>Guides>Paste Guides.

5. To lock guides so that they can’t be moved or adjusted, select the artboard and go to View>Guides>Lock All Guides. If you decide you’d like to change them later, you can unlock them by going to View>Guides>Unlock All Guides.

6. To delete guides, hover your pointer over a guide until you see the two arrows appear. If it’s a horizontal guide, drag it to the top of your artboard until you see a trash bin icon next to your pointer. For vertical guides, drag them to the left.

Grids in Adobe XD

To help you ensure that your designs are well laid out, Adobe XD provides you with two grid options: square grids and layout grids. Parry recommends the use of layout grids when you want to make sure that you’re defining the underlying structure of your design and to see how each component of it responds to different breakpoints, which is particularly important when designing for responsiveness.

1. To see these grids, select your artboard and go to the property inspector. At the bottom you’ll see the Grid selection, with a dropdown list with Layout and Square. If you select the box on the left of the dropdown menu, it will make the selected grid type visible. You can have both turned on simultaneously and switch between viewing each, if desired. Besides the dropdown menu, another way of controlling which grid is visible is by going to View in the upper menu navigation.

2. Once a grid is visible, its properties will appear in the property inspector. For Layout, that will be information such as the number of columns, gutter width, column width, and margins, all of which you can adjust. For the Square, it will be the square size.

If you want to learn more about how to use Adobe XD to design and prototype UX designs, check out Ethan Parry’s online course, Introduction to Adobe XD.

You may also be interested in:

- Adobe Photoshop for Web Design, a course by Arturo Servín
- Introduction to Adobe XD for Cell Phone Apps, a course by Arturo Servín
- UX Fundamental Principles, a course by Strike Heredia