Working with Text
To type some text in your XD artboard, select the Text tool from the toolbar (or use the T shortcut), click on the location of your artboard where you want the text to begin and type your desired text.
When you are done and you want to commit the text and exit the “type mode”, just hit the ESC key, or click on another tool from the toolbar.
The text you just typed will be laid out on a single line and will expand until you stop writing or hit a line break.
This is perfect when you need fairly short pieces of text in your design.
Text areas
If you need to add lengthy paragraphs of text, which have to fit correctly in your layouts, it’s better to use a text area.
To do that, activate the text tool, click on the location of your artboard where you want the text to begin and drag to define the size of your text area.
Then click inside the text area and type your text. You will notice that when the text reaches the right boundary of the text area, a line break will occur automatically, so that the text can fit perfectly within the area you defined.
You can easily resize the text area by using the handles located along its border.
As you probably have noticed, when the text tool is selected or when you select a text object, you can see a “Text” section in your property inspector on the right.
In this section, you will be able to change:
- The font you are currently using
- The text size
- The font weight
- The character spacing (distance between each character of a string of text)
- The line spacing (vertical distance between each line of a given text block)
- The paragraph spacing (vertical distance between each paragraph)
- The text alignment (left, center, right)
- Point and area text
- Text transformations
You can also quickly adjust the size of a text object directly from the little handle visible at the bottom of each text object. You just need to click and drag it.
Keep the same style when writing new text
When you type a new text string, Adobe XD uses a default font, size and color (Helvetica font, 20px, grey).
This is not always ideal, especially if you are working on a project using a completely different style of typography.
There’s a way around it: before creating a new text string, select a text layer having the style you would like to replicate. Then select the text tool again and write your text: its style will match the previously selected text layer.