Learn how to use linked assets across cloud documents for enhanced productivity workflows.

With the ever-increasing design surfaces, designers need an easy way to create and maintain consistent designs at scale. 

With linked assets, you can easily share and consume not only components — or what was formerly known as symbols — but colors and character styles as well. This is incredibly handy if you are sharing sticker sheet with your team or reuse design elements across projects.

Linked Assets complement the workflow of linked components. When you modify a linked asset in the source document, all the  consuming documents with those linked assets receive update notifications. From there, you can choose preview and accept the updates.

Here is a visual that depicts how to use linked assets in Adobe XD.

Linked assets
Linked assets

Create and share reusable assets

The Assets panel provides a way for you to manage the colors, characters styles, and components used within your document. As part of a design system, you can now use the assets panel to curate the collection of reusable elements that you want to make available to other designers on your team.

To create one or multiple sources of truth for the reusable assets (colors, character styles, and components) across cloud documents, follow these steps:

  1. In the source document, add the required colors, character styles, components to the Assets panel, and save as an  XD cloud document.

  2. Click Share> Invite to Edit. In the Invite tab, add email address of the invitees, optional message if any, and click Invite.

Link assets from a source cloud document

To use the colors, character styles and components that you have created in another source document or that has been shared with you, link you design project to those cloud documents. All colors, character styles, and components from the source document are added to your cloud document as linked assets.

As and when you update the source document, XD indicates that updates are available. You can then choose to accept the updates and thus ensure that everyone uses the latest assets.

To link assets from a source cloud document, follow these steps:

  1. If you are creating a new project, click the Link Assets button in the Assets panel. If you are working off an existing document with populated assets, select   icon at the upper right of the Assets panel.

  2. Browse for cloud documents that you have created or have been shared with you. When you select the required XD cloud document, all assets (colors, character styles, and components) from the source document are added as linked assets to the Assets panel. You can identify linked assets with  icon.

    Here is a visual that depicts how to create linked assets in Adobe XD.

    Linked asset
    Link assets from an XD cloud document

Filter and search linked assets within linked cloud documents

Filter assets in the assets panel

When you link a cloud document to your design file, a filter for the linked source document is added in the Assets panel drop-down. Adobe XD has three filtering mechanisms to narrow down the assets that you would like to use in your project. You can filter assets in the Assets panel by asset type, locally created document assets, or linked assets from other source documents.

Filter by asset type

When you filter the Assets panel by asset type (colors, character styles, or components),  you can see both the local and linked assets.

Filter by document assets

If you want to use only the local document assets, select the Document Assets filter in the Assets panel.

Filter by linked assets

If you have linked assets from multiple cloud documents and you want to use assets from a specific source,  select the linked source document from the filter drop-down in the Assets panel.

Search assets in the assets panel

As your design system and brand kits grow in size with a large number of assets to manage, XD makes it easy for you to find your assets quickly using the search feature in the Assets panel. As you start typing the search term, XD will display the local and linked assets that match your search criteria.

You can search for colors by name or HEX code, while you could search for character styles and components by name.

Here is a visual that depicts how search for assets in the Assets panel.

Work with linked colors and linked character styles

Linked colors and linked character styles work similar to local colors and character styles with one exception, they could only be edited from the source linked document.

Use these workflows to work with linked colors or linked character styles in design files:

Apply linked color and linked character

You can apply linked colors to any object or component on canvas. To apply a linked color or character styles to selected objects or components on canvas, follow these steps:

  • Click a linked color in the Assets panel or right-click the color and select Apply as Fill.
  • To apply a linked color as stroke (border), right-click a color in the Assets panel, and select Apply as Border.
Apply as fill
Apply linked color as fill and border

To apply a linked character style, select the text on the canvas and click the required linked character styles in the Assets panel.

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

Edit linked colors and character styles in source document

You can edit linked colors and linked character styles in the source document and all the consuming documents with the linked assets are notified with the changes.

To edit a linked color or linked character style, follow these steps:

  • Right-click the linked color or linked character style in the Assets panel and select Edit in Source Document. The linked color or linked character style is highlighted in the Assets panel (list view by default) of the source document. 
  • Edit the linked colors and character styles in the source document and all the consuming documents receive update notifications.

  • Add or remove colors and character styles in the source document. This would in turn trigger an update notification to all documents linked to that source document.

Edit linked color or linked character style in source document
Edit linked color or linked character style in source document

Note:

To ensure that the naming convention of assets is consistent for all designers using linked assets, linked assets could only be renamed in the source cloud document. If you rename a linked asset in the source document, all consuming documents having that linked asset are notified with updates to reflect the new asset names. 

To rename or edit the value of a linked color or linked character style in the source document in list view, do one of the following:

  • Double-click the linked color or linked character style.
  • Right-click the linked color or linked character style and select Rename.

Preview linked color or linked character style updates

When a linked color or linked character style is modified in the source document, the consuming document receives an update notification indicated by a blue badge  icon in the Assets panel. 

