In the Assets panel, drag the assets across the panel.
Learn how to manage assets and components in your Adobe XD project using Assets panel.
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).
A. Colors B. Character Styles C. Components 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 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.
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.
In the Assets panel, drag the assets across the panel.
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.
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 load multiple documents with different fonts, ensure that you have deactivated fonts that you no longer use from the Creative Cloud Fonts library.
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:
A. Highlight on Canvas B. Missing font indicator C. pop-up when you right-click on missing font
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:
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.
If you ungroup a component and create a component using the same objects again, a new component is created.
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:
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:
XD highlights the assets that are used for the selected object.