创建可重复使用的设计组件

你可以将任何一组对象或图层创建为组件。组件可以是形状、按钮或字段这样简单，也可以是卡片和菜单这样更复杂的设计。

Tip! 
提示！在创建组件并构建你的设计系统时，你会发现需要一些彼此相似的组件，它们之间只有细微的差别。

变体允许你将相似的组件分组并组织到一个容器中。这简化了你的组件库，并使每个人都能更容易地找到他们需要的内容。

学习如何创建和使用变体→

创建组件

你可以将选中的多个图层创建为单个组件。或者，你可以将选中的多个对象批量创建为单独的组件。

创建单个组件

创建组件有几种方法。首先，你需要选择要包含在组件中的图层。

  1. 选择要包含在组件中的图层。
  2. 然后你有几种不同的方法来创建组件：
    • 在属性面板中点击选择名称旁边的“下一步” > Create component.。
    • 右键点击你的选择，并选择Create component.。
    • 使用键盘快捷键：
      • Mac：⌥ Option  ⌘Command K
      • Windows：Ctrl  Alt K
  3. Figma 将图层嵌套在特殊的组件框架内。在图层面板中，使用紫色图标识别组件。
  4. 在右侧边栏中，点击组件名称旁边的“Component configuration”以添加描述和文档链接供协作者使用。协作者和开发者可以在多个位置查看描述和文档。

Tip! 
如果你从以下任一域名添加链接，Figma 将创建一个自定义按钮：

批量创建组件

默认情况下，创建组件操作将从您的选择中创建单个组件。

您也可以批量创建组件。这允许您选择多个组或框架，并从它们创建组件。从以下内容创建多个组件：

Note: 
注意：如果你选择了多个不在上述配置中的图层，Figma 将为每个单独的图层创建一个组件。

  1. 选择您想要从中创建组件的图层，
  2. 在属性面板中，点击选择名称旁边的"下一步"。
  3. 从选项中选择“Create Multiple components”。
  4. Figma 将为每个画板、组、布尔运算或路径创建一个组件。

Create multiple components.png

Tip! 
提示！你可以将组件移交给开发人员，而无需重新组织你的文件。为你的组件创建一个区域.。然后，将区域标记为“准备开发” →

删除组件

你可以随时删除组件。
删除主组件不会从您的文件中移除该组件的实例。

  1. 选择您要删除的组件。
  2. 按 delete 。

恢复组件

如果你有一个已删除组件的现有实例，你可以使用该实例来恢复组件。

了解更多关于实例 →

有几种方法可以从实例中恢复组件：

从右侧边栏

  1. 选择已删除组件的一个现有实例。
  2. 执行以下操作之一来恢复组件：

从右键菜单

  1. 在画布中的实例上右键单击。
  2. 执行以下操作之一来恢复组件：
    • 如果你在包含主组件的库文件中，将鼠标悬停在主组件选项上并单击Restore main component。restore-component-right-click.png
    • 如果你所在的文件不包含主组件，请点击“Go to main component”。然后在对话框中点击“Restore”按钮。