Welcome back everyone to another Adobe XD tutorial. In my example, we want to align page elements like text and images using a grid layout.
First, you need to figure out how many columns you want and what the gutters and margins are. My math does stink, so we used a website called Grid Calculator. There is a video for this, so you can go and watch that and come back to learn more. Instead, we are going to go ahead and use what we have here.
I admit, we sometimes forget to apply the grid layout. In other applications or software, one could enter the number of columns and gutters, and it automatically applies it. With Adobe XD, it’s a couple more steps, and I tend to forget all about it. Speaking from experience, I have a general idea of where things are placed with columns as I use the standard 12 columns for most of my designs.
12 is the most easily divisible among reasonably small numbers; it’s possible to have 12, 6, 4, 3, 2 or 1 evenly spaced columns. This gives designers tremendous flexibility over a layout. While the 12-column grid is a popular choice among many designers, it’s not a one-size-fits-all solution.
There are two ways to view your grid layout:
- In the main menu, click View, then scroll down to ‘Show Layout Grid’. The grid layout is displayed by default.
- Second, choose the artboard in the artboard panel on the left-hand side, or by selecting the name of the artboard. Click on the grid layout check box on the right-side control settings to turn it on and it will appear in blue..
The gutter is the space between the columns, and I want it to be an even number, so 20 pixels will do. For a 12-column grid, I would want 140 pixels for each column, 20 pixels for the gutter, and 10 pixels for the left and right margins. However, Adobe XD does play hard to get in this area.
Now that I’ve entered a column width, you’ll see nothing but blue overlapping. And my gutter width got changed to zero. Of course, this isn’t what we want. Therefore, we need to change the margins. There are two little icons one will show left and right margins, and the other will include the top and bottom and left and right margins too or better known as ‘different margins for each side.’
Changing the margin under the column width, which is the left and right margin, is the easiest method. When you forget which margins you are on, it highlights the square icon in blue. Change the number to 10 pixels and the gutter to 20 pixels.
Adobe XD may change these numbers for some strange reason. Have no doubt, the grid layout in Adobe XD requires a little tweaking with the numbers to make it work.
You might need to change the icon to ‘different margins for each side.’ This will allow you to enter margins manually.
I want my top and bottom margins to be the same, along with the left and right margins.
From the top of the margin, these four inputs move clockwise. A first number represents the top margin, a second number represents right margins, a third number represents bottom margins, and a fourth number represents left margins. Whenever you enter a number, it highlights the square icon in blue, which is helpful if you forget.
Zero is my first number for the top margin, and number 10 is my second number for the right margins. My third number is the bottom margin will be zero, and the last number is my left margin which is 10. Eventually, you should get the same numbers as the Grid Calculator.
You’ll want to take time to learn the keyboard shortcuts too. It is easy to hide and show these grid layouts. To toggle between show and hide the column grids, press Command Shift ‘ for the Mac and likely Control Shift ‘ for the PC. Comment below if the PC keyboard shortcut is incorrect! Or you can also turn these grid layouts off by clicking off the check box on the right here or going to the main menu, View and turning off the grid layout (hide the frid layout).
So, those were a few tips on how to use the grid layouts in Adobe XD. If you found this helpful, give it a like and subscribe for more.