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).
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. 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.
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 the relevant object on the canvas and apply the color you need from the Property Inspector.
- To add the color as an asset, select the above object and click the + icon next to Colors in the Assets panel.
- 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.
- Edit the colors centrally by right-clicking them in the Assets panel and see them being applied across the document.
- Select the text on the canvas and apply the styles from the Property Inspector.
- 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.
- To apply character styles to a text, select the text on the canvas and click the character styles in the Assets panel.
- Select and right-click the character styles to edit them and view them being applied across the document.
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.
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.
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.
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 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. 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.
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 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.
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.
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.
XD remembers the last five search queries for each session. These queries appear in the search history.
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.
When a symbol is not used anywhere in the project, XD displays the message: "0 copies of this symbol is used."
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.