Adobe XD 中的组件状态

Adobe XD 中的状态允许我们开发交互式内容，使设计感觉更逼真。状态对于创建用户交互和高保真原型非常有用。

在 Adobe XD 中，我们可以轻松地创建带有不同状态（变体）的组件。这对于创建应用程序的实时用户体验而无需多次复制组件非常有用。

在设计系统中拥有状态可以轻松管理和组织资产和项目结构。

我们可以使用属性检查器区域中的组件部分将状态添加到我们的设计中。创建组件时，它始终从默认状态开始；稍后，我们可以向其添加多个状态，例如悬停或单击。

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

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

让我们了解如何向组件添加状态

如何将状态添加到组件

要将状态添加到组件，请选择该组件，然后单击属性检查器区域中组件部分中的“+”按钮，该按钮位于主组件的默认状态旁边。

它将在下拉菜单中显示可用的状态选项

我们可以选择任何给定状态或定义具有任何名称的新状态，以用于原型设计。

新状态选项将有助于显示已禁用或已单击的版本。

悬停状态选项将在预览模式下将光标移到组件上时更改组件的外观。

切换状态将确定在切换组件时的行为。它将有助于创建切换按钮。

添加状态后，将很容易对其进行自定义。要预览状态的变体，请在属性检查器区域中在状态之间切换。

让我们添加一个悬停状态以了解其行为

默认情况下，每个组件都将处于其默认状态；首先，导航到状态部分并选择一个状态。在我们的示例中，我们选择悬停状态选项。在默认状态下，我们的按钮组件如下所示

现在，选择悬停状态选项并更新悬停状态下的按钮颜色。

更新悬停状态后，选择默认状态将组件恢复为其默认状态。我们在这里注意到，当我们将组件恢复为默认状态时，没有任何改变。

要预览更改，请按Ctrl+Enter键。它将打开一个包含文档预览的新窗口。在这里，当我们悬停在按钮组件上时，按钮颜色将发生更改。它将像实时应用程序一样工作。

现在，我们的按钮颜色在悬停在预览面板中时将如下所示

从上图中，我们可以注意到，只有在特定状态命中时，更改才会被应用。

同样，我们可以为组件的不同版本创建不同的状态。

以下几点在使用状态时很有用

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

重命名和删除组件状态

要重命名状态，请双击它并更改状态的名称。

要从主组件中删除状态，请右键单击组件状态并选择删除选项。它将删除所选状态。当我们从主组件中删除状态时，它将自动从其实例中删除。具有活动已删除状态的实例将恢复为默认状态。

使用单一来源管理状态

我们可以使用主组件管理状态。我们只能从主组件添加、重命名或删除状态。它将自动更新到组件实例。所有复制的组件都将自动从其主组件继承所有更改。因此，我们只能从我们的主组件管理状态。我们不需要为每个组件更改它。