组件是可以在你的设计中重复使用的UI元素。 它们可以帮助你跨项目创建和管理一致的设计。

在本文中，我们将介绍如何：

你可以从任何对象或图层集合中创建一个组件，可以是简单的按钮或字段，或更复杂的设计，如菜单。

首先，选择需要包含在主组件中的图层。

然后，你可以通过几种不同的方式创建组件：

在工具栏中，单击 Create Component：

在画布或图层面板中右键单击所选图层，然后从选项中选择 Create Component：

使用键盘快捷键：

然后，所选图层将嵌套在一个新的“组件”图层中，该图层将在图层面板中显示为紫色。

提示

你仍然可以编辑主组件中的各个图层和对象。

我们建议您在团队或公司中定义好组件的结构。

这使得以下操作变得更容易：

在 Figma 中定义组件结构有两种主要方法：

命名组件 您可以使用的约定命名来对组件进行分组

例如：Button/Login/Active; Button-Signup-Hover 或 Button.Learn.Active

在框架中组织组件

您可以通过将组件分类到文件、页面和框架中来建立严格的组件结构。

这减少了对命名的依赖。

您也可以选择使用两种方法的组合。

在我们的指南中了解有关构造组件的更多信息：Best practices: components, styles, and shared libraries (opens new window)。

您可以使用几种不同的命名约定：

使用“/”命名时，您将能够在 Instance 菜单中的 Related Components 之间进行切换。

Figma 还会根据“/”命名结构将组件导出到对应文件夹：

文件名：

导出的文件结构：

资源面板是在一个地方查看组件的最佳方式。您甚至可以将资源面板中的组件拖到画布上。

您可以从左侧边栏或使用键盘快捷键访问资源面板：

资源面板中的组件按以下顺序排列：

你在当前文件中创建的组件

您可以在这个部分看到您在当前文件中创建的所有组件。

此文件所用的组件

在这个部分你可以看到在此文件中使用的所有组件。这些是来自其他文件的组件，或来自其他团队资源库的组件。

启用团队资源库

如果您是专业版团队的成员，您还可以从任何已启用的资源库中查看组件。

这将包括您通过库模式启用的任何个人或团队资源库。您可以为整个团队或单个文件启用资源库。

在 团队资源库 一文中了解有关团队资源库的更多信息。

提示

您还可以使用面板顶部的搜索字段查找此文件或团队库中的组件。

如果要在设计中的其他位置重用组件，可以创建该组件的实例。

实例是主组件的精确副本，它具有与原始属性相同的所有属性，包括任何文本格式，样式或布局约束。

实例本质上是链接到主组件的，当您对主组件进行更改时，我们会将相同的更改应用于您正在使用的任何实例。

如果您对单个实例进行更改，我们会将其定义为覆盖原有属性。此更改仅适用于实例，而不适用于主组件。在下面的“覆盖实例”部分中了解有关更改实例的详细信息

如果你在与存在主组件的文件中工作，则可以通过复制粘贴该组件来创建实例。

有几种方法可以做到，在所有这些情况下，您需要首先选择组件：

使用键盘快捷键复制主组件：

MacOS：⌘ + D

Windows：Ctrl + D

按住 ⌥（Alt / Option） 键并拖动组件以创建副本。

复制粘贴组件

您还可以在左侧边栏的资源面板中查看所有组件的列表。

这允许您查看任何：

然后，您可以从资源面板中选择任何组件并将其拖到画布中以创建实例：

在设计时，你可能希望将实例替换为另一个实例。例如：在按钮的 Hover 和 active 状态间切换时。

您可以在属性面板的 Instance 部分中查看您正在使用的实例：

点击下拉列表允许您将现有实例替换为另一个组件，您可以从以下列表中进行选择：

要交换实例：

选择要替换的实例。

在属性面板中，单击实例部分中的下拉字段：

然后您可以选择：

a. 从 Related Components 部分中选择一个组件。 b. 选择此文件中的一个组件。 c. 从任何已启用的团队库中查找组件。

单击以使用该组件的实例替换当前选择：

::: 更新 以前，相关组件是根据所选组件或实例的大小确定的。

现在，相关组件将由以下因素确定：

想要批量更改图层名称？了解有关 批量重命名 的详细信息。 :::

当我们更改单个实例时，我们将其称为 覆盖 Override。当您想要在创建组件的变体时，覆盖特别有用。

在下面的示例中，我们为每次行程设计了不同的行程卡。

我们更改了标题、日期和文字内容、和每次旅行的背景图像和参与者：

支持的覆盖：

覆盖不支持：

无法覆盖影响组件中图层布局的任何属性，这包括：

提示

我们建议将应用覆盖的组件重命名为与原始组件或实例名称不同的组件; 这可以确保在实例之间切换时覆盖保持不变。

您可以重置被覆盖的实例以将其恢复为原始样式。

在画布中选择实例

有几个不同的地方可以重置实例：

a. 从工具栏中点击重置实例图标：

b. 从属性面板的实例菜单中，选择 Reset Instance：

然后将重置实例以匹配主组件的属性

提示

如果需要，您可以使用键盘快捷键撤消任何更改：

也可以将实例与其主组件分离。

一旦分离，实例将会变成普通的框架。对主组件所做的任何更改都不适用于分离的实例。

有许多方法可以将实例与组件分离。

选择要分离的实例。

然后你可以：

从属性面板的实例菜单中，选择 Detach Instance：

右键单击画布上的实例或图层面板（左侧），选择 Detach instance：

或者使用键盘快捷键：

提示

如果您不小心创建了一个组件并希望将其重新转换为实例，您可以：

对组件进行更改时，这些更改仅适用于当前文件。

如果要跨文件使用组件，则需要将这些组件发布到团队库中。这将在您更改主组件时更新所有实例。

当协作者向团队库发布更改时，我们会通知您。然后您可以查看和更新​​使用这些组件的实例的所有文件。

您只能通过专业版团队的团队库发布和使用组件。

注意

目前无法将主组件复制并粘贴或移动到另一个文件。 这样做会破坏主组件和实例之间的链接。