Learn how to manage assets and symbols in your Adobe XD project using Assets panel.

How do I manage assets in XD?

To centrally manage assets such as colors, gradients, and character styles of the objects that you use in your project, you can add them to the Assets panel.

The Asset panel also automatically displays any symbols that you create in XD. For more on symbols, see Symbols.

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

The Assets panel
The Assets panel

A. Colors B. Character Styles C. Symbols D. Add assets E. Icon indicating a missing or disabled font 

Add and remove assets

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. For more, see Add and use colors as assets.

To add character styles to the Assets panel: Select a text or a text box on the artboard, and click the + icon next to Character Styles in the Assets panel. For more, see Add and use character styles as assets.

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. 

Note:

Colors, gradients, character styles, and symbols added to the Assets panel remain there even if you delete the asset itself from the artboard, allowing you to reuse the asset whenever you need it next. 

Add and use colors as assets

  1. Select the relevant object on the canvas and apply the color you need from the Property Inspector.
  2. To add the color as an asset, select the above object and click the icon next to Colors in the Assets panel.
  3. To apply the color to an object, select the object on the canvas and follow one of the steps below:
    • To apply a color fill, either click the color in the Assets panel, or right click the color and select Apply as Fill.
    • To apply a color stroke (border), right-click a color in the Assets panel, and select Apply as Border
  4. Edit the colors centrally by right-clicking them in the Assets panel and see them being applied across the document.

Add and use character styles as assets

  1. Select the text on the canvas and apply the styles from the Property Inspector.
  2. To add styles as assets, select the styled text and click the + icon next to Character Styles in the Assets panel. If you select a text with multiple styles, click the + icon to create multiple character styles. 
  3. To apply character styles to a text, select the text on the canvas and click the character styles in the Assets panel.
  4. Select and right-click the character styles to edit them and view them being applied across the document.
Add character styles as assets
Add character styles as assets

Label assets

You can add custom labels to the assets that you add to the Assets panel. 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 tile background color.

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

XD also allows you to add emoticons to the labels.

Label assets
Label assets

Reorder assets in the Assets panel

You can reorder the assets in the Assets panel. You can move frequently used assets to the top of the list or arrange them as groups.

Reorder assets in the Assets panel
Reorder assets in the Assets panel
  1. In the Assets panel, drag the assets across the panel.

  2. If you want to move multiple assets across the panel at the same time, press and hold Ctrl (Win) or Cmd (Mac) and select those assets.

What are symbols and how can I create, edit, and delete them?

A symbol is an object or group of objects that can be reused multiple times across artboards in your project. 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 Cmd + 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 within the Assets panel.

All the symbols that you create in your project are automatically displayed in the Symbols library within the Assets panel.

Symbols library. Click '+' to make a selected object a symbol and add to library.
Symbols library. Click '+' to make a selected object a symbol and add to library.

Edit and delete symbols

To make changes to a symbol's shadow and background blur, you need to double-click the symbol on the artboard, unlike for regular objects. When you double-click a symbol on the artboard, it is displayed with a thicker border. If your symbol is a group of objects, when you double-click it, you can edit every object in the group. 

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

Reuse symbols

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.

Note:

If you ungroup a symbol and create a symbol using the same objects again, a new symbol is created.

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 on the artboard and select Push Overrides.

Replace symbols

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.

Replace all instances of a symbol with another symbol
Replace all instances of a symbol with another symbol

What are linked symbols?

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 you update a linked symbol in the source document and save the changes, XD notifies you about this update in the destination document.

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

How can I search and filter assets and symbols in the Assets panel?

Filter assets based on asset type

By default, all the assets added to the Assets panel are displayed in it. You can filter assets by asset type by clicking the drop-down arrow against the Search field in the Assets panel. In the drop-down, you can choose the asset type as either Color, Character Style, or Symbols

Filter assets in Adobe XD
Filter assets in Adobe XD

Search assets

You can search for colors, character styles, and symbols in the Assets panel. To search for colors, type the hex code or custom label 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, XD displays the relevant results in the Assets panel. 

Search colors using the hex code in Adobe XD
Search colors using the hex code

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

How can I find assets and symbols on canvas using the Assets panel?

XD allows you to quickly find assets on the canvas. To find where all an asset has been placed on the canvas, select that asset in the Assets panel, right-click, and select Highlight on Canvas. Wherever the asset has been placed on the canvas, the asset is highlighted.

Find and highlight assets on the canvas
Find and highlight assets on the canvas

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

Highlight assets in Asset panel for objects selected on canvas

XD also allows you to highlight the assets in the Asset panel used for an object that you select on the canvas. When you select an object on the canvas, you can quickly find the color, character style, or the symbol that is used for that object.

To highlight the assets in the Assets panel used for an object, select the object on the artboard, right-click it, and select one of the following options:

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

XD highlights the assets that are used for the selected object.

Reveal assets used in a selected object in Adobe XD
Reveal assets used in a selected object

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy