There are two kinds of text elements in XD: point text and area text. With point text, a handle allows rotation and resizing with a single click. With area text, designers can pre-define the area for copy, and the text will flow within the space available. Spell checking is also available.
- [Instructor] To work with text in XD, you go to the design tools here on the left, and you select text, or you hit the shortcut T. With that selected, you click on your canvas, and then you can start typing, this is point text and if I click outside, I notice this is a very special kind of text in XD, called point text, meaning that I can use this circle here to increase or decrease the size of my entire text, I can even rotate this if I want, and as any other text element, I can select portions of it, and I can have it bold, or italic or even underline, and what's cool here, and a point that, for underline, we went the extra mile to make sure that the descender there is displayed nicely and it's not just a line that goes there.
I can also see all the properties of text that I can change. In terms of shortcuts for bold, italic, underline, for increase and decrease the size, I can also run the shortcut to get there. So this is the first type of text in XD. I also have area text, so instead of just clicking, and start typing, I click and drag to define my area. This is area text, and you can see that we have spell checking so that my text flows within this area.
And if I resize this, you can see the whole content flows within that box in the same way I can have specific elements, this will be for example bold, this will be underline, and again, I just want to highlight again, they went the extra mile to make sure it's very nice, underlined there, and in order to convert point text to area text or vice versa I can select that, and go to the property inspector, and just click here to change from one to another.
And generically I can also change the font type here, the size, the font weight, the alignment, this would be easier to see the alignment. Character spacing. Line spacing. And if I have multiple paragraphs, so I'll copy this, enter. Enter. As you can see this last one is paragraph spacing, so if I play with that you can see that my paragraph is moving up and down, so this is really good for a lot of text, for example in publications or websites that have a lot of design, here I can increase the area text because if I don't you will crop that text down, and you can see it has more text because this little circle has another circle inside saying there's more there.
Then I can increase that so again, you can play with paragraph spacing, line spacing, and character spacing, all from there. So this is how you play with text in XD. To show you more realistic examples, here I have this title as point text, and this area here as area text. Just like we did before.
- Understanding all tools in Design mode
- Bringing files for Photoshop, Illustrator, and Sketch
- Working with text, vectors, image fills, and masks
- Repeating elements with the powerful Repeat Grid tool
- Resizing multiple elements with responsive resize
- Using the new Assets panel to manage symbols, colors, and character styles
- Sharing symbols across files, with text and image overrides
- Creating and consuming bitmaps and vectors from CC Libraries
- Extending the power of XD using great plugins