有问题要问或要分享想法?欢迎加入 Adobe XD 社区。我们很乐意倾听您的心声并欣赏您的创意作品!
了解如何在 Adobe XD 中的设计系统间使用嵌套组件。
构建设计系统需要能够在分子级别创建组件,以达到理想的可重用性和灵活性。在创建组件时,可通过 XD 相互嵌套这些组件并创建复杂的对象,如菜单、基于卡片的布局等。
继续阅读以了解如何创建和使用嵌套组件以创造无缝的设计体验。
熟知以下概念:
首先让我们熟悉与嵌套组件相关的一些术语:
使用嵌套组件可构建更健全的设计系统。在更新主要组件时,其所有实例都获得更新,即使更新是对嵌套在其内部的组件作出的也是如此。
要创建嵌套组件,可使用以下这些方法中的任意一种:
方法 A:复制组件实例并将它粘贴到组,然后将它转换为组件。
方法 B:复制组件实例并将它粘贴到已存在的组件中。
方法 C:深入到组件的某个部分,并将这个部分转换为组件。
下面我们使用方法 A 创建对话框组件。
粘贴按钮实例
将该按钮组件的一个实例粘贴到该组中。
转换为组件
选择该组并使其成为组件。
创建按钮组件
创建对话框的按钮组件。
创建对话框容器
创建一个其中具有文本和其他对象的对话框容器作为组。
以下是创建嵌套组件时的一些最佳实践:
通过嵌套组件同步,对嵌套在主组件中的各个组件作出的更改可传播到该主组件的所有实例。
让我们看看它的工作原理。
示例 1:容器中的按钮从主按钮收到更改。
对主按钮组件所做的任何更改都会传播到嵌套在切换菜单和容器内的所有按钮。
现在,创建主按钮的两个实例、主切换菜单的两个实例以及主容器的一个实例。
让我们看一些场景:
场景 1:
将嵌套在主切换菜单内的按钮的颜色变为蓝色。
所有嵌套在切换菜单的实例内和所有嵌套在容器内的按钮都将颜色变为蓝色。
但是,主按钮的两个实例不改变颜色。这是因为对嵌套组件的更改与其容器的上下文有关。颜色更改仅适用于切换菜单内的按钮实例。
场景 2:
将主容器内的按钮的颜色变为粉色。容器实例内的按钮也将变为粉色。
请注意,其他按钮的颜色不会改变。这是因为对嵌套组件的更改与其容器的上下文有关。颜色更改仅适用于容器中切换菜单内的按钮实例。
场景 3:
将嵌套在容器实例内的按钮的颜色变为绿色。
其他任何按钮的颜色均不变为绿色,因为此更改是在实例上作出的,而不是在主组件上以覆盖形式作出的。
场景 4:
从场景 3 继续,将嵌套在主容器内的按钮的颜色变为紫色。
由于容器实例的嵌套按钮已有覆盖,因此它不改变颜色。
以下是在嵌套组件实例中使用覆盖时的一些最佳实践:
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 社区。我们很乐意倾听您的心声并欣赏您的创意作品!
登录到您的帐户