With the ever-increasing design surfaces, designers need an easy collaboration to create, and maintain consistent designs. With Linked Assets, designers can create a contextual library based in a cloud document comprising all the assets (colors, character styles, and component) required to scale their designs consistently.
With the latest version of Adobe XD, you can easily share and consume not only components (what was formerly known as symbols) but colors and character styles as well in just a few easy steps. This can be incredibly handy if you are sharing out a brand kit or a sticker sheet with your team. Or, simply wanting a way to reuse design elements of your own from project to project. Linked assets complement the workflow of linked components. When you modify a linked asset in the source document, all the consuming documents with linked assets receive update notifications. From there, you can preview and accept the updates.
To learn how to work with Linked Assets, follow these workflows:
You can search for both linked and local assets in the Assets panel. To search for linked colors, type either the assigned color name or the HEX code of the color that you want. Similarly, to search for linked character styles and linked components, type the string that matches with the asset name. Based on your search string, Adobe XD displays the relevant results in the Assets panel.
To filter assets from the linked cloud document in both list and grid views, select the linked cloud document from the drop-down in the Assets panel. The Assets panel filters and displays linked colors, linked character styles, and linked components from that filtered linked cloud document.
Similar to document colors and character styles, you could apply linked colors and linked character styles to selected elements on the canvas by selecting them in the Assets panel.
For example, if you want to modify the linked color or linked character styles in design files, follows these workflows:
- Apply linked color as fill and border
- Edit linked colors and character styles in source document
- Highlight linked color/ linked character style on canvas
- Copy HEX value for linked colors
- Rename a linked color/linked character style in source document
- Delete a linked color/linked character style in source document
- Convert a broken linked color to a local color
- Convert a broken linked character style to a document character style
- Preview linked color/linked character style updates
- Accept updates for a linked color/linked character style
- Accept updates for a newly added linked color/linked character style
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.
You can edit linked Colors and linked character styles in the Assets panel. Right-click the linked color or linked character style in the Assets panel and select Edit in Source Document. The source document opens, and the linked color or linked character style is highlighted in the Assets panel (list view by default) in the source document. Modify the linked color or linked character style in the source document and preview the changes in the destination documents (cloud document).
Highlight all instances of the object using the selected color/character style. Right-click the linked color/ linked character style in the Assets panel and select Highlight on Canvas.
To copy the HEX value of an existing linked color, right-click the linked color and select the #HEXValue. The Hex value is copied to the clipboard.
To rename a linked color/ linked character style in the source document in list view, do one of the following:
- Double-click the linked color/ linked character style.
- Right-click the linked color/ linked character style and select Rename.
You can delete linked colors/ linked character styles in the source document only if the linked color/ linked character style has a broken link. When you delete a linked color or linked character style, the linked color/ linked character style is removed from the Assets panel. All the objects that are linked to the deleted linked color or linked character style are not linked anymore and remain on the canvas.
You can convert a broken linked color to a local color. Right-click the linked color in the Assets panel and select Make Local Color. All the objects that were previously linked to the broken linked color are now linked to the local color.
Any update to the linked color in the source document does not impact the local color.
You convert a broken linked character style to a local character style. Right-click the linked character style in the Assets panel and select Make Local Character Style.
All the objects that were previously linked to the broken linked character style are now linked to the document character style.
Any update to the linked character style in the source document does not impact the local character styles.
When a linked color/ linked character style is updated in the source document, the destination document receives an update notification indicated by a blue badge icon in the Assets panel.
Hover the mouse over the icon on the linked color/ linked character style 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.
You can accept updates for a linked color/ linked character style in list and grid views. To accept a single-color update, do the following:
- Right-click the linked color/ linked character style and click Update.
You can accept updates for a newly added linked color/ linked character style in source document. To accept the update, click the blue update icon in the Assets panel.
Linked components replace what has been symbols in the past and make the task of building out repeated design elements infinitely more streamlined and powerful. Adobe XD introduces linked components (previously known as Symbols), design elements with unmatched flexibility. With linked components, you create and maintain repeated elements like a button as well as override a specific instance of that element for different contexts and layouts. Also, you can:
- Modify the foundational element to propagate to all instances.
- Resize an instance independently.
- Swap a nested component as an override.
- Link and edit components across documents.
- Content properties (text and image fills)
- Appearance properties (fill, border, effects, text style, and so on)
- Layout of objects inside an instance (size, positioning, layer hierarchy, constraints)
- Structure of an instance (adding and subtracting elements).
You can view linked components in both list and grid views of the Assets panel.
For information on linked components, see Work with components in XD.
To delete a linked cloud document, hover on the linked cloud document in the Assets panel filter and click the button.
Once a linked cloud document is removed from the Assets browser:
- 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 subscribing documents are notified of broken links on switching the focus. Click Relink from the context menu of the Assets panel.
The Assets browser displays all the available cloud documents that could be relinked. Select an XD cloud document that has the same element IDs so that all the broken assets are now relinked to the new document. 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 element IDs, then only the available assets are linked. The remaining ones continue to have a broken link.