7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Working With Text Elements

In this lesson, you’ll learn how to work with text elements in Adobe XD. This is very important because text is found in almost every single design project you’ll be creating. Let’s begin.

2.3 Working With Text Elements

Welcome back to the course. In this lesson, you'll learn how to work with text elements in Adobe XD. And this is very important because text is found in every single design project you'll be creating. So, let's begin. To add a text element, you can select the text tool or press T on your keyboard, and then just click anywhere in your canvas or in your artboard and start typing your text. Now, with the selected, the inspector panel now gives us a new section, or a new collection of properties we can change. First, we can select the font family, or the typeface that we're going to use. And we can simply select one from this list here. We can change the font size. We can change the font weight, and also the font style if we want italic or not. Then we have access to the character spacing to line spacing, and also two paragraph spacing. So let's explain these last two elements a little bit. For that, let's create a text box. So to create one, choose the text tool again and click and drag to create a box that will contain your text. As you can see, the text wraps up nicely within the bounds of my text box. With this selected, I can grab any of these handles to make it bigger or smaller. All right, now, back to the properties. The line spacing will basically affect the line between each line of text. The distance between each line of text. So right now it's at 86. But if I go to like 120, you'll see that my text lines are spaced a lot more. Paragraph spacing defines the space between paragraphs. So, if I'm gonna bring this back to 90, and I'm gonna add a paragraph here with the Enter key. I'm gonna resize this a little bit. You'll see that when I change this value, let's say, for example, 30, This new paragraph that I created is shifted down. And this can increase, By whatever value we want. So these are two different things. This affects the spacing between the individual lines of text, and this affects the spacing between paragraphs. And a paragraph is when you hit Enter, and you create a new line of text. Now, apart from these properties, we can also affect the alignment of the text. So this is left aligned. Here is center, here is right. And the following two options refer to how text is defined. Is it defined like I did here at first, as just a single line? And this is called point text, or is it defined as a text box and in XD, this is called area text. At any point, I can change the type between point text and area text. So if I select this and I say, convert this to point text, it's just gonna create multiple lines. But if I take this and I define it as area text, I can then add, New content to this. So that's the difference between these two elements. Now, the area text is suitable of course, for paragraphs and long text. This, the point text is more suitable for, for example, the text on a button, or the text on a menu item, right? Something that doesn't need multiple lines. And using a point text, also has a nifty feature here. If you drag this handle, it's gonna change the font size. And also, the line height or the line spacing. So as you can see, that changes automatically. So that is fantastic. Now, a recent addition to Adobe XD is the ability to add superscript and subscript. You can find these two options here. So if I'm gonna say the word new and select it, I can select superscript and it's gonna be displayed like this. Or I can select subscript and it's going to be displayed like this, at the bottom. We can also change the text decoration by adding underline. We can also choose strike through, and we can also choose the letter case, for the the text elements we selected. We can choose between uppercase, Lowercase, And also title case. So those are the text properties you can change. Now, because this is an object, we also have access to some other properties, like for example, the opacity just like we would on a normal shape. We can add a solid fill colour to it. And this is actually how you change the colour of a text. We can add a border, and this will be applied to each individual letter. And we can also add a shadow and a background blur. All right, and those are the basics of working with the text tool in Adobe XD. Now, let's move on and learn how to work with images. That's coming up in the next lesson.

Back to the top