有问题要问或要分享想法？欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品！
上次更新日期：
2021年9月3日
- Adobe XD 用户指南
- 简介
- 设计
- 画板、参考线和图层
- 形状、对象和路径
- 文本和字体
- 组件和状态
- 蒙版和效果
- 版面
- 视频和 Lottie 动画
- 原型
- 共享、导出和审阅
- 设计系统
- 云文档
- 集成和插件
- iOS 和 Android 版 XD
- 故障排除
- 已知问题和已修复问题
- 安装和更新
- 启动和崩溃
- 云文档和 Creative Cloud Libraries
- 创建原型、发布和预览
- 导入、导出和使用其他应用程序
了解如何在 Adobe XD 中的设计系统间使用嵌套组件。
构建设计系统需要能够在分子级别创建组件，以达到理想的可重用性和灵活性。在创建组件时，可通过 XD 相互嵌套这些组件并创建复杂的对象，如菜单、基于卡片的布局等。
继续阅读以了解如何创建和使用嵌套组件以创造无缝的设计体验。
继续操作之前
熟知以下概念：
组件术语
首先让我们熟悉与嵌套组件相关的一些术语：
- 主要组件：主要组件是定义和控制所有组件属性的组件。
- 组件实例：组件实例是主要组件的副本，并且继承了对主要组件所做的更改。
- 嵌套组件：嵌套组件是另一个组件内部的组件。
- 外部组件：外部组件是内部具有另一个组件的组件。
创建嵌套组件
使用嵌套组件可构建更健全的设计系统。在更新主要组件时，其所有实例都获得更新，即使更新是对嵌套在其内部的组件作出的也是如此。
要创建嵌套组件，可使用以下这些方法中的任意一种：
方法 A：复制组件实例并将它粘贴到组，然后将它转换为组件。
.gif "方法 B")
- 创建一个主按钮组件。
- 复制该按钮组件的一个实例并粘贴到该组中。
- 选择该组并将其转换为组件。
方法 B：复制组件实例并将它粘贴到已存在的组件中。
?$png$&jpegSize=100&wid=400 "方法 A")
- 创建一个主按钮组件。
- 在其他组件中复制并粘贴按钮组件的实例。
方法 C：深入到组件的某个部分，并将这个部分转换为组件。
.gif "方法 B")
- 创建主对话框组件。
- 深入研究该组件内部的按钮。
- 将该按钮转换为组件。
示例
下面我们使用方法 A 创建对话框组件。
粘贴按钮实例
将该按钮组件的一个实例粘贴到该组中。
转换为组件
选择该组并使其成为组件。
创建按钮组件
创建对话框的按钮组件。
创建对话框容器
创建一个其中具有文本和其他对象的对话框容器作为组。
最佳实践
以下是创建嵌套组件时的一些最佳实践：
- 可创建其中嵌套了多个组件的组件。但是，在组件具有多种状态和许多对象时，性能可能会受到一些影响。 在此类情况下，要达到最佳性能，最深可嵌套三级组件，并将每级的状态数限制为每个组件最多 10 个状态。
- 请勿将组件嵌套在自身中。这可能因组件引用自身而导致组件无效。
- 如果在外部主组件中有一个具有多种状态的嵌套组件，则可切换该嵌套组件的状态。状态更改接着将传播到该外部组件的所有实例。
嵌套组件同步
通过嵌套组件同步，对嵌套在主组件中的各个组件作出的更改可传播到该主组件的所有实例。
让我们看看它的工作原理。
示例 1：容器中的按钮从主按钮收到更改。
- 创建一个按钮作为首要主组件。
- 将按钮实例嵌套在切换菜单中。
- 将切换菜单实例嵌套在容器中。
对主按钮组件所做的任何更改都会传播到嵌套在切换菜单和容器内的所有按钮。
现在，创建主按钮的两个实例、主切换菜单的两个实例以及主容器的一个实例。
让我们看一些场景：
场景 1:
将嵌套在主切换菜单内的按钮的颜色变为蓝色。
所有嵌套在切换菜单的实例内和所有嵌套在容器内的按钮都将颜色变为蓝色。
但是，主按钮的两个实例不改变颜色。这是因为对嵌套组件的更改与其容器的上下文有关。颜色更改仅适用于切换菜单内的按钮实例。
场景 2:
将主容器内的按钮的颜色变为粉色。容器实例内的按钮也将变为粉色。
请注意，其他按钮的颜色不会改变。这是因为对嵌套组件的更改与其容器的上下文有关。颜色更改仅适用于容器中切换菜单内的按钮实例。
场景 3:
将嵌套在容器实例内的按钮的颜色变为绿色。
其他任何按钮的颜色均不变为绿色，因为此更改是在实例上作出的，而不是在主组件上以覆盖形式作出的。
场景 4:
从场景 3 继续，将嵌套在主容器内的按钮的颜色变为紫色。
由于容器实例的嵌套按钮已有覆盖，因此它不改变颜色。
注意事项
- 嵌套组件不能是主组件。因此，如果需要更改主组件，请右键单击嵌套组件，然后选择“编辑主组件”。
- 如果交换外组件实例中的嵌套组件，则对主组件的嵌套组件执行“重置为主组件状态”不会改变被交换组件所属的实例。
最佳实践
以下是在嵌套组件实例中使用覆盖时的一些最佳实践：
- 要创建组件的变体以供重用，请在主组件中创建状态，而非创建具有覆盖的实例。
- 在覆盖实例时，请确保覆盖的是不需要从主组件更新的属性。例如，在按钮组件中，覆盖文本确保标签可不同，但大小和颜色仍与主组件同步。
从 Creative Cloud Libraries 添加嵌套组件
Creative Cloud Libraries 帮助您分发设计系统样式和组件以供在文档间一致地重用。要通过 Creative Cloud Libraries 构建和分发设计系统，请通过将颜色、字符样式和组件添加到“文档资源”面板而组织您的设计系统资源，然后将它们发布为库，以供在所有您的 XD 应用程序和其他 Creative Cloud 应用程序间重用。有关如何使用 Creative Cloud Libraries 的更多信息，请参阅在 XD 中使用 Creative Cloud Libraries。
常见问题解答
在以前版本的 XD 中，在嵌套组件中作出的更改不在外部组件的实例间更新。为了获得更好的体验，请在最新版本的 XD 中打开文档。
否。在最新版本的 XD 中打开带有嵌套组件的现有文档时，XD 自动将这些组件迁移到新模型，以使您尽快上手。
当 XD 打开文档时，这些特定组件与其在“资源”面板中的版本不匹配。为了在迁移时不丢失数据，这些主组件已转换为画布上的实例。如果要将主组件带回画布，请右键单击外实例，然后选择“编辑主组件”。然后，如果要让主组件看起来像是画布上的实例，可将任何必要的覆盖从实例转移到主组件。
要获取更新，请在最新版本的 XD 中打开链接的文档。后续链接的任何文档也应在最新版的 XD 中打开以确保正常使用。
从 XD 34 开始，XD 不再支持将一个主组件嵌套在另一个主组件中。如果某些操作以前已创建嵌套的主组件，则内部组件变为实例。
了解详情
要了解有关 XD 中嵌套组件的更多信息，请观看此视频。
观看时长：10 分钟
接下来学什么？
我们已向您介绍了如何在 XD 中使用组件。可继续学习如何与设计人员或利益相关者共享您的设计以获取反馈。
有疑问或想法？
