组件

作为一名设计人员，您经常会创建一些在整个设计中重复出现的主要元素，如导航栏或按钮。但是，必须根据上下文或布局来自定义元素实例并非易事。在此情况下，您往往最终会创建同一基础元素的多个版本，这会使您的设计维护变得困难得多。

组件（以前称为符号）是具有无与伦比的灵活性的设计元素，可帮助您创建和维护重复元素（如按钮），同时针对不同的上下文和布局更改该按钮的实例。此外，您还可以：

• 修改主要元素以传播到所有实例
• 单独调整实例大小
• 将嵌套组件作为覆盖进行交换
• 跨文档链接和编辑组件
• 覆盖：
  • 内容属性（文本和图像填充）
  • 外观属性（填充、边框、效果、文本样式等）
  • 实例内对象的布局（大小、定位、层次结构、约束）
  • 实例的结构（添加和减少元素）

我们可通过以下工作流程来了解如何在协作环境中使用组件：

• 创建主组件
• 创建组件实例
• 查看并生成主组件
• 从实例更新和重设对主组件的更改
• 覆盖组件实例
• 调整组件大小
• 使用嵌套组件

要了解有关 XD 中组件的更多信息，请观看此视频。

创建主组件

主组件是您所创建组件的第一个实例。您可以在画布上操作或编辑主组件，主组件通过位于编辑上下文左上角的绿色菱形 << icon >>> 来区分。

要创建主组件，可执行以下操作：

选择一个或一组对象，并使用以下任意选项来创建主组件：

从 XD 应用程序中选择“对象”>“制作组件”。

或

• 使用 CMD + K 快捷方式。

  或

• 右键单击并选择“制作组件”。

  或

• 在“资源”面板中右键单击所选组件，然后选择“编辑主组件”。

创建组件实例

您可以复制主组件以创建实例。在创建实例时，实例：

• 是主组件的精确副本，
• 具有与原始组件相同的属性，
• 内在与主组件相链接，以及
• 用带变换手柄的绿色轮廓表示。

要创建组件的多个实例，可在按住 Alt 键的同时在画布上按住并拖动主组件。

您可以在不断开与其主组件连接的情况下，覆盖实例属性。如果您更改实例中的属性，XD 会将该属性标记为“覆盖”。覆盖是仅适用于该实例，而非主组件的独特的更改。

注意:如果您希望做出影响组件所有实例的全局更改，可对主实例进行更改。

任何时候如果您希望恢复对实例所做的更改或覆盖，可右键单击该实例并选择“重设为主组件”。

查看并生成主组件

如果主组件在设计画布上不可见，可执行以下操作：

• 右键单击组件实例，然后选择“在资源中显示组件”选项，该选项可将您转到“资源”面板中的主组件，

或

• 右键单击组件实例，然后选择“编辑主组件”。

如果主组件存在于设计画布上的某个位置，XD 会将您导航到其位置。如果没有，XD 会创建一个主组件并将其放置在设计画布上。（类似于复制画板）。

从实例更新和重设对主组件的更改

要从实例更新主组件，可编辑实例并从上下文菜单中选择“更新主组件”。除非存在冲突的覆盖，否则组件的所有其他实例都将更新为新的主组件的属性。

要将实例重设回主组件，可选择“重设为主组件”，放弃对实例所做的覆盖

覆盖组件实例

通过组件覆盖功能，您可以使用可覆盖主组件任何属性的实例创建主组件（例如大小、填充颜色、文本、图像填充、内容等）对主组件所做的更改会级联到所有实例，除非实例中已覆盖了修改的属性。在编辑单个实例时，对属性或其内容所做的任何更改都会成为仅适用于该实例的覆盖 - 其他实例和主组件不受影响。任何时候，具有覆盖的实例都可以重新同步到主组件。您还可以覆盖实例中的样式和外观。

您可以随时重设具有覆盖的任何实例以匹配主组件，并将覆盖应用于嵌套组件实例的特定部分。

• 要重设对实例进行的覆盖，可右键单击该实例并选择“重设为主组件”。
• 要恢复对实例进行的任何覆盖，可选择该实例，然后右键单击并选择“恢复为主组件”。
• 要将更改从实例推送到主组件，可右键单击该实例并选择“推送到主组件”。

调整组件大小

通过调整组件大小功能，您可以在画布上调整组件大小，但仍将其大小保持为独特的覆盖。与 XD 中的组一样，您可以使用变换大小手柄在画布上直接调整组件大小或旋转组件。组件大小调整的默认调整模式是响应式调整大小，该模式可在“属性检查器”中关闭/打开。您可以关闭响应式调整大小，以手动调整组件大小或使用 Shift 键执行受控缩放，就像应用程序中其他可调整大小的元素一样。您不仅可以调整整个组件的大小，还可以更改其中项目的布局。

不论您如何调整组件实例的大小，现在您可以对组件实例进行更改。与响应式调整大小一样，XD 会在您调整元素大小时重新创建元素在较大或较小画布上的位置。

调整大小后的组件行为类似于画板和蒙版组，因为隐藏了在原始组件边界之外重新定位的所有子元素。如果您调整主组件的大小，则所有未调整大小的实例也会自动调整大小。因此，已经调整大小的实例会保留其调整大小的位置作为覆盖。您还可以独立调整实例的大小，而不会影响主组件。

使用嵌套组件

在许多情况下，您设计了一个包含嵌套组件的更大的组件，例如需要根据上下文进行更新的模态和导航栏。

要交换组件，可执行以下操作：

1. 从“资源”面板中拖动组件，将其放在要与其交换的画布上的组件顶部。
2. 拖动图标从单个箭头变为圆形箭头。

在主组件内交换嵌套组件会替换整个文档中出现的嵌套符号。在组件实例内交换组件会创建仅针对该实例的本地覆盖。

跨文档使用组件

通过链接资源，您可以使用 XD 云文档中提供的一个或多个设计文件中的资源（组件、颜色和字符样式）。链接资源是对链接组件工作流程的补充。在使用文档中使用链接实例时，可以使用覆盖（样式和外观、调整大小和布局以及结构）来自定义使用文档中的本地实例。

如果您在源文档中更改并保存主组件，则使用文档中每个组件实例旁会有一个蓝色徽章来表示。您可以将鼠标悬停在蓝色徽章上以在“资源”面板中预览更新，如果可见，则可在设计画布上预览更新。单击蓝色徽章以接受对单个组件的更新，然后单击“资源”面板底部的“全部更新”按钮更新文档内的所有实例。有关链接资源的更多信息，请参阅使用链接资源。

功能限制

• 如果实例添加的对象超出其原始主组件的边界，您将无法扩展实例的边界。如果这样做，内容将被修剪。解决方法如下：

1. 按照预期覆盖的最大大小创建主组件。
2. 将新对象作为组件实例之外的元素包括在内。

• 您不能将主组件从一个文档移动到另一个文档。
• 多选不可用于“编辑主组件”和“重设为主组件”。
• 如果您选择“转换为路径”，则会删除覆盖。如果您继续编辑，则将删除实例中该对象的覆盖。
• 如果您从主组件进行编辑，目前不支持将不透明度作为主属性编辑。每个实例都有自己的不透明度。

更多此类内容

• XD 中的设计系统
• 使用链接资源