用户指南 取消(C)

在 Adobe XD 中使用嵌套组件

  1. Adobe XD 用户指南
  2. 简介
    1. Adobe XD 的新增功能
    2. 常见问题
    3. 利用 Adobe XD 进行设计、原型创建和共享
    4. 系统要求
      1. 硬件和软件要求
      2. Adobe XD、Big Sur 和 Apple Silicon | macOS 11
    5. 工作区基础知识
    6. 在 Adobe XD 中更改应用程序语言
    7. 访问 UI 设计套件
    8. Adobe XD 中的辅助功能
    9. 键盘快捷键
    10. 提示和技巧
    11. Adobe XD 订阅选项
    12. XD 入门计划的更改
  3. 设计
    1. 画板、参考线和图层
      1. 开始使用画板
      2. 使用参考线和网格
      3. 创建可滚动画板
      4. 使用图层
      5. 创建滚动组
    2. 形状、对象和路径
      1. 选择对象、调整对象的大小和旋转对象
      2. 移动、对齐、分布和排列对象
      3. 对对象进行编组、锁定、复制、拷贝和翻转
      4. 为对象设置描边、填充和投影
      5. 创建重复元素
      6. 使用 3D 变换创建透视设计
      7. 使用布尔运算编辑对象
    3. 文本和字体
      1. 使用绘图和文本工具
      2. Adobe XD 中的字体
    4. 组件和状态
      1. 使用组件
      2. 使用嵌套组件
      3. 向组件添加多个状态
    5. 蒙版和效果
      1. 创建一个形状蒙版
      2. 使用模糊效果
      3. 创建和修改渐变
      4. 应用混合效果
    6. 版面
      1. 响应式调整大小和约束
      2. 为组件和组设置固定的内边距
      3. 使用堆叠创建动态设计
    7. 视频和 Lottie 动画
      1. 使用视频
      2. 使用视频创建原型
      3. 使用 Lottie 动画
  4. 原型
    1. 创建交互式原型
    2. 制作原型动画
    3. 自动制作动画支持的对象属性
    4. 使用键盘和游戏手柄创建原型
    5. 使用语音命令和播放创建原型
    6. 创建定时过渡
    7. 添加叠加
    8. 设计语音原型
    9. 创建锚点链接
    10. 创建超链接
    11. 预览设计和原型
  5. 共享、导出和审阅
    1. 共享选定的画板
    2. 共享设计和原型
    3. 为链接设置访问权限
    4. 使用原型
    5. 审阅原型
    6. 使用设计规范
    7. 共享设计规范
    8. 检查设计规范
    9. 设计规范导航
    10. 审查和评论设计规范
    11. 导出设计资源
    12. 导出和下载设计规范中的资源
    13. 企业版的组共享
  6. 设计系统
    1. 带 Creative Cloud Libraries 的设计系统
    2. 在 Adobe XD 中使用文档资源
    3. 在 Adobe XD 中使用 Creative Cloud Libraries
    4. 从链接资源迁移到 Creative Cloud Libraries
    5. 使用设计令牌
    6. 使用 Creative Cloud Libraries 中的资源
  7. 云文档
    1. Adobe XD 中的云文档
    2. 协作与协同编辑设计
    3. 协同编辑与您共享的文档
  8. 集成和插件
    1. 使用外部资源
    2. 使用 Photoshop 中的设计资源
    3. 从 Photoshop 中复制和粘贴资源
    4. 导入或打开 Photoshop 设计
    5. 在 Adobe XD 中使用 Illustrator 资源
    6. 打开或导入 Illustrator 设计
    7. 将矢量从 Illustrator 复制到 XD
    8. 用于 Adobe XD 的插件
    9. 创建和管理插件
    10. XD 的 Jira 集成
    11. XD 的 Slack 插件
    12. XD 的 Zoom 插件
    13. 将设计从 XD 发布到 Behance
  9. iOS 和 Android 版 XD
    1. 在移动设备上预览
    2. 适用于移动设备的 Adobe XD 常见问题解答
  10. 故障排除
    1. 已知问题和已修复问题
      1. 已知问题
      2. 已修复的问题
    2. 安装和更新
      1. XD 似乎与 Windows 不兼容
      2. 错误代码 191
      3. 错误代码 183
      4. 安装 XD 插件时出现问题
      5. Windows 10 上提示卸载并重新安装 XD
      6. 迁移首选项有问题
    3. 启动和崩溃
      1. XD 在 Windows 10 上启动时崩溃
      2. XD 在您注销 Creative Cloud 时退出
      3. Windows 上订阅状态相关问题
      4. 在 Windows 上启动 XD 时出现“应用程序被阻止”警告
      5. 在 Windows 中生成故障转储
      6. 崩溃日志收集和共享
    4. 云文档和 Creative Cloud Libraries
      1. XD 云文档相关问题
      2. 链接组件的问题
      3. 库和链接的问题
    5. 创建原型、发布和预览
      1. 无法在 macOS Catalina 上录制原型交互
      2. 工作流程发布相关问题
      3. 浏览器中未显示发布的链接
      4. 浏览器中的原型呈现不正确
      5. 共享链接上意外出现评论面板
      6. 无法发布库
    6. 导入、导出和使用其他应用程序
      1. 在 XD 中导入和导出
      2. XD 中的 Photoshop 文件
      3. XD 中的 Illustrator 文件
      4. 从 XD 导出到 After Effects
      5. XD 中的 Sketch 文件
      6. 第三方应用程序在导出中不可见

