Adobe Creative Cloud All-in-One For Dummies, 2nd Edition
Book image
Explore Book Buy On Amazon
If you find that you are reusing objects in your Adobe XD UI, you should consider converting them to symbols. Symbols are linked objects that can be reused across all artboards in a document. Because they are dynamically linked, changes to one reflect across all instances.

In this next set of steps, you use the icon artwork from this DummiesCCfiles folder. You can use our sample files or one of your own.

To convert an object into a symbol, follow these steps:

  1. Open a document that contains at least one artboard, an icon, and some related text. In this example, we open the file from the DummiesCCfiles folder named delivery-symbol-sample in Adobe XD.
  2. Select an object and some text that you want to reuse. In this example, one of the grouped Submit buttons is selected.
  3. Right-click (Windows) or Ctrl-click (Mac) and select Make Symbol from the contextual menu.

    symbols Adobe XD The delivery-symbol-sample file.

    If you like keyboard shortcuts, you can select an item and press Ctrl+K (Windows) or ⌘  +K (Mac) to convert it into a symbol.

A couple things happen when you convert object(s) into a symbol:

  • If you look in the Layers panel, the object that you converted into a symbol now has a symbol icon to the left of the name.

    Adobe XD layers panel In the Layers panel, the symbol has an icon to the left, reflecting that it is a symbol.
  • If you click the Symbols icon in the lower left of the XD workspace, you see your symbol in a thumbnail view.

    Symbols panel Adobe XD The symbol appears as a thumbnail in the Symbols panel.

Using your symbol

Perhaps you want to use this symbol in another location. You can do so by following these steps:
  1. If you are using the delivery-symbol-sample file, delete the Submit button on artboard iPhone 6/7-2 (use the Delete or Backspace keys to delete). If you are creating your own file, this step is unnecessary.
  2. Make sure the Symbols panel is open by clicking the Symbols icon in the lower left of the XD workspace.
  3. Click and drag the newly created symbol from the Symbols panel to the second artboard. Reposition it as necessary.

    You can also Alt/Option-drag a symbol to clone it to another location.

Making edits to your symbol

Here, you see how edits to one instance of your symbol instantaneously update any other instances. To see how this works, follow these steps:
  1. Click the rectangle in one of your symbol instances.
  2. In the Properties panel, change the Fill to a different color, perhaps red. Note how that change instantly occurs in both instances of the symbol. This is the case with any property.
  3. Now double-click the text in either symbol to edit it. Change the word from Submit to Send. Notice that this change of text is not reflected in the other instance. This makes a great solution when you want consistency in buttons but don’t want the same text in each one.

    If the text change is something that you want reflected in all the symbol instances, right-click and choose Update All Symbols.

    symbol changes Adobe XD A change in the text in your symbol is not reflected in other instances.

Removing a symbol

If you are no longer interested in keeping your symbol instances linked, you can right-click on the symbol in the Symbols panel and select Remove Symbol from the contextual menu. The objects on the page are not deleted, but they are no longer linked to a symbol and can be edited independently. If you want to remove just one symbol to change it without affecting all instances of the symbol, select the symbol, right-click, and select Ungroup Symbol.

About This Article

This article is from the book:

About the book authors:

Jennifer Smith is a web technology expert and author of several books, including Photoshop CS6 Digital Classroom. Christopher Smith is president of the American Graphics Institute and author of more than ten books on Adobe software. Fred Gerantabee is an Emmy award-winning interactive designer, web developer, and author.

Jennifer Smith is a web technology expert and author of several books, including Photoshop CS6 Digital Classroom. Christopher Smith is president of the American Graphics Institute and author of more than ten books on Adobe software. Fred Gerantabee is an Emmy award-winning interactive designer, web developer, and author.

This article can be found in the category: