在 Adobe XD 中使用“资源”面板管理资源和组件

了解在 Adobe XD 项目中如何使用“资源”面板管理资源和组件。

如何在 XD 中管理资源？

要集中管理您项目中使用的资源（例如颜色、渐变和字符样式），您可以将这些资源添加到“资源”面板。

“资源”面板还会自动显示您在 XD 中创建的所有组件。有关组件的更多信息，请参阅组件。

如需打开“资源”面板，请单击工具栏中的，或按 Cmd + Shift + Y（在 Mac 上）或 Ctrl + Shift + Y（在 Windows 上）。

添加和删除资源

将颜色和渐变（线性或径向）添加到“资源”面板：在画板上选择一个对象或一组对象，然后单击“资源”面板中“颜色”旁边的 + 图标。如需更多信息，请参阅将颜色添加为资源并使用。

将字符样式添加到“资源”面板：在画板上选择文本或文本框，然后单击“资源”面板中的“字符样式”旁边的 + 图标。如需更多信息，请参阅将字符样式添加为资源并使用。

从“资源”面板中删除资源：在“资源”面板中选择资源，右键单击（在 Windows 上）或在按住 Ctrl 键的同时单击（在 Mac 上），然后从上下文菜单选择“删除”。

您也可以选择一个画板或一组画板，然后单击 + 图标，将所有颜色和字符样式从画板添加到“资源”面板。

注意:

即使您从画板中删除了资源，已添加到“资源”面板的颜色、渐变、字符样式和组件仍会留在原处，这样，您便可以在下次需要时重复使用。

将颜色添加为资源并使用

从“属性检查器”中选择画布上的相关对象并应用所需的颜色。
要将颜色添加为资源，请选择以上对象并单击“资源”面板中“颜色”旁边的 + 图标。
要将颜色应用到对象，请在画布上选择对象，然后按照以下步骤之一操作：
- 要应用颜色填充，请在“资源”面板中单击该颜色，或者右键单击该颜色，然后选择“作为填充应用”。
- 要应用颜色笔触（边框），请右键单击“资源”面板中的一种颜色，选择“作为边框应用”。
通过在“资源”面板中右键单击颜色可以集中编辑颜色，并查看这些颜色在整个文档中的应用。

将字符样式添加为资源并使用

从“属性检查器”中选择画布上的文本并应用样式。
要将样式添加为资源，请选择带有样式的文本并单击“资源”面板中“字符样式”旁边的 + 图标。如果您选择带有多种样式的文本，请单击 + 图标以创建多个字符样式。
要将字符样式应用到文本，请在画布上选择文本，然后在“资源”面板中单击字符样式。
选择并右键单击字符样式可以编辑这些字符样式并查看它们在整个文档中的应用。

为资源添加标签

对于您已添加到“资源”面板中的资源，您可以为其添加自定义标签。在“资源”面板中，切换到列表视图并单击标签对其进行重命名。例如，您可以将颜色的名称从 HEX 值自定义为磁贴背景颜色。

当您重命名某个组件时，更改即应用到“图层”中该组件的所有实例，以便更好地标识。

XD 还允许您向标签添加表情符号。

重新排列“资源”面板中的资源顺序

您可在“资源”面板中重新排列资源的顺序。您可以将常用资源移动到列表顶部或以组为单位进行排列。

如何解析缺失字体？

当您的 XD 文档包含计算机中缺失的字体时，XD 会在“资源”面板的“缺失字体”部分列出它们，使您可在画布上突出显示这些字体、评估这些字体在设计中的使用情况并在设计中对它们进行整体替换。如果缺失字体在 Adobe Fonts 库中提供，则 XD 会自动激活这些字体以提供无缝的用户体验。

使用 Adobe Fonts

为确保 Adobe Fonts 体验尽可能简单，XD 自动在您的设备上激活可在 Adobe Fonts 库中找到的缺失字体，无需您手动激活。

如果您在线打开的文档中包含缺失的字体，而这些字体在 Adobe Fonts（您可以通过您的 Creative Cloud 订阅访问）中可以找到，则 XD 会自动在您的机器上激活这些字体。

在 Adobe Fonts 中激活的字体会以蓝色的激活图标突出显示，只要这些字体可供您使用，它们就会出现在您的文档中，而您无需进行相关操作。

注意:

如果您要加载使用了多种字体的多个文档，请确保您已停用不再通过 Creative Cloud Fonts 库获取的字体。

确定并替换缺失字体

如果您的文档中缺少任何字体，“资源”面板中缺失字体的旁边将显示感叹号。替换缺失字体：

右键单击缺失字体并选择“替换字体”来选择替换字体。XD 在画布上自动预览建议的替换字体。您也可以改为使用“在画布上突出显示”选项，在进行替换之前突出显示设计中缺失的字体。
选择“确定”可在画布以及定义的字符样式中替换该字体。

什么是组件？如何创建、编辑和删除组件？

组件是可在项目中的画板上多次重复使用的一个或一组对象。项目中使用的组件的所有实例是链接在一起的。也就是说，对一个实例做出的任何更新将会立即反映到所有其他实例中。

如需将某个对象转换为组件，请执行以下操作之一：

右键单击该对象并选择“制作组件”。
选择该对象并按 Cmd + K（在 Mac 上）或 Ctrl + K（在 Windows 上）。
在 Mac 上，选择该对象，然后选择“对象”>“制作组件”。
选择该对象并在“资源”面板的“组件”库中单击 +。

