Manage assets and symbols

You can use the Assets panel to manage all the assets in your project.

The Assets panel displays assets (such as colors, gradients, and character styles) that you add from your project. It also displays any symbols (a special type of linked asset) that you create in XD.

To open the Assets panel, click  in the toolbar, or press Command + Shift + Y (on Mac) or Ctrl + Shift + Y (on Windows).

To add colors and gradients (linear or radial) to the Assets panel: Select an object or a group of objects on the artboard, and click the + icon next to Colors in the Assets panel. 

To add character styles to the Assets panel: Select text or a text box on the artboard, and click the + icon next to Character Styles in the Assets panel.

To delete an asset from the Assets panel: Select the asset in the Assets panel, right click (on Windows) or Ctrl click (on Mac) and select Delete from the context menu.

You can also select an artboard or a group of artboards and click the + icon to add all the colors and character styles from the artboards to the Assets panel. 

You can add custom labels to the assets in your Adobe XD file. In the Assets panel, switch to list view and click the label to rename it. For example, you can customize the name of a color from the HEX value to Title Background Color.

When you rename Symbols, the change applies to all instances of the symbol in the Layers panel for better identification.

Adobe XD also allows you to add emoticons to the labels.

Select an object in the active XD document, and then do one of the following:

• Click a color in the Assets panel or right click the color, and select Apply as Fill.
• To apply a color stroke (border), select the object, right-click a color in the Assets panel, and select Apply as Border.

Select a text object on your artboard. In the Assets panel, click a character style. 

You can reorder the assets such as colors, character styles, and symbols in your project. You can move the frequently used assets to the top of the list or arrange them as groups.

A symbol is an object that can be reused multiple times across artboards in your document. All instances of a symbol used in your project are linked. That is, any update made to one instance is instantly reflected in all other instances.

To convert an object into a symbol, perform one of the following actions:

• Right-click the object and select Make Symbol.
• Select the object and press Command + K (on Mac), or Ctrl + K (on Windows).
• On a Mac, select the object and then select Object > Make Symbol.
• Select the object and click + in the Symbols library.

To enter symbol editing mode, double-click a symbol. In this mode, the symbol is displayed with a thicker border. You can make changes to style, size, shadow, and/or position and see that these changes reflect in all linked instances.

If your symbol is a group of objects, then in symbol editing mode, you can edit every object in the group. 

To delete a symbol from the Symbols library, right-click the symbols and select Remove Symbol.

To reuse a symbol, drag it from the Symbols library onto the artboard. Alternatively, copy and paste a symbol within an artboard, or from one artboard to another. All linked instances of a symbol are indicated with a green border. You can also copy and paste symbols from one XD document to another. 

To make style changes to a symbol instance without affecting the others, right-click the instance and select Ungroup Symbol. You can then go ahead and make the changes. 

To make text or bitmap changes to a symbol instance, you don't have to ungroup the symbol. For more information, see Override text and bitmaps for symbol instances.

You can make text and bitmap changes to instances of symbols without impacting the original. Overriding allows you to reuse the same symbol across your XD documents with individual text or bitmaps per symbol instance.

Overriding is especially useful when you create buttons or other navigation elements that share the design element but need different text blocks or images.

To override text or bitmaps in symbol instances, select the text and type in your new text. Or, replace a bitmap in a symbol instance with another bitmap.

The change to the text or bitmap occurs only in that single instance. It does not affect the original symbol.

To propagate text or bitmap changes in a symbol instance to the rest of the linked symbols, right-click the symbol and select Push Overrides.

You can replace all instances of a symbol with another symbol. Drag a symbol from the Assets panel on to another symbol. When you drag it on top, the icon changes into an arrow indicating that the symbol and all its instances are replaced.

With linked symbols, you can share symbols across documents and maintain a single source of truth for UI kits, style guides, and sticker sheets. When a linked symbol is updated in the source document, Adobe XD notifies whenever you have copied the source linked symbol in another document.

For information on how to use linked symbols, see Work with linked symbols.

You can filter assets from the Assets panel in Adobe XD. By default, all the assets are displayed in the panel. You can filter the assets by type using the drop-down arrow in the Assets panel. Click the drop-down arrow and select one of the asset types: Color, Character Style, or Symbols. Based on your selection, the specific asset types are listed.

You can search for colors, character styles, and symbols in the Assets panel. To search for colors, type the hex code of the color that you want. Similarly, to search for character styles and symbols, type the string that matches with the asset name. Based on your search string, Adobe XD displays the relevant results in the Assets panel. 

Adobe XD remembers the last five search queries for each session. These queries appear in the search history.

Adobe XD allows you to quickly highlight and find elements. To find where all an asset has been used in a project, select the color or character style or the symbol in the Assets panel. Right-click and select Highlight on Canvas. Wherever the asset has been used, the element is highlighted in the artboard.

This functionality is useful to identify wherever you have used a particular asset or symbol in your Adobe XD file. 

When a symbol is not used anywhere in the project, the application displays the message: "0 copies of this symbol is used."

Adobe XD also allows you to reverse highlight which asset is being used for an element that you select. When you select an object on the canvas, you can quickly find the color, character style, or the symbol that is used for the element.

To reverse highlight from an element, select the element from the artboard. Right-click the element, and select one of the following options:

• Select Color: Highlights the color that has been used, in the Assets panel.
• Select Character Style: Highlights the character style that has been used in the element.
• Select Symbol: Matches the symbol that is already added to the panel.

The application highlights the assets that are used for the selected element.