When you open the Assets panel, each updated linked asset has a blue update  icon next to it to indicate an available update.

Hover over the blue update  icon to preview the updated colors or character changes in the Assets panel and on canvas for any object or component that has those updated linked assets applied to:

  • Preview the updates and view the last modified date and source document details before committing the changes.
  • View the updated changes on both Assets panel thumbnails (list and grid views) and canvas in context of your designs.

Accept updates for a linked color or linked character style

Once you preview the linked assets changes, you can accept single or multiple updates for a linked color or linked character style.

To accept a single linked color or character style update, do the following:

  • Click the blue update  icon in the Assets panel. 
  • Right-click the linked color or linked character style and click Update.
Accept updates for a linked color
Accept updates for a linked color

To accept multiple updates, do one of the following:

  • Click Update All to accept all linked color, character styles, and components updates. This includes addition of new colors, character styles, and components that are added to the source document.
  • Multi-select linked colors, character styles, or components, and right-click Update.
Accept all updates
Accept all updates

Delete linked assets in source document

When you delete linked assets (colors, character styles, or components) in the source document, the link badge turns red indicating that the linked assets have a broken link and are missing from the source document.

You can convert broken linked assets to local assets. Right-click the broken linked assets in the Assets panel and select Make Local Color or Make Local Character Style. All the objects that were previously linked to the broken linked color or character style are now linked to the local color or character style.

Make local color
Convert a broken linked color to a local color

Note:

You can delete linked assets only in the source document. This ensures that all the documents using linked assets from the source document are always synchronized with the changes.

Work with linked components

Components replace what has been symbols in the past and make the task of building out repeated design elements more streamlined and powerful. 

Linked components allow you to create and maintain a single master kit for all their reusable components that you would like to use in your own projects or share with others. This ensures that your team is working from a single source of truth and their designs are always in sync. Similar to linked colors and character styles, when you modify a linked component in the source document, Adobe XD notifies documents with instances of that linked component with those updates. From there, you can preview the changes and choose to accept or ignore them.

For information on components, see Work with components in XD.

Use these workflows to work with linked components in design files:

Create linked components

Use any of the following options to create linked components:

  1. To use a set of components from your XD source document, copy the components from the saved source XD document and paste them in your own project. Hover the  icon to view the pasted components on the canvas and  icon in the Assets panel.
  2. To access all the components in your source document along with the colors and character styles, use the linked assets workflow to bring in all the components from the source document as linked.
Create linked components
Create linked components

Override properties of linked components properties

When a linked component instance is used in a consuming document, you can override the style, appearance, and layout to customize the local instances in the consuming document. To learn more about components overrides, see Work with components in XD.

Edit linked component in source document

To edit the master component in the source document, right-click the component in the Assets panel or on the canvas and select Edit Master in Source Document. The source document opens and the master component is highlighted on the canvas. 

If you change and save the master component in the source document, a blue update  icon next to each component instance in document consuming documents appears in the Assets panel.

Note:

Use the shortcut CMD + 3 (Mac) and Ctrl + 3 (Win) to zoom into the master component.

Edit linked component in source document
Edit linked component in source document

Preview and accept linked component updates

Similar to linked colors and linked character styles, you can hover over the blue update icon for an updated linked component to preview the updates within the Assets panel, and if visible, on the design canvas.

Click the blue update icon to accept the update to an individual component and click Update All button at the bottom of the Assets panel to update all component instances within the document.

Note:

If the component instances have overrides, the overridden properties are always preserved, even if you edit that same property from the master component. The properties that are not overridden are updated to reflect the changes in the master component.

Preview and Accept Linked Component updates
Preview and accept linked component updates

Convert a linked component to a local component

To experiment and change the properties for a linked component without impacting its instances in other documents, convert a linked component to a local component.

If you want to edit the appearance properties of linked component without impacting other documents with that same linked component, convert the linked component to a local symbol. You can edit or override the properties of a local component and updates made to a local component are confined to its own document.

To convert a linked component to a local component, right-click the linked component in the Assets panel and select Make Local Component.

Note:

If you convert a linked component to a local component, you no longer receive notifications to changes made to the component in the source document. Other XD documents with the linked component continue to receive updates.

Make Local Component only works if you copy/paste a linked component across documents or you have a broken linked component.

Remove a linked cloud document

To remove a linked cloud document from your XD document, hover on the linked cloud document in the Assets panel filter and click the  button.

Once a linked cloud document is removed:

  • Linked assets from the cloud document are removed from the Assets panel.
  • Linked cloud document filter is removed from the Assets panel.
  • All linked components on the canvas are converted to regular groups.

When you delete an XD source cloud document, all consuming documents are notified of broken links. Click Relink from the context menu of the Assets panel.

If you select an XD cloud document that contains the same assets, XD relinks all the broken assets to the new document and the new relinked source document is added as a filter.

If the relinked XD Cloud Document does not have any or has some of the broken linked assets, only the available assets are linked, and the remaining assets continue to have a broken link.

Relink missing linked assets
Relink missing cloud documents

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