使用组件的可复用能力加速你的工作流。
组件是可以跨文件多次复用的图层或图层组。这有助于你在一组设计之间保持一致性。
组件由两个元素组成：
- 主组件：原始事实来源，定义组件的核心属性。
- 组件副本（也称实例）：继承主组件属性的副本。
文件中使用的所有组件副本都会与主组件链接，因此对主组件所做的更新可以反映到组件副本中。你可以覆盖组件副本的属性，从而在保持公共属性的同时管理个别差异。
创建一个组件
Section titled “创建一个组件”- 选择一个图层或一组图层。
- 按
Ctrl+K，或右键并在图层菜单中选择 “Create component”。
(视频略)
可以像复制其他图层一样复制组件。复制组件时，会创建一个与其主组件链接的组件副本。
复制为主组件
Section titled “复制为主组件”可以从资产侧边栏把一个组件复制为新的主组件。选择库中的组件，右键打开菜单并选择 “Duplicate main”。
(视频略)
可以像删除其他图层一样随时删除主组件及其副本。
在视口中删除主组件意味着也会在资产库中删除它，反之亦然，因此请谨慎操作。
(视频略)
如果主组件已被删除，但你可以访问它的副本，则可以使用副本恢复主组件：
- 从视口菜单：选择已删除主组件的组件副本，右键并选择 “Restore main component”。
- 从侧边栏菜单：打开组件副本的侧边栏菜单，选择 “Restore main component”。
可以在资产面板和设计视口中查找主组件。
在资产面板中查找主组件
Section titled “在资产面板中查找主组件”在视口中选择主组件，然后在右侧边栏选项中按 “Show in assets panel”。
(视频略)
在视口中查找主组件
Section titled “在视口中查找主组件”选择组件副本，然后在视口菜单或右侧边栏菜单中按 “Show main component”。
(视频略)
如果你在文件中发现名为 “Main components” 的页面，这通常表示该文件曾使用旧组件系统中的资产，并已迁移到当前组件系统。旧系统中的组件不是设计文件中的图层，只存在于资产库中，因此迁移到新版本时，Penpot 会自动创建一个页面来放置所有组件，并使用库分组结构对它们分组。
在资产库的 Components 区域中，有两种方式创建组件库分组：
- 使用斜杠
/：选择一个组件并按FOLDER NAME/COMPONENT NAME格式重命名，例如Buttons/Alert Button。 - 使用 “Group” 选项：在资产库中选择一个或多个组件，右键显示菜单并选择 “Group”。
(视频略)
取消组件分组
Section titled “取消组件分组”可以通过菜单选项（此时为 “Ungroup”）或重命名，以与分组相同的方式取消组件分组。
拖动组件到组
Section titled “拖动组件到组”在资产库中移动组件到不同组的直接方式之一，就是拖动它们。
(视频略)
分离组件副本会将其从主组件取消链接，并转换为组图层。按 Ctrl + Shift + K，或右键并在组件菜单中选择 “Detach instance”。
你也可以选择多个组件并执行同一操作来批量分离组件。
可以向主组件添加文本注释。注释会显示在每个组件副本中。这对于附加每个组件副本都可读取的规格说明非常有用。
(视频略)
注释也会显示在 Inspect 标签中，是改善设计师和开发人员沟通的另一种方式。
主组件表示设计系统中某个元素更通用的信息。通常你需要改变组件中的特定内容，例如文本、颜色或图标，同时保留其余属性的继承。组件覆盖允许你在 Penpot 中做到这一点。
覆盖是对特定副本所做、但主组件中不存在的修改。使用覆盖，可以在组件副本中保留更改，同时保持与主组件同步。
右键并在组件菜单中选择 “Reset overrides”，即可恢复到主组件状态。
(视频略)
从副本更新主组件
Section titled “从副本更新主组件”可以把组件副本上的更改推送到主组件：
- 选择一个组件副本，该副本包含对其主组件一个或多个属性的覆盖。
- 右键并在组件菜单中选择 “Update main component”。该选项可在视口菜单和侧边栏菜单中找到。
如果即将更新的组件位于另一个文件中，而该文件已作为共享库连接到当前文件，则会显示通知，提供更新或忽略选项。
Penpot 允许你轻松用其他组件副本替换组件副本。
- 选择一个组件副本。不能交换主组件。
- 在右侧边栏中点击组件名称，打开交换菜单。
- 选择要交换的组件并点击。
提示：组件交换时首先显示的选项是资产库中同一级别的组件，因此请合理分组。
(视频略)