Working with text
When adding text to your design in Adobe XD, you have two main methods to choose from: adding it at a point or in an area. Text at a point is a horizontal line of text that begins where you click and expands as you enter characters. Each line of text is independent—the line expands or shrinks as you edit it but doesn’t wrap to the next line unless you add a paragraph return or a soft return. Entering text this way is useful for adding a headline or a few words to your artwork.
Text in an area uses the boundaries of an object to control the flow of characters. When text reaches a boundary, it automatically wraps to fit inside the defined area. Entering text in this way is useful when you want to create one or more paragraphs. In this section, you’ll explore the different ways to create text and change the formatting of text.
Adding text at a point
With some design content on the Home artboard in place, next you’ll focus on adding text to it. Since this new text will be a single line, creating text at a point is the best option, as you’ll soon see.
TIP
If you move the pointer just off the single anchor point on text at a point, the pointer will change (
). You can then rotate the text.
Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the content.
Click in a blank area away from the artboards to deselect everything. Double-click the artboard icon (
) to the left of the Home artboard to zoom in to it and select the artboard.To temporarily turn off the square grid, in the Property Inspector, deselect the Square grid option.
NOTE
The auto-correct functionality is a part of Spelling and Grammar, which is turned on by default in Adobe XD. To learn more, see the sidebar “Spelling and grammar in XD.”
NOTE
The figures in the lesson were taken on macOS, so you will see Helvetica Neue being used. The default font for Adobe XD on Windows is Segoe UI.
Select the Text tool (
) in the toolbar. Click to the left of the Home artboard and type field. If you see an auto-correct menu below the text that shows the text “Field,” click the X to the right to keep the lowercase “field.”Press Return or Enter, and type guide to create text at a point. Once again, to keep the text lowercase, you may need to click the X to the right of the auto-correct menu that appears beneath the text.
If you continue to type, the text will continue to the right until you either press Return/Enter for a paragraph return or press Shift+Return (macOS) or Shift+Enter (Windows) for a soft return.
Press Esc to select the text object.
A single point appears at the bottom of the bounding box around the text. This is one way to tell that this is text at a point.
Drag the point at the bottom of the text object down and up to see the font size change. Stop dragging when you see a font size of approximately 100 in the Property Inspector.
With the text object still selected, click the Fill color box in the Property Inspector. Change the color to white in the Color Picker that appears.
Select the Select tool (
) and drag the text into the center of the Home artboard.Choose File > Save (macOS) or click the menu icon (
) in the upper-left corner of the application window and choose Save (Windows).
)
)
TIP
To reshape the text as paths, you can convert text to outlines (shapes) by selecting the text object and choosing Object > Path > Convert To Path (macOS) or right-clicking and choosing Path > Convert To Path (Windows).
TIP
You can convert selected text objects between point text (
) and area text (
) by clicking the desired option in the Text section of the Property Inspector.
Creating a text area
To create text in an area, you drag with the Text tool (). Doing that creates an area to type text into. After you draw the text area, the cursor appears, and you can type. Next, you’ll create a text area for body copy that you’ll add to your design.
Press the spacebar to access the Hand tool (
), and drag in the document window to see the Hike Detail artboard to the right of the Home artboard. You can also drag on a trackpad with two fingers to pan in the document window.Select the Text tool (
) in the toolbar, and over the bottom half of the image, drag from the left edge of the artboard to the right edge to create a text area that is as wide as the artboard. Type Pine Meadow Lake Loop (without a period).You may notice that your text doesn’t fit within the text area (but you see it all) since the formatting is the same as the last text and is rather large. Also, the text is wrapping within the bounds of the text object.
)
NOTE
The text formatting you see may be different and that’s okay.
Select the Select tool (
) and notice the very small dot in the bottom-middle point of the box around the text. That dot indicates that there is overset text, or the text doesn’t fit.
To make all of the text visible, you could drag the bottom-middle point down until it all shows. Since the text is so large, in this case, you will simply change the font size.
Double-click the text to select it. You should now see all of the highlighted text.
Select the Font Size value in the Property Inspector and type 36. Press Return or Enter to accept the change. Make sure the text color is white.
Press the Esc key to select the text object again and not the text within.
)
Importing text
Next, you’ll add more text to the design from a text file. This can be a great method for adding text to your designs from an external source.
Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the content.
Choose File > Import (macOS) or click the menu icon (
) in the upper-left corner of the application window and choose Import (Windows). Navigate to the Lessons > Lesson04 folder and select the file named Hiking.txt. Click Import to place the text in its own type object on the same artboard.
TIP
You can easily include text in your design by simply dragging a plain text file onto your artboard. This action creates an area text object with the contents of the text file. You can also copy and paste text onto the artboard, creating an area text object that you can easily move and edit in Adobe XD.
NOTE
If you remove all of the text from a text area, the text area itself will also be removed.
Select the Select tool (
) and drag the text you just placed down toward the bottom of the artboard.You may need to zoom out a little to see the bottom part of the artboard or pan using the Hand tool (spacebar). You can also drag on a trackpad with two fingers to pan in the document window.
Press Command+3 (macOS) or Ctrl+3 (Windows) to zoom in to the text.
Drag the text area close to the left edge of the artboard (see the figure). As you drag, you should feel it snapping to the square grid on the artboard. Drag until you see 16 for the X value in the Property Inspector on the right.
Drag the middle-right point of the text area to the right to make it wider. Stop dragging when it’s the same grid distance from the right edge of the artboard as it is from the left edge.
Click in a blank area of the document window away from content to deselect.
)
Styling text
In Adobe XD, the text-formatting options are found in the Property Inspector and include formatting such as type (point or area text), font size, text alignment, and more. In this section, you’ll get a feel for formatting text in Adobe XD by applying formatting to text.
Double-click the artboard icon (
) to the left of the artboard name “Home” in the Layers panel to fit the Home artboard in the document window.With the Select tool (
) selected, click to select the text “field guide.”
NOTE
The figures in this lesson were taken on macOS, so you will see Helvetica Neue being used.
NOTE
The Font menu in Adobe XD shows all of your system fonts and any synced Adobe fonts.
Make sure that Helvetica Neue (macOS) or Segoe UI (Windows) is selected for the font in the Property Inspector. Click the arrow next to “Regular” to reveal the Font Weight menu, and choose Bold.
For both text at a point and area text, you can change the formatting for all of the text by simply selecting the type object with the Select tool. If you want to apply different formatting to different text within text at a point or a text area, you can select text with the Text tool.
To adjust the space between the lines of text, change Line Spacing (
) to 96 in the Property Inspector. Press Return or Enter.Line spacing is the space between lines of text and is similar to leading in programs like Adobe Illustrator.
Press the spacebar to access the Hand tool (
), and drag in the document window to see the text on the Hike Detail artboard. You can also drag on a trackpad with two fingers to pan in the document window.
)
)
TIP
To change values in fields, you can select the value and press the up or down arrow keys. If you press the Shift+up or down arrow keys, the value changes by 10.
With the Select tool (
) selected, click the text “Pine Meadow Lake Loop.” Make sure Font Size is 36 and Font Weight is Bold in the Property Inspector. Change Line Spacing to 40. Press Return or Enter after the last value entered.Drag the right-middle point of the text area to the left so the text wraps like it does in the figure.
Drag the bottom-middle bounding point up to just below the text.
This is meant to make the frames as small as they can be so that it will be easier to select a lot of content in a small area.
Drag the text to the right so that the X value in the Property Inspector is 16.
With the Select tool (
) selected, click in the gray pasteboard to deselect.Select the Text tool (
), and click below the Pine Meadow Lake Loop text. Type DISTANCE, press Return or Enter, and type 3.6 mi.Press Command+A (macOS) or Ctrl+A (Windows) to select all of that text. In the Property Inspector, change the font size to 10 and the line spacing to 16.
Double-click the text DISTANCE to select it. Change the character spacing to 100 and press Return or Enter.
I zoomed in to the text to more easily see it.
Drag across the 3.6 mi text to select it. Change the font size to 16. Press Return or Enter. Press the Esc key to select the text area.
)
)
)
)
)
)
Duplicating text
One way to reuse text formatting is to copy a text object that has the formatting you want and change the text. You can also click in text with formatting you want and then create a new text object and use the formatting from the original text. In this final section, you’ll copy text and change it.
With the Select tool (
) selected, drag the DISTANCE text object so its left edge aligns with the Pine Meadow Lake Loop text above it. See the first part of the following figure for the position.Option-drag (macOS) or Alt-drag (Windows) the DISTANCE text object straight to the right. When horizontal alignment guides appear, indicating the copy is aligned with the original, release the mouse button and then the key.
Select the Text tool and double-click in the copied DISTANCE text to select it, and type DURATION to replace the text. Double-click in the copied 3.6 mi text to select it, and type 3:15 hr to replace the text.
Press Esc to select the text object. Select the Select tool (
), and Option-drag (macOS) or Alt-drag (Windows) the DURATION text object straight to the right. This time, you may see a gap value and a pink bar appear between all three text objects when the gap is the same value. Release the mouse button and then the key.You may not see the gap values because the text is snapping to the square grid. If, when dragging, you don’t see the gap values, you can either zoom in further or turn off the square grid for the artboard and try dragging again. To turn off the square grid for the artboard, press Command+’ (macOS) or Ctrl+’ (Windows). After dragging, you can then turn the grid back on by pressing the same keyboard shortcut.
Change the text to ELEVATION 384 ft (see the figure).
Repeat the last two steps to create another copy. Change the text to DIFFICULTY HARD (see the figure).
Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the artboards.
Click in a blank area of the document window away from content to deselect.
Choose File > Save (macOS) or click the menu icon (
) in the upper-left corner of the application window and choose Save (Windows).
)
)
)
)
NOTE
If you started with the L4_start.xd jumpstart file, then keep that file open.
If you plan on jumping to the next lesson, you can leave the Travel_Design.xd file open. Otherwise, choose File > Close (macOS) or click the X in the upper-right corner (Windows) for each open document.
SPELLING AND GRAMMAR IN XD
In Adobe XD, by default, spelling check and grammar check are enabled. You can access Spelling and Grammar by choosing it from the Edit menu (macOS) or by clicking the menu icon () in the upper-left corner of the application window (Windows).
With Spelling and Grammar enabled, and the cursor in text or text selected, if a word is miss-spelled, it will have the red underline. You can right-click the word and choose from alternatives.
With Spelling and Grammar enabled, XD will also auto-correct text you are typing. If you mis-type a common word, the suggested correction may appear below the word (see the first part of the following figure). You can click the correction to apply it. If you continue typing another word or punctuation, for instance, the word will be auto-corrected (see the second part of the following figure).
)