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).
A. Colors B. Character Styles C. Symbols D. Add assets E. Icon indicating a missing or disabled font
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.
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.
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.
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.
Double-click a symbol to enter into symbol editing mode. In this mode, the symbol is displayed with a thicker border. You can make changes to style, size, shadow, and/or position and see 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 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.
If you ungroup a symbol and create a symbol using the same objects again, a new symbol is created.
You can make text and bitmap changes to instances of symbols without impacting the original. This allows you to reuse the same symbol across your XD documents with individual text or bitmaps per symbol instance.
This 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 Update All 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 will be replaced.
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, 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.