您在项目中创建的所有组件都将自动显示在“资源”面板的“组件”库中。

编辑和删除组件

要更改组件的阴影和背景模糊，您需要在画板上双击组件，这与常规对象不同。在画板上双击组件时，组件会显示较粗的边框。如果组件是一组对象，则在双击时，可以编辑该组中的每个对象。

如需从“组件”库中删除某个组件，请右键单击该组件并选择“删除组件”。

重复使用组件

如需重复使用某个组件，请将其从“组件”库拖到画板上。您也可以在画板中复制并粘贴一个组件，或者将其从一个画板复制并粘贴到另一个画板。系统会使用绿色边框表示组件的所有链接实例。您也可以将组件从一个 XD 文档复制并粘贴到另一个 XD 文档。

如需在不影响其他组件实例的情况下，对某个组件实例的样式做出更改，请右键单击该实例并选择“取消组件编组”。然后，您可以继续进行更改。

如需对组件实例进行文本或位图更改，则您不必取消组件编组。如需更多信息，请参阅覆盖组件实例的文本和位图。

注意:

如果您取消了某个组件的编组并再次使用相同对象创建一个组件，则会创建一个新组件。

覆盖组件实例的文本和位图

您可以在不影响原始组件的情况下，对组件实例的文本和位图做出更改。通过覆盖，您可以在 XD 文档之间重复使用同一组件，并且每个组件实例均具备不同的文本或位图。

当您创建的按钮或其他导航元素使用相同的设计元素但需要不同的文本块或图像时，覆盖功能特别有用。

如需覆盖组件实例中的文本或位图，请选择相应的文本并输入新文本。或者，将组件实例中的位图替换为另一个位图。

对文本或位图做出的更改仅会作用于单个实例，而不会影响原始组件。

如需将组件实例中的文本或位图更改传送到其他链接组件，请在画板上右键单击该组件并选择“推送覆盖”。

替换组件

您可以将一个组件的所有实例替换为另一个组件。将一个组件从“资源”面板拖到另一个组件上。当您将其拖到目标组件的上方时，图标会变成一个箭头，这表示该组件及其所有实例均将被替换。

什么是链接资源？

借助链接资源，您可以使用 XD 云文档中提供的一个或多个设计文件中的资源（组件、颜色和字符样式）。链接资源是对链接组件工作流程的补充。当您修改源文档中的链接资源时，XD 会将所有更新告知给链接资源的实例。接下来，您可以预览并接受更新。

如何将链接资源添加到“资源”面板？

要将链接资源添加到“资源”面板，可执行以下操作之一：

单击“资源”面板旁边的 + 图标（如果“资源”面板已填充）。

或

单击“链接资源” 徽章（如果“资源”面板为空）。

链接资源窗口将打开，其中包含两个选项卡：云文档和已与您分享。在“云文档”和“已与您分享”选项卡中，您可以按照“名称”、“修改日期”、“创建日期”和“大小”对文档进行排序。选择将任何 XD 云文档添加到您的设计项目中。

来自链接源云文档的资源将添加到“资源”面板中，位于其自己的筛选器下，以云文档名称命名。例如，CodeBrown_Tractiv_UI_kit。

如果您在“资源”面板中设置了筛选器，则将切换到“所有资源”视图，以在资源浏览器中查看从云文档新添加的资源。请注意，颜色、字符样式和组件会自动从链接文档导入。

有关如何使用链接资源的信息，请参阅使用链接资源。

什么是链接组件？

通过链接组件，您可以跨文档共享组件，并维护 UI 工具包、样式指南和标签页的单个真实来源。当您更新源文档中的带链接组件并保存更改时，XD 会通知您目标文档中此更新的信息。

如需了解如何使用链接组件，请参阅使用链接组件。

如何在“资源”面板中搜索并筛选资源和组件？

按资源类型筛选资源

默认情况下，添加到“资源”面板的所有资源都显示在其中。您可以在“资源”面板中，单击“搜索”字段旁边的下拉箭头，按资源类型筛选资源。在下拉菜单中，您可以选择资源类型“颜色”、“字符样式”或“组件”。

搜索资源

您可以在“资源”面板中搜索颜色、字符样式和组件。要搜索颜色，请输入所需颜色的十六进制代码或自定义标签。同样，如需搜索字符样式和组件，请输入与资源名称相匹配的字符串。XD 会根据搜索字符串，在“资源”面板中显示相关结果。

XD 会记住每个会话的最后五个搜索查询。这些查询会显示在搜索历史记录中。

如何使用“资源”面板在画布上查找资源和组件？

XD 允许您在画布上快速查找资源。要查找某个资源在画布上放置的所有位置，请在“资源”面板中选择该资源，右键单击并选择“在画布上突出显示”。无论资源放置在画布上的什么位置，该资源都会突出显示。

当某个组件未在项目中的任何位置使用时，XD 将显示以下消息：“使用了此组件的 0 个副本。”

在“资源”面板中突出显示画布上选定对象的资源

XD 还允许您在“资源”面板中突出显示画布上选定对象所用的资源。在画布上选择了一个对象后，您可以快速地查看该对象使用的颜色、字符样式或组件。

要在“资源”面板中突出显示为某个对象使用的资源，请在画板上选择对象，右键单击该对象，然后选择以下选项之一：

显示颜色：在“资源”面板中突出显示已使用的颜色。
显示字符样式：突出显示已在元素中使用的字符样式。
显示组件：匹配已添加到面板中的组件。

XD 会突出显示所选对象使用的资源。

管理资源和组件