了解如何在 Adobe XD 中的设计系统间使用嵌套组件。

构建设计系统需要能够在分子级别创建组件,以达到理想的可重用性和灵活性。在创建组件时,可通过 XD 相互嵌套这些组件并创建复杂的对象,如菜单、基于卡片的布局等。

继续阅读以了解如何创建和使用嵌套组件以创造无缝的设计体验。

组件
在 XD 中使用嵌套组件

初次使用 XD?

获取 XD

了解应用程序基础知识

曾经用过 Adobe XD?

更新应用程序

查看新增功能

继续操作之前

熟知以下概念:

组件术语

首先让我们熟悉与嵌套组件相关的一些术语:

  • 主要组件:主要组件是定义和控制所有组件属性的组件。
  • 组件实例:组件实例是主要组件的副本,并且继承了对主要组件所做的更改。
  • 嵌套组件:嵌套组件是另一个组件内部的组件。
  • 外部组件:外部组件是内部具有另一个组件的组件。

创建嵌套组件

使用嵌套组件可构建更健全的设计系统。在更新主要组件时,其所有实例都获得更新,即使更新是对嵌套在其内部的组件作出的也是如此。

要创建嵌套组件,可使用以下这些方法中的任意一种:

方法 A:复制组件实例并将它粘贴到组,然后将它转换为组件。

  1. 创建一个主按钮组件。
  2. 复制该按钮组件的一个实例并粘贴到该组中。
  3. 选择该组并将其转换为组件。 

方法 B:复制组件实例并将它粘贴到已存在的组件中。

将该按钮组件的一个实例粘贴到该组中

  1. 创建一个主按钮组件。
  2. 在其他组件中复制并粘贴按钮组件的实例。

方法 C:深入到组件的某个部分,并将这个部分转换为组件。

  1. 创建主对话框组件。
  2. 深入研究该组件内部的按钮。
  3. 将该按钮转换为组件。

示例

下面我们使用方法 A 创建对话框组件。

粘贴按钮实例

粘贴实例

将该按钮组件的一个实例粘贴到该组中。

转换为组件

制作组件

选择该组并使其成为组件。

创建按钮组件

创建按钮组件

创建对话框的按钮组件。

创建对话框容器

对话框容器

创建一个其中具有文本和其他对象的对话框容器作为组。

最佳实践

以下是创建嵌套组件时的一些最佳实践:

  • 可创建其中嵌套了多个组件的组件。但是,在组件具有多种状态和许多对象时,性能可能会受到一些影响。 在此类情况下,要达到最佳性能,最深可嵌套三级组件,并将每级的状态数限制为每个组件最多 10 个状态。
  • 请勿将组件嵌套在自身中。这可能因组件引用自身而导致组件无效。
  • 如果在外部主组件中有一个具有多种状态的嵌套组件,则可切换该嵌套组件的状态。状态更改接着将传播到该外部组件的所有实例。

嵌套组件同步

通过嵌套组件同步,对嵌套在主组件中的各个组件作出的更改可传播到该主组件的所有实例。 

让我们看看它的工作原理。 

示例 1:容器中的按钮从主按钮收到更改。

  1. 创建一个按钮作为首要主组件。
  2. 将按钮实例嵌套在切换菜单中。
  3. 将切换菜单实例嵌套在容器中。

对主按钮组件所做的任何更改都会传播到嵌套在切换菜单和容器内的所有按钮。

将该按钮组件的一个实例粘贴到该组中

现在,创建主按钮的两个实例、主切换菜单的两个实例以及主容器的一个实例。

让我们看一些场景:

场景 1:

场景 1

将嵌套在主切换菜单内的按钮的颜色变为蓝色。 

所有嵌套在切换菜单的实例内和所有嵌套在容器内的按钮都将颜色变为蓝色。

但是,主按钮的两个实例不改变颜色。这是因为对嵌套组件的更改与其容器的上下文有关。颜色更改仅适用于切换菜单内的按钮实例。 

场景 2:

场景 2

将主容器内的按钮的颜色变为粉色。容器实例内的按钮也将变为粉色。

请注意,其他按钮的颜色不会改变。这是因为对嵌套组件的更改与其容器的上下文有关。颜色更改仅适用于容器中切换菜单内的按钮实例。 

场景 3:

场景 3

将嵌套在容器实例内的按钮的颜色变为绿色。

其他任何按钮的颜色均不变为绿色,因为此更改是在实例上作出的,而不是在主组件上以覆盖形式作出的。 

场景 4:

场景 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 中使用组件。可继续学习如何与设计人员或利益相关者共享您的设计以获取反馈

有疑问或想法?

咨询社区

有问题要问或要分享想法?欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品!

Adobe 徽标

登录到您的帐户