Use the Assets panel to manage assets and symbols in your project.

Manage assets easily using the Assets panel

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

The Assets panel displays assets (such as colors, 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).

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 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. 

Note:

Colors 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. 

Apply colors from the Assets panel

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.

Apply character styles from the Assets panel

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

Using symbols

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, which means any update made to one instance is instantly reflected in all other instances.

To convert an object into a symbol, you can do 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.
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 symbols

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 delete a symbol from the Symbols library, right-click the symbols 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.

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. 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.

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