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 Cmd+ Shift + Y (on Mac) or Ctrl + Shift + Y (on Windows).

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. 

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.

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.

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.

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.

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.

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.

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.

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.

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 + K (on Mac), or Ctrl + K (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.

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.

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. 

To make style changes to a component instance without affecting the others, right-click the instance and select Ungroup Component. You can then go ahead and make the changes. 

To make text or bitmap changes to a component instance, you don't have to ungroup the component. For more information, see Override text and bitmaps for component instances.

You can make text and bitmap changes to instances of components without impacting the original. Overriding allows you to reuse the same component across your XD documents with individual text or bitmaps per component 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 component instances, select the text and type in your new text. Or, replace a bitmap in a component instance with another bitmap.

The change to the text or bitmap occurs only in that single instance. It does not affect the original component.

To propagate text or bitmap changes in a component instance to the rest of the linked components, right-click the component on the artboard and select Push Overrides.

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.

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.  

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

Or

• 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 Name, Date Modified, Date Created, and Size. Select to add any XD cloud document into your design project.

The assets from the linked source cloud document are added to the Assets panel under its own filter named after the Cloud Document name. For example, CodeBrown_Tractiv_UI_kit.  

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.

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.

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

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

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.

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