Adobe XD 中的组件

组件是 Adobe XD 中可重复使用的对象。它们提供了无与伦比的灵活性，可以帮助我们重复使用它，同时多次更改其实例。我们只需修改主组件即可全局更新它们。

一个按钮是组件的一个很好的例子，因为它在整个项目中被使用了好几次。通过将按钮制作成组件，我们可以在项目的不同页面上重复使用它。如果我们需要自定义按钮的样式，我们可以通过只更新主组件来全局更新按钮样式。如果我们需要更新内部页面上按钮的文本，我们可以通过只更新它的文本来更新它。它将保留按钮样式并更新文本。

由于重复使用的组件是链接在一起的，主组件的更改将立即复制到所有组件。 Adobe XD 的组件功能是最棒和最节省时间的功能之一。它通过重复使用组件减少了设计师的工作量。但是，它需要周全的方法和精心准备的工作流程。

在本节中，我们将讨论如何创建和使用组件。为了更好地理解组件，请确保了解 Adobe XD 的响应式调整大小和填充功能。

如何创建组件

要将对象或一组对象作为组件，请选择它并导航到对象菜单，然后选择制作组件选项。或者，我们可以使用Ctrl+K键作为快捷键，将对象或一组对象制作成组件。

例如，我们想创建一个按钮作为组件，以便它可以在其他屏幕上使用相同的属性。从画板中选择按钮。

现在，导航到对象菜单，然后选择制作组件选项。

通过选择此选项，它将使按钮组成为一个组件。它将如下所示

现在，可以将此按钮复制到不同的画板，方法是按住 Alt 键和拖动键。它将复制相同的样式和文本到所有画板。当我们对此按钮进行任何更改时，它将在整个项目的所有按钮中反映出来。

它将列在工作区左侧的资源面板中。我们还可以使用资源面板将此组件拖放到工作区的任何位置。当我们对主组件进行任何更改时，它也会自动更新其他复制的组件。

当我们第一次创建任何对象或一组对象作为组件时，它就成为了主组件。从视觉上看，它将在左上角的绿色菱形中更新。组件可以像一个简单的对象一样进行编辑。

在制作组件时，请记住以下几点以获得最佳使用效果

• XD 不支持对主组件的任何专用编辑和查看；这意味着如果我们更新主组件，它将在画布上进行编辑。
• 如果主组件被删除，那么这并不意味着组件链会断开；相反，XD 将找到合适的组件并将其设为主组件。
• 要将单个组件与主组件取消链接，请使用Ctrl+Shift+G键取消分组，或从上下文菜单中选择取消分组组件选项。要取消画布上所有实例的链接，请使用资源面板中的删除选项。
• 为了确保您正在处理主组件，请始终留意框左上角的绿色填充菱形。

什么是组件实例？

主组件的副本称为实例。组件实例通过对象边缘左上角的绿色菱形图标可见。在主组件中更新的更改也将反映在其实例中。

要在组件实例中覆盖主组件属性，请取消分组组件并覆盖其值。我们可以很容易地在其实例中覆盖组件属性。但是，它将从链中删除，因此如果主组件已更新，它将不会反映更改。

如果您不想将其从链中断开并覆盖其属性，请勿取消分组它并更改您要覆盖的值。在覆盖实例后，您要更新主组件；那么，更改属性将不会反映在已更新的实例中。但是，我们可以将任何实例恢复到其主状态。要将实例恢复到其原始状态，请右键单击组件，然后选择恢复到主状态选项。

以下属性可以在组件实例中被覆盖

文本：可以在组件状态下编辑文本。这将有助于更改输入字段或按钮的标签。

位图：我们可以更新组件实例的位图内容。这将有助于替换卡片或产品组件中的图像。

大小：我们还可以修改组件的大小。这将有助于更新表单组件中字段的大小。

外观：我们还可以通过更新其颜色、边框、模糊和阴影值来修改组件的外观。这将有助于更新通知部分中的背景。

布局和结构：除了上面讨论的属性之外，我们还可以通过添加、删除和移动对象来修改组件实例的布局和结构。这将有助于在下拉组件中添加下拉条目。

组件中的状态

组件状态使组件具有交互性。它允许我们使用事件保存组件的不同变体。我们可以向组件添加和更新状态。组件实例继承的状态属性意味着子组件也保留更改的状态属性。

状态也有助于创建组件的不同变体。例如，如果我们想使用状态保留按钮的不同变体，例如主要和次要。我们可以为按钮组件创建两种状态，并根据需要更改子组件中的状态。我们还可以通过覆盖组件实例中的状态来创建组件的不同变体。

以下几点在处理状态和组件时将非常有用

• 状态有助于创建组件的不同变体。
• 状态可用于定义组件在操作（例如悬停或单击）上的行为。
• 我们可以使用状态将触发器添加到组件，例如单击和悬停。
• 状态属性将保留到其实例。这将有助于创建具有多个实例的组件并轻松切换状态。
• 可以使用属性检查器中的状态切换器重命名或删除组件实例。