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


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.


    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.

  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.

  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.

  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

Adobe Press Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Adobe Press and its family of brands. I can unsubscribe at any time.


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Adobe Press products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information

To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.


Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.


If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information

Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.


This site is not directed to children under the age of 13.


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information

If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.adobepress.com/u.aspx.

Sale of Personal Information

Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents

California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure

Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact

Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice

We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020