Lessons

Lesson Info

How to Add Text

So we're gonna talk a little bit about text. How that works, and talk a little bit about styling as well. So, with text, it's gonna be similar to working with text in Illustrator, okay? So what we're gonna do is we're gonna put a little text in the home screen. We'll start there. Then we're gonna bring in text and put a bunch more on one of the other screens. So, come over to the home screen, you can press the space bar, get to the hand tool. You can also, if you want, you can zoom in, zoom out, do things like that. And I'm gonna kind of just reorganize things a little bit. Move things around a little bit, there we go. And we're gonna add a little bit of text to this now, okay? And do a little bit of style formatting, that type of thing. So, what we're gonna do is go in and start to work a little bit with that content. So look on the left side over there and you're gonna see the text tool. So once you come to the text tool, click on that. And what we're gonna do is we're gonna draw or ...

create a little bit of text. Now, to create text out here, there's a couple different things we can do. We can go in and we can start to draw a text frame if we want to. Or we can click and just start typing. It's very much, like I said, like Illustrator. I'm gonna do that off the left edge over here. So what I'm gonna do is just click to start. And, we're gonna create a little bit of text out here. So, with that out there, let's just type in, I think I've got something I wanna say here. Your guide, I'll just go out, your guide to the world. Alright. Now, when we type in text like this by clicking, we're actually creating what's called point type. Now the point type is, it's really good for headlines, for button copy, different things like that. So, we can use this to our advantage for a lot of different cases, or a lot of different things. Now once you create the text, you're gonna see that you can go in and select it. You can do all your stuff if you want to. But there's kind of a cool thing with point type. If you press escape right now, it's sort of like selecting the select tool, okay? Look out there, you're gonna see that you now have a dot at the bottom, alright? Now, what we can do is, you can actually come to that little dot at the bottom of the text. And let me zoom into this so you can see it a little bit easier. There we go. Come to that dot, and click and drag, and watch what happens. This is a great way for us to visually change the size of the text. If you're designing on the fly, and you wanna work a little bit faster, that type of thing, you can do something like that. It's a great way to do that. Now, what I wanna do is I wanna change a little bit of the formatting out there. You can either click a bunch of times to select the text, or drag across it. Or, if you press escape like you had, you can change the formatting for that text with the object selected. You can do that too. Now with that selected, either dragging across or the object selected. If you look on the right, you're gonna see the text properties that we can change. The different text formatting, okay? Now the text formatting, you're gonna notice that we actually have a different font for Windows than we do for Mac. Now on Mac, it's actually Helvetica Neue, on Windows, if I'm pronouncing this correctly, it's Segoe UI. I believe that's how we say it. It's S-E-G-O-E I think, something like that, U-I. And they look similar. They look very similar. So, if you wanna try a different font, you can do that. You can click on the font family menu over there and you can see all the different types of fonts. These are from my system, of course. Now as far as fonts are concerned, if we wanna bring in a font, and we wanna use that on our text, we're not gonna go out and pick, let's say a Typekit font. We're not gonna do something like that. We're not gonna do that within XD, I should say. If you have fonts that you want to use, that are web specific, app specific, whatever it happens to be, what you're gonna do is you're gonna go out and you're gonna pull them down from some other source or some other way. So, if I wanna use Typekit fonts, let's say you're a Creative Cloud member, and you have access to Typekit. What we're gonna do is we're gonna go out and find some fonts, okay? To do that, you can go to Illustrator, Photoshop, InDesign, just about any program, and pull those fonts down. You can do things like that. I'm gonna come up to the Creative Cloud desktop app. Now, on Mac, it's gonna be up here. On Windows, it's gonna be down in the system tray. But you can go in and go to assets. And you're gonna see that we have files, fonts, and what's called market. Now if I go to fonts, we can go and basically sync fonts from Typekit. So let me do that. I'm gonna grab a font that I might want. So, I'll sync fonts from Typekit. It's gonna go out to the browser. Now, if you've ever been on a Typekit website, you kinda know how to get around. You're gonna go in and find a font you want. You can do things like sort them if you want to do that. You can do it based on web, you can do all kinds of things. I'm gonna find the font that I really want, and sort by something, like sans serif, that type of thing. Maybe this one, Urbana, I'm just trying something out. Or, this one down here, like Acumin. Click on a font, you can also, if you want to, go up and actually search Typekit by typing in a font name. Maybe somebody said, "Hey we need to use X font." You can do that. I'm gonna go in and say, let's use Urbana. I'll click on it. It's gonna take me to the next screen. And essentially what we do, is we're gonna go in and pick which fonts we want to sync. These are the different parts of the font. These are actually the light, bold, that type of thing. So, if I come in here and say, what do I want to do? Maybe Urbana bold, we'll do that. You can actually see where it's gonna be used. Where it can be used, rather. You can even look at details to see what you can do. I'm gonna click sync. To sync that. There we go. It should take a few minutes. Now, if you do a whole bunch of them, it's gonna take a little bit here. And what typically will happen, and you may not see it, but the little desktop icon for Creative Cloud, is gonna, kind of, work. You're gonna see little spin, that type of thing. Sometimes it will actually show a message that says, "Hey that font is synced with your machine." Now once you pick a font, and once you get it out there, and you've got it synced. You can then start to use it. I do this with a lot of different fonts. Especially web fonts or app fonts that I want to be able to use. If you want to use other fonts, maybe you're doing web design or something like that. And you want to use Google fonts, you can actually use a bunch of different methods. I've got a little app called SkyFonts. You can search the Google fonts and pull those down as well. There's a lot of ways to do that. Once you have a font synced, the great thing is it's gonna sync it across all of your apps. So you can use it for just about anywhere. Now, once I got that, I'm gonna close up the browser here. And, I'm gonna go back over, texty. And I've got that still selected. What I want to do is go over to text over there. I'm just gonna search, or type in, the font. Hopefully I can find it here. Let me find Urbana. That's what I just did, right? I'm so horrible with fonts when I do that. It looks like it didn't quite sync it for me. But you gotta know that once it actually syncs it with your system, you will find it over there. And then you can use it. But that's the reason, or that's how we're gonna be able to get let's say a Typekit font to be able to work within Adobe XD right now. I'm just gonna pick another font. I'm gonna try something else. I'll try some kind of sans serif, or something like that. I'll do a Calibri, that's good I think. Go ahead and try some different things. If you look on the right, you also see we have font size. I'm gonna make this a little bit bigger. And just a couple tips for you, you can use a lot of this shortcuts you know in Illustrator, Photoshop, InDesign, those programs as well. If you want to, you can actually use things like command shift, or control shift. And then comma or period, and a lot of us know that one. That's actually to do the scaling for the text, if you want to do it that way using a keyboard. That's pretty great. You can also come over to the font size over there. And what I tend to do, this is gonna help you for just about all of the different fields that we have over there. You can actually put your cursor in there if you want to. And just use the arrow key. So, put your cursor in the field, and use the up arrow, down arrow. And you can even use or press shift, and use the up arrow and down arrow to kind of change sizes. Now like I said, that works for a lot of different fields. Not just for font sizing, which is great. Now we've got the style. If we want to do that. I'll pick something like a bold, we can do that. And we'll change the color. Let's go to fill. I'll do a white, maybe. And let's save the white color. So to do that, you can come down here and click on this plus. That'll save the white color for us. And there it is. And then we'll just drag that into place. Let me zoom out a little bit. Select the select tool. You can press V, by the way, to get to that. That's kind of an easier, or faster way to get there. I think it looks a little too small. I'm gonna visually kind of try it out, test things out. So I'm gonna grab that dot underneath. And just make it a little bit bigger. There you go. That's point type, that's the great thing about doing that. Now what I want to do quickly is, I want to create a couple of text areas, or point type rather, for these buttons. Just to get that done too. So press the letter T to go to the type tool. Come down here, and just click on top of the button, and we'll just type in, login. Now, unfortunately what's gonna happen here is it's gonna use the same properties from the last time. And that's actually a good thing. It's gonna use the same font, styling all that. But right now it's white, so I can't even see it. So what you wanna do is you wanna press escape, that's gonna select the object so at least you can see that it's there. Come over and change the color fill. And I'll try something different. You can try whatever you want, like a gray. There we go. And what we're gonna do is make it a little bit bigger. Drag that dot, a little bit bigger, don't go crazy. And to drag it into place, you can just press escape. And you can go to the select tool or press V to go to the select tool. And drag it into the middle of the button. You're gonna see the smart guides kick in here. And you'll notice that we could, if we want to, just leave it at that. If you get the numbers right, and it's looking, you can see what's called gapping information. That kind of makes it a little bit easier. If you wanna drag, right now there's really no way to turn off smart guides. But if you wanna drag and not have smart guides showing, you can press command on Mac or control on Windows. And this works for everything you do. And just drag. So you can go in and kind of move it around a little bit. There we go. Now if I let go of the key and drag, command on Mac or control on Windows, you can kind of get it back. When I'm gonna do it visually, I think it looks like it's centered. But it's visually hanging down a little low. We'll use the align options in just a little bit here. But, I'm just gonna use my arrow key and bump it up a little bit. This is what I love about doing this. If you have objects, and you are moving them around, tweaking them. Icons, different things like that, if you use your arrow keys, you're gonna notice that you're gonna see smart guide gapping information. That's actually pretty awesome. And if you align things vertically, horizontally, however it seems to work, as you're pressing the arrow keys, it's gonna do a great job of telling you where that content is, and if it's aligned. I love that about XD. I know some of us struggle a bit with smart guides. But, this is actually a great thing. It really, really is. Alright, I'm gonna save my file. And what I wanna do is just take that text and I'm gonna show you how to preserve formatting and make it easier for us in just a little bit here. But, I'm just gonna duplicate it down. So you can option drag it down. And make sure it lines up. Alt on Windows. Let go of the mouse, let go of the key, and just change the color. I'll go with a white. There we go. And, let's actually just change that and maybe call it continue, or something like that. Now you're gonna notice that it is not centered in the button. A lot of times when I create button text like this, I want to make sure that I center that content. So later on, if we create maybe a symbol out of this, and we need to change the text, we can do it really easily, and it will stay right in the center of the button and grow this way. So, with your cursor in that text. Just, let's do center align. Now we're gonna have to reposition it, which is fine. But go ahead and drag it back, and put it back in the center. There we go. Now I know you guys, we're gonna work smart as we go on here. Right now we're trying to get the groundwork. Place images and content and do that. But, we're gonna create, like I said, symbols and save formatting as well. Now I'm gonna press command 0 on Mac, or control 0 on Windows. And we're gonna put some text out here on these two different art boards right over here. We can place text or copy paste text if we want to. But if we place text, it's gonna be a TXT format, okay? So if you come up to file, and come to import, you can also drag text in if you want to do that. I'm gonna come to my assets, I've got this in two places in case I forgot where it was, which you gotta know me to love that. But, I'm gonna go head and import this text, this TXT file. And you're gonna see, if we don't have anything selected it's gonna stick it kind of right in the middle of the document window. And then just drag it into the art board. Now what I want to do is I wanna make sure that we have it aligned with that layout grid we set up. Okay? So I don't think we actually applied it to this art board, but we need it. So, click on the art board name, at the very top. That's gonna select the art board itself. On the right, you're gonna see that we have our layout grid. Go ahead and turn that on. And we can toggle this on and off if we want to. It doesn't have to be turned on all the time. Once you turn it on, you're gonna see that, right now for me, it's gonna remember your default settings. If you said in the beginning to make default, to set that first layout grid we did as default. It would kind of remember that as we go. Right now you can set it. If yours looks different, go ahead and set it to two columns, or whatever you feel comfortable with. And set the actual margins on the right and left. And this button right here allows you to set them differently all the way around. So top, right, bottom, and left. Click on that text frame, and just allow us to drag it in. Snap it into the right and left if we want. And I wanna show you something here. This is kind of interesting. But if you've ever worked in other programs, like InDesign or Illustrator, and you draw a text box, if the text doesn't fit, it's called overset. And you usually see what? You see a plus in the corner, right? Well XD has a little different way of showing that. I can tell that this text doesn't fit in this text box. The reason why is 'cause there's a little blue dot in the center there. If I take that little blue dot and just drag it down, I can see all the text. Now what's interesting about that, what I love about this actually, is that if you hide text, totally fine, it doesn't show in the prototype or whatever you're creating, that's great. But if you need to edit it, you can double click on the text itself, and it's gonna switch over. And even if it's hidden, it will show you all the text in that text object. So you can go in and cut, delete, whatever you need to do. Alright. Press escape. And that's gonna select the text frame. And just drag down. We're gonna make this a little bit taller. Now, if we want to, we can go in and change the text. Double click, start typing, do whatever we need to do in here. Maybe this isn't placeholder. But what I wanna do is I want to copy this, and then paste it on the next art board, the art board to the right. If we select content and just right click and copy, or command C, control C, copy it. Come over to this art board on the right, this one here. And click in the art board. And paste. Right click, however you want to do it, and paste. And notice what happens. When we paste from one art board to the next, it actually remembers the relative positioning. This can be a great thing for us as we go on. That way if you have something like that UI element at the very top. We have the Chrome, that type of thing. Or maybe a login button. You could position it in the same place in every art board. Just by copying it, clicking in an art board and pasting it. And it'll put it in that same spot. Alright, now if you want to go change that text, go ahead. We're gonna kind of leave it as is, which is fine. Then go head and save your file. I'm gonna zoom out a bit. And we've got some of the text out there. We're gonna need more text. But, as we go on, you can kind of do some of that. And I wanna make sure that I've kind of, got everything here. Alright, now later on, like I said, we are gonna go in and we're gonna start to work with saving the formatting. Don't worry about that. We tend to, or we want to work smarter in XD, okay?