- Well hey everybody.
My name's Nathaniel Dodson from tutvid.com.
Welcome into the very first ever Adobe XD tutorial
that I'm doing on this channel,
and I thought there was no better way
to kick off the Adobe XD tutorials,
then to show you the feature that I was...
Well, it's the feature that I first noticed
when I first picked up and started playing with Adobe XD,
and as I was making this tutorial,
I really don't know how I've gone this long
without making an Adobe XD tutorial.
It's just one of those apps that's so simple
and beautiful and powerful and amazing
in so many different ways.
It's like dude, how have you not
made a video about this yet?
To which my answer is I don't know.
But now we're gonna rectify that.
And today we're gonna talk about the thing
that I noticed when I first picked up
and started playing with Adobe XD,
and that is the repeating grid.
It's amazing and powerful and wonderful
in so many different ways.
You just gotta see it.
Now, if you do enjoy this tutorial
make sure you subscribe to my channel
so you never miss another video tutorial in the future.
Let's jump into XD right now.
And well, it's gonna be a little bit of baptism by fire.
So let's go.
Well here we are in Adobe XD
for the first time ever on this channel.
I'm pumped.
This is the very first feature,
as I've said a number of times now.
The very first feature that I remember seeing
and hearing about in Adobe XD,
that got me really excited to start playing
with this application when it first came out.
It's something that's just a little different.
You can't do this in Photoshop or InDesign
or Illustrator as far as I know.
So let's kick this off her by opening up
the layers panel down here.
And I'm gonna select the team art board.
I've got this kind of beginner XD application.
Maybe I can share it.
I'll see if I can package this up,
and share it as a download link
that may be down in the bio of this video
if I can get it all sorted out.
But I'm gonna select the team art board here.
And then over in the properties panel,
I'm gonna tick on the grid, and I'm gonna set it
to 10 pixels per cell size just to keep things
kind of standard and normal here.
Next, I'm gonna use the ellipse tool over here,
and I'm gonna drag out a perfect circle
by holding down the shift key.
And I'm gonna keep an eye on my properties panel
because I want a 120 by 120 pixel circle here.
I will dump the border by unchecking the border option
over in the properties panel.
And then I'm gonna copy and paste
this circle onto my art board.
I'm gonna use the size option of my properties panel
to boost this second circle, the one we just copied
to 140 by 140 pixels.
I'm gonna get rid of the fill on this one,
and I'm gonna give this one a one pixel stroke.
The one pixel stroke, by the way, it's gonna be white.
And then lastly, I'm going to use the alignment tools
to just line these shapes up.
Align them horizontally and vertically with one another,
and I will select that outer stroke,
the white outer stroke that we just created.
And I'm gonna reduce its opacity to 20%,
again over in the properties panel.
The fill of the original ellipse,
it can be any color you want.
I'm just gonna leave it as this sort of default white here.
Next, I'm gonna grab the text tool,
and I'm gonna type out the words, Name Placeholder,
and then I'm gonna select this bit of text,
and look to the properties panel.
I'm gonna choose the font, SF pro text,
and I'm gonna 26 size with a semi bold weight,
and I'm gonna make sure I align this text
to the center over here.
And I'll also set the field of the text to a solid white.
Now, I'm gonna use the hot key command or control
plus apostrophe to shut off the grid temporarily,
just so I can drag this piece of type around.
And eventually I'll see the smart guide appear
that'll let me know I've aligned this text perfectly
to the exact center of my double circle.
Use these smart guides again and just drag the text down
until it sort of clicks to the bottom of the double circle.
Then go ahead and click command or control
plus the apostrophe key to turn the grid on again.
I'm gonna go grab some Ipsum from lipsum.com.
There's a bajillion and a half Ipsum
or Lipsum generators out there.
I'm just gonna copy some and come back here into XD.
And I'll drag out another text field,
and paste in a bit of the Ipsum that I just copied.
I'm gonna commit these changes
by hitting command plus the return key,
or on the Windows machine this will be control enter.
I'm gonna align this text to the center,
and make sure it's SF pro text font as well.
I'm gonna change the size to 20,
and I'm gonna set the weight to light.
I'll also reduce the opacity of this text to 50%,
so the text is still white,
but because it's set to 50% opacity,
it's just gonna appear a little more subtle.
Set the width of this text field to 340 pixels,
and then we'll just set the height to 80 pixels.
I'm gonna shut off the grid once more,
and I'm just gonna slide and adjust
to move the text until it aligns center
with the text above it as well as the smart guides
will give me the perfect spacing from the bottom
of the headline to the top of this
sort of tag line text as well.
It's a helpful little feature here in Adobe XD.
Next I'm gonna grab the line tool,
and I'm gonna start dragging a line downward
from three grid cells above the circle,
all the way through three grid cells
below the bottom of the text box here.
Now I'm gonna drag this line.
I wanna move it a little bit to the right
of these circles and the text fields.
I'm gonna make sure the line basically is 10 cells
to the right of the outer circle ring.
So if I count these little cells,
I can see that there's gonna be 10 of them
between the outer circle ring to this vertical stroke
that I just created.
Now I'm gonna make sure the stroke is set
to the color white and I'm just gonna reduce
the opacity of it to 20%.
Now the next step is gonna be a select
all these pieces of artwork that we just created,
and hit command or control G
to group all the stuff together
Now here's where the magic happens.
With this group selected, go ahead
and hit the repeat grid button in the properties panel,
and drag the fat node in the middle right,
all the way across your screen
until you see four of these bio packages if you will.
And drag the fat node on the bottom center
of this whole thing downward to get a second row.
Then find the pink vertical gutters.
If you hover over you'll see
the pink vertical gutters appear.
And increase the width of these
from the default 20 pixels to 30 pixels.
And then find the horizontal pink gutter,
and just drag it to reduce it down to zero.
You'll see, you'll get a little heads up display
that tells you how many pixels of width are there.
We want there to be zero on the horizontal.
Next, select this entire group,
this entire sort of repeat grid group,
and use the alignment tools over in the properties panel
to center this group horizontally and vertically
here within our art board.
And adjust the vertical alignment a little bit.
We can nudge the whole group up or down
until it looks just right.
Horizontally will be lined up nicely.
Vertically, you might need to make a little adjustments.
Now here's where things become magical all over again.
We can add our teams photos.
These eight white circles, we can add our teams photos
to these by just jumping out to the finder.
I've got eight photos of people here.
I can just drag them off of my hard drive,
and drop them on the first circle.
And XD is intelligent enough to know
that both, we want this circle
to automatically mask our image,
and also that each of the remaining photos
will go to a remaining circle in this sequence of groups.
It's really pretty cool.
But wait, there's another neat trick or two
that XD has up its sleeve for us as well.
We can take a dot TXT file.
Check this out.
I've got this dot TXT file.
It's got a bunch of names in it, each on its own line.
And I can drag this dot TXT file,
Plain text file, it's important that it's plain text,
and simply drop that file on
that name placeholder text field,
and it's gonna add the name
for each other these team members.
I also have a dot TXT file with some bio,
just random bio info from gridlover.net.
I just filled in some random information
for these team members and I can drop this
right onto the first text field for the bios,
and you can see each line of data is gonna go for one bio.
So just like that, we filled out eight bios.
Easier than you could ever imagine.
It really is quite remarkable.
So one simple drop of a dot TXT file onto that text field,
and you can watch your text flow
right through the entire document as well.
So satisfying and it absolutely never gets old.
So that's it for this one folks.
I hope you've learned something
a little new about Adobe XD.
Maybe you're ready to crack open Adobe XD
for the first time yourself, and if you do, woo!
I'm so excited for you.
You're gonna love it.
And you know I think I'm gonna start
to introduce a couple of these Adobe XD tutorials
every month here into the channel,
and satisfy my hunger pangs
for a little bit of web design, UI design.
We can have a lot of fun with this application.
There's a lot of really, really, really,
really, really cool stuff you can do with it.
And that was a lot of really's
that I just dropped there.
So for playing around with a simple UI interface
and the repeating grid and crazy stuff
with text files and images and what in the world.
Just the crazy power of the repeating grid all over again.
Guys for this one, that's it.
Get it, got it, good.
Nathaniel Dodson, tutvid.com.
I'll catch you in the next one.
And before you go, make sure you subscribe
to my channel for more great tutorials everyday.
Also, buy my course.
It helps us do what we do.
And this channel is supported by viewers just like you.
You can also just click the thumbnail
and watch another video from this channel.
See you next time guys.
(upbeat music)