Manage assets and components

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 components that you create in XD. For more on components, see Components.

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

A. Open CC libraries B. Link assets C. Add colors D. Missing assets E. Character styles F. Missing fonts G. Colors 

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 components 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 component, the change applies to all instances of the component 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.

Resolve missing fonts

When your XD document contains fonts that are missing from your machine, XD lists them within the Missing Fonts section of the Assets Panel, allows you to highlight them on canvas, and assess their use in the designs, and replace them throughout your design. For missing fonts that are available in the Adobe Fonts library, XD automatically activates them to deliver a seamless user experience.

Working with Adobe fonts

To make your Adobe fonts experience as simple as possible, XD automatically activates the missing fonts available in Adobe Fonts Library on your machine without intervention.

As long as you are online, opening a document that has missing fonts which are available in Adobe Fonts (to which you have access to via your Creative Cloud Subscription), XD automatically activates them on your machine.

Fonts that are activated from Adobe Fonts are highlighted with a blue activation icon and as soon they are ready to use they will be made available in your document, with no intervention from your end. 

For more information on working with fonts, see Using fonts from Adobe Fonts in Creative Cloud apps.

Note: If you load multiple documents with different fonts, ensure that you have deactivated fonts that you no longer use from the Creative Cloud Fonts library.

Auto-activate Adobe fonts
Auto-activate Adobe fonts
A. Missing fonts B. Activating fonts 


If you have any missing fonts in  your document, an exclamation mark appears adjacent to the missing font in the Assets panel. To replace the missing font:

  1. Right-click the missing font and select Replace Font to choose a replacement font. XD automatically previews the suggested replacement font on canvas. You can also alternatively use the Highlight on Canvas option to highlight the missing font in your designs before replacing them.
  2. Select Ok to replace the font on canvas as well in the defined character styles.
Missing fonts indicator
Identify, highlight, and replace missing fonts

A. Highlight on Canvas B. Missing font indicator C. pop-up when you right-click on missing font 

Replace font dialog
Replace font dialog


A component is an object or group of objects that can be reused multiple times across artboards in your project. All instances of a component used in your project are linked. That is, any update made to one instance is instantly reflected in all other instances. For more information, see Work with components.

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

  • Right-click the object and select Make Component.
  • Select the object and press Cmd (on Mac), or Ctrl (on Windows).
  • On a Mac, select the object and then select Object Make Component.
  • Select the object and click in the Components library within the Assets panel.

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

Components library. Click '+' to make a selected object a component and add to library.
Components library. Click ‘+’ to make a selected object a component and add to library.

Edit and delete components

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

To delete a component from the Components library, right-click the component and select Remove Component.

Reuse components

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

Replace components

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

Swapping a master Component with an instance replaces the master in all instances
Swapping a master Component with an instance replaces the master in all instances

Swapping a master component with an instance replaces the master in all instances. 

Swapping an instance becomes a local override only to that instance. You can swap an entire component or a nested component at the global level for one another. 

Linked assets

With linked assets, you can consume assets (components, colors, and character styles) from one or multiple design files available on the XD cloud documents. Linked assets complement the workflow of linked components. When you modify a linked asset in the source document, XD notifies instances of that linked assets with all the updates. From there, you can preview and accept the updates.  

How to add linked assets to the Assets panel?

To add linked assets to the Assets panel, do one of the following:

  • click the + icon next to Assets panel in case of populated assets panel


  • click the Link Assets badge in case of empty assets panel.

Link Assets window opens with two tabs; Cloud Documents and Shared with You. You can sort documents in Cloud Documents, and Shared with You tabs by NameDate ModifiedDate Created, and Size.Select to add any XD cloud document into your design project.

Linked assets

If you have set a filter in the Asset panel, switch to All Assets view to view the newly added assets from the cloud document in the asset browser. Do note that colors, character styles, and components are automatically imported from the linked document.

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

Linked components

With linked components, you can share components across documents and maintain a single source of truth for UI kits, style guides, and sticker sheets. When you update a linked component in the source document and save the changes, XD notifies you about this update in the destination document.

Search and filter assets and components

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 ColorCharacter Style, or Components

Filter assets in Adobe XD
Filter assets in Adobe XD

Search assets

You can search for colors, character styles, and components 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 components, 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.

Find assets and components on canvas

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 component is not used anywhere in the project, XD displays the message: “0 copies of this component 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 component 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 Component: Matches the component 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

Was this article helpful to you?