Hey there, if you want to follow along exactly with this video...
there are some exercise files that you can download.
There is a link in the description, they're free to download.
The other thing you might do is--
this is a free video from my larger User Experience Design course.
If you enjoy the video, and like my teaching style...
you might want to check out the full course...
there'll be a link in the description as well.
All right, on to the video.
Hi there, welcome to the video...
all about Type in XD, actually just getting the basics right.
Now if you are an Adobe nerd, and you were like...
"Man, what am I going to learn from this type of video?"...
stick around, XD has some quirky text things...
plus we throw in some tricks and tips for distributing and duplicating.
It's worth your time, hang about, let's get started.
To get started, grab the capital 'T tool'.
I'm going to zoom in a little bit, I'll use my shortcut 'Command 1'.
Command 1's really good when you're dealing with Type.
So it's 'Ctrl 1' on a PC, that gets you to 100%.
Remember, it's just better to be dealing with that...
when you're dealing with text.
You're seeing the actual size that your audience is going to see...
when you're making decisions on how big it is and how small it is.
So grab the capital 'T', and it's two Type boxes.
If you click once you get what's called a Point Text Box.
And this is good for headings.
And it goes on and on forever.
That's just the way it is.
The other type box, if I go back to my black arrow...
to kind of deselect out of that...
and then go back to my Type Tool, and if I click, hold, and drag...
I get what's called an Area Text Box.
The difference between this is, when I mash it, see what happens.
It's got a fixed width, so headings, body copy, navigation, body copy.
You only use this for a body copy.
Things that have like multiple paragraphs...
and, I don't know, Lorem Ipsum, that type of stuff.
You can convert each of them, I could say, black arrow...
I could say you, I want to be an Area Type Box now.
That there's a little icon for point text, that's the one for area text.
So you click on this.
It kind of changes a little bit over here...
but watch what happens, if I double click to get inside...
I can start typing, and you can see it has a fixed width.
The weird thing about it though is...
the actual height of that box is just that blue dotted line.
Look what happens when I go back to my black arrow...
because there's all this other text; what happens to it?
Just kind of disappears, I move it down so you can see it...
but it just gets kind of lost underneath this.
So that's what this little blue dot...
in the middle of those white circles mean to indicate.
If I drag it down, any of these icons...
I drag it down, you can see there he is there.
So if you end up with a box like this, you make it too small...
that little blue dot appears.
It's not as important, it's called Overset text...
in something like InDesign, it's not super important...
when you're doing a mock-up, it might be though.
So keep an eye at the little blue dot.
So you can convert one to the other, Point text, Area text.
A couple of things.
We're going to move in now and start kind of fixing up our navigation.
Now when you are working in wireframes don't be picking fonts.
I'm just going to leave it as Arial.
You leave it as something really simple, it's not a time to be picking fonts.
We'll do proper fonts a little bit later in the course...
when we start doing high fidelity, we'll look at it a little bit more.
The real basics though before we move on is I've got this box selected...
you can see over here...
I'm not going to go through everything, I am actually, because it's real quick.
Left align, Center, Right align, you've got Underline.
This is the space between letters.
So I put up to 20, it's going to open up--
let's put it up to something really high, 200.
Space between letters, that's the space between lines, put it up to 50.
And this is the space after the paragraph.
So if I go into here and I put a return in between these two...
and I open it up, so I put a return in there, there's no spacing...
but if I go, actually I like spacing when there's a return...
you can see, not between the lines but after...
there's a return, that's where I put our little enter in.
A couple other things to show you about text...
a little quickie an XD.
I'm going to delete that stuff, and what I want to do is...
I don't want to use this, this is an XD logo.
I'm just going to delete it, I'm going to put in the company name.
Don't be tempted to put in the logo here.
It's really hard as a designer to not start putting in the logo...
but then you start using the brand colors, and then the fonts...
and then wireframe is not a wireframe anymore.
It's like a half baked high-res version.
So just stick to the actual text.
So uppercase is kind of a nice way to remove...
any kind of design from it, just keep it all very standard.
The other thing I'm going to do here is...
I'm going to circle the text and make it white...
so it can be seen at least across this.
The other thing is font size, remember I'm at 100%.
Remember, 'Command 1' on a Mac, 'Ctrl 1' on a PC.
So I'm picking the right size, and it's quite big, right?
A real common body copy size for wireframes is 16 pixels.
So I just clicked it over here and hit 16 and hit return.
So often I'll just have 16 everywhere.
Maybe the headings will be a slightly bigger size...
to indicate kind of what are headings and what or not.
The other thing to do, on the black arrow, can you see this little white dot here?
When you're in Point text, pretty much-- most of the text that I'm doing here...
except for big chunks of body copy are going to be this Point text...
see this little dot here, does a couple of things, it's kind of weird.
If you click, hold, and drag it down it's a great way of adjusting the size.
This one here doesn't have a drop down or a slider...
so you have to keep typing it in there.
So you just like it a little bit big, little bit small, just drag that.
The other weird thing it does is...
you can see there, if I'm right over the top of it...
it's up and down, if I come out just a little bit...
so not quite on the circle but just outside anywhere here...
click, hold, and drag it, it's rotating.
Now you can see it over here, there's my rotation...
and it's up to you but I'd stay away from rotating text.
It's quite hard to do in an app and coding a website, weirdly.
It can be done but, yeah...
your developer might hate you if you start rotating text...
and he's going to go, try and make a consistent rotated text.
You have to have a real good justification for that pain.
Anyway, so we've got our text here, a couple of things, I want to--
like this here, what is this? Is it set to 10 point?
Mine is a little bit small for what I need.
So I'm going to click it, delete it, goodbye guys.
I'm going to duplicate this across, you can copy and paste it.
If you select something, and go 'Edit', 'Copy', and then 'Edit', 'Paste'...
it just ends up over the top of it, so you can see they're just there.
So what I find is a little easier is, with the black arrow, so click--
before you start dragging, so I'm going to drag it over here.
Hold down the 'Option' key on a Mac or 'Alt' key on a PC.
You can see, just kind of, while you're dragging, makes a copy.
I find that quite useful.
So I want a couple of things.
This first one here, my wireframe is going to be the example.
I like having an example version of it.
I'm going to hold down my 'Option' and drag, the 'Pricing'.
So you type this in as well.
Now the reason we are keeping these in separate boxes...
because obviously I could just put in...
space, space, space...
And then put in 'Log in', and that's fine.
Two things, one is it's hard to kind of adjust that spacing...
but it's not a real big problem.
What ends up happening is...
in XD, which we'll see later on when we start doing mock-ups...
if this is one big text box with all the different words in it...
you can only get it to be a navigation item for one thing...
because it's one text box, you can say...
this whole block of text goes to the example page, but you can't split it up.
So with these all in their own little type boxes...
it means later on when we get in the course...
we can actually get this button to go to something different from this one.
So you'll get in the habit of that.
I'm going to have a couple of these, I'm going to have 'Log in'...
and we're going to have 'Start Trial'.
'Start Trial'.
Another thing while we're here is...
you can see how-- I can see the edge of this thing.
If you can't see it, sometimes clicking the white background...
clicking the edge of the artboard is a nice easy--
double click on the edge of the artboard is...
a nice easy way to select the whole artboard.
Otherwise it's clicking on that name.
When you've got the whole artboard selected...
you can adjust these columns here.
Mine's quite light, I'm going to adjust mine...
mainly because I want you to be able to see it.
You can see there, through the video.
Sometimes the videos don't show the contrast very well.
Anyway that's a handy trick.
Double click the edge and you get the artboard's kind of overall settings.
That is not the trick I wanted to give you, the one is...
I want this to kind of line up close to here.
I want them to be all kind of distributed, so I want the same spacings.
There's a couple of ways you can do it.
You can select them all, so I've got everything selected including my Nav.
I'm going to hold 'Shift' and click the navigation.
So that deselects it, this maybe a bit advanced here.
So let's just go click, hold 'Shift', hold 'Shift', hold 'Shift', hold 'Shift'.
So I'm holding shift when I'm clicking them...
makes a nice big selection.
And up here there's your aligns, I want this one here...
the Distribute Horizontally, you can see there's some shortcuts up there.
I'll click on it, it just spreads them all out.
What you will find though in XD is-- let's say I don't do that...
let's say I line this one up, and I'm like, "Yeah, it's about perfect."
If I start dragging this, I'm not doing anything...
can you see those little helpful smart guides appearing?
You can see, when I get to here...
kind of like the little pink thing appears, and says...
"Would you like them to be 41 pixels apart"...
you're like, "Yeah man, it is too good." Look at that.
I end up doing that a lot more than kind of trying to remember the shortcut...
or I have problems with horizontal and vertical, I always click the wrong one.
Anyway, so that's the basics for text.
We are going to look at it a lot better later on...
when we get into kind of web based fonts and do some fancier things.
For the moment that's what we need to keep going with our wireframe.
Simple text, Point text, Point text, Area text.
There's a couple of other little tricks in there.
All right, let's jump into the next video.
Hi there, I hope you enjoyed the video.
My name is Daniel Scott.
If you would like to do the full course...
there will be a link in the description for that.
Please give this video, on YouTube here...
a thumbs up, really helps me in what I'm doing.
Also, consider subscribing to the channel.
I release a video like this every week, for your viewing pleasure.
All right, bye.