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 am 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.
Or 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
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
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,
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 again.
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 Apostrophe (') for the Mac
and likely Control Shift Apostrophe (') 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
and turning off the grid layout.
So, there you go,
so, those were a few tips on how to use the grid layouts
in Adobe XD.
I hope you found this tutorial helpful.
Like this video, if you enjoyed it and subscribed to the channel,
and hit that notifications bell to get the next hot tip!
I will see you next time!