Home / Articles / Adding Images and Text

Adding Images and Text

Chapter Description

In this sample chapter from Adobe XD CC Classroom in a Book (2019 Release), author Brian Wood explains how to bring raster images into, and add text to, your app design.

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.

  1. Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the content.

  2. Click in a blank area away from the artboards to deselect everything. Double-click the artboard icon (artboard_icon.jpg) to the left of the Home artboard to zoom in to it and select the artboard.

  3. To temporarily turn off the square grid, in the Property Inspector, deselect the Square grid option.

  1. Select the Text tool (text_tool.jpg) 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.”

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. Select the Select tool (sp_selectiontool_lg_n.jpg) and drag the text into the center of the Home artboard.

  7. Choose File > Save (macOS) or click the menu icon (menu_icon.jpg) in the upper-left corner of the application window and choose Save (Windows).

    p0119_02.jpg

Creating a text area

To create text in an area, you drag with the Text tool (text_tool.jpg). 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.

  1. Press the spacebar to access the Hand tool (hand_tool.jpg), 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.

  2. Select the Text tool (text_tool.jpg) 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.

  1. Select the Select tool (sp_selectiontool_lg_n.jpg) 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.

    p0120_02.jpg

    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.

  2. Double-click the text to select it. You should now see all of the highlighted text.

    p0120_03.jpg
  3. 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.

  4. 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.

  1. Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the content.

  2. Choose File > Import (macOS) or click the menu icon (menu_icon.jpg) 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.

  1. Select the Select tool (sp_selectiontool_lg_n.jpg) 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.

    p0121_01.jpg
  2. Press Command+3 (macOS) or Ctrl+3 (Windows) to zoom in to the text.

  3. 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.

  4. 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.

  5. 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.

  1. Double-click the artboard icon (artboard_icon.jpg) to the left of the artboard name “Home” in the Layers panel to fit the Home artboard in the document window.

  2. With the Select tool (sp_selectiontool_lg_n.jpg) selected, click to select the text “field guide.”

  1. 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.

  2. To adjust the space between the lines of text, change Line Spacing (line_spacing.jpg) 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.

  3. Press the spacebar to access the Hand tool (hand_tool.jpg), 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.

  1. With the Select tool (sp_selectiontool_lg_n.jpg) 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.

  2. Drag the right-middle point of the text area to the left so the text wraps like it does in the figure.

    p0123_02.jpg
  3. 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.

  4. Drag the text to the right so that the X value in the Property Inspector is 16.

  5. With the Select tool (sp_selectiontool_lg_n.jpg) selected, click in the gray pasteboard to deselect.

  6. Select the Text tool (text_tool.jpg), and click below the Pine Meadow Lake Loop text. Type DISTANCE, press Return or Enter, and type 3.6 mi.

  7. 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.

  8. 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.

  9. 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.

  1. With the Select tool (sp_selectiontool_lg_n.jpg) 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.

  2. 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.

  3. 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.

  4. Press Esc to select the text object. Select the Select tool (sp_selectiontool_lg_n.jpg), 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.

  5. Change the text to ELEVATION 384 ft (see the figure).

  6. Repeat the last two steps to create another copy. Change the text to DIFFICULTY HARD (see the figure).

  7. Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the artboards.

  8. Click in a blank area of the document window away from content to deselect.

  9. Choose File > Save (macOS) or click the menu icon (menu_icon.jpg) in the upper-left corner of the application window and choose Save (Windows).

  1. 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.

6. Review questions | Next Section Previous Section

There are currently no related articles. Please check back later.