组件

组件是可以在设计中重复使用的 UI 元素，使用组件能大大降低您的设计成本，提高工作效率。

命名和组织组件

组件面板

访问文件中组件的最快方法是通过组件面板，打开方式：

• 单击左侧边栏中的「组件」。
• 或者，使用键盘快捷键：
• Windows: Alt + 2

1、组件面板的结构

在“组件”面板中，您将可以访问以下组件：

• 本地组件：您在此文件中创建的组件。
• 已使用：您已在此文件中使用的其他库中的组件。
• 启用的库：在团队或组织中启用的资源库 。

“组件”面板中的每个部分都有一个标题。我们会展示所有启用的库，并以它们的文件名作为标题。您可以折叠标题以减少它们占用的空间，或者展开它们以查看这些文件中的组件。

2、查看资源库里的组件

组件的排列根据以下结构：文件>页面>画板。您可以使用左侧的箭头来展开文件路径并查看每个画板中的组件，我们按首字母排序，而不是它们在原始文件中的顺序。

3、相关联的组件

我们通过以下方式确定组件之间的关系：

• 通过命名。例如，我们会将设计/组件/激活，设计/组件/悬停，设计/组件/禁用，放在一起
• 按照原文件中设置。例如，我们将同一画板内的所有组件视为相关组件。

在画布上管理组件

注意：组件集只能包含组件，因此无法在组件集中添加文本、描述、画板或对变体进行分组。

将组件组合为变体时，Pixso 会将您当前画布中的布局和间距应用于组件集中的变体中，所以我们建议您在创建变体先整理好布局和间距，以免您再重新排列它们。

提示：默认情况下，组件变体具有紫色虚线描边且无填充。您可以后续调整以更好地适应您的品牌或设计系统。

创建可复用的组件

您可以从任何对象或图层里创建组件。组件可以像形状、按钮或文本一样简单，也可以像卡片和菜单这样更复杂的设计。

提示：当您创建组件并构建您的设计系统时，您会发现需要彼此相似但只有细微差别的组件。

所以您可以将将相似的组件通过建立「组件变体」的方式统一放置管理，这会简化您的组件库，并使每个人都更容易找到他们需要的东西。

创建单个组件

有几种方法可以创建组件。

首先选中您想要创建为组件的图层。 使用几种不同的方法来创建组件：

• 在工具栏中创建组件 。
• 右键单击您的选择并选择「创建组件」。

使用键盘快捷键：

• Windows：Ctrl + Alt + K
• Pixso 会将图层嵌套在一个特殊的组件画板中， 您可以通过紫色图标来识别图层面板中的组件。

在右侧面板中，为协作者添加描述。协作者和开发人员可以在“标注”面板中查看此信息。

批量创建组件

默认情况下，创建组件是创建单个组件，但是Pixso支持让您批量创建组件，您可以选择：

• 画板中的对象和图层
• 组合中的对象和图层
• 单一图层，如路径或矢量网格
• 布尔运算中的图层

注意：如果您选择了多个不在上述之一的图层，Pixso 将为每个单独的层创建一个组件。

• 选择要创建组件的图层
• 点击组件按钮旁边下拉按钮
• 从选项中选择「创建多个组件」

Pixso 将为每个画板、组合、布尔运算或路径创建一个组件。

创建组件实例

组件是可以在设计中重复使用的 UI 元素，主组件定义元素的属性，而实例是您可以在设计中重复使用的组件的副本。有下列几种方法可以创建实例，使用哪种方法取决于您的组件是发布的云端组件还是本地组件。

从组件面板创建实例

您可以在左侧面板中的“组件 ”栏搜索组件，同时您也可以在“组件”面板中选择打开其他的库。

操作方法：点击左侧边栏-->组件，找到您要使用的组件：

• 查看当前文件中创建的本地组件。
• 从启用的库中选择组件（前提是您需要开启团队资源库）。
• 查看个人本地组件和文件中使用的任何组件。
• 使用搜索从您有权访问的任何库中查找组件，范围包括团队、企业资源库和仅查看权限的文件
• 选中该组件并将其拖动到画布中即可创建该组件的实例。

复制创建实例

如果您是在同一个文件中进行设计，那么您可以复制一个组件来创建一个实例。在 Pixso 中有几种方法可以实现复制组件：

使用键盘快捷键复制：

• Mac：⌘ Command + D
• Windows：Ctrl + D

拖动复制：

• 按住 ⌥ Option (Mac) 或 Alt (Windows) 并拖动组件来创建实例。

注意：先释放鼠标再释放键盘按键，否则，Pixso 将移动原组件而不是复制它。

复制和粘贴：

使用键盘快捷键复制组件并将其粘贴为实例：

• Mac： ⌘ Command + C 和 ⌘ Command + V
• Windows：Ctrl + C 和 Ctrl + V

组件属性

组件属性可以让您和您的协作者更细致快速的管理使用文档中的组件，您可以通过设置组件的不同属性实现对组件的更多操作：

• 可切换状态的变体（变体属性）
• 隐藏或显示的图层（图层属性）
• 替换设置的实例（实例属性）
• 快速更改文本内容（文本属性）
• 您可以在右侧属性栏中对这些设置进行操作。文档中其他有编辑权限的协作者同样可以进行设置和切换操作。
• 组件属性与不同的设计属性相关联。您可以为任意组件或组件集创建组件属性，并将它们应用于组件或变体的嵌套层。

创建组件属性

创建组件属性并将其应用于主组件和组件集，来定义设计系统的各个部分并使设计系统更易于使用。

您可以从两个级别创建组件属性：主组件或组件集的父图层或子图层。

您可以从子图层创建实例属性、文本和图层属性，这种操作会将设置的属性应用于对应的子图层。当然，您也可以根据需要在组件中预先创建对应属性，并在对应的子图层上关联这些属性。

您可以从父层创建变体属性，以方便您和协作者快速准确地使用内容丰富的组件集，变体属性只能从父层创建。

变体属性

您可以自定义变体的属性，根据需要添加属性和值，并对其进行自定义以满足您的设计需求。您甚至可以将变体的属性和值映射到设计系统中的代码组件。

属性：可以理解为变体的特点，举个例子按钮组件的属性可以是type、size、state，或者它是否具有icon.

值：即属性值。例如： 状态（state）属性可以有default、hover、pressed和disabled值。

组件集中的所有变体拥有相同的属性和值，但每个单独的变体一定是属性和值排列组合的唯一值。

创建变体属性

选中组件或组件集时，在组件属性模块中可以选择创建变体，

图层属性

使用图层属性设置可见性来控制组件的可见状态。

例如，如果设计系统包含带图标和不带图标的按钮，不用再为每个状态创建变体，为该图标图层创建图层属性并在使用时调整可见性即可。

这样即可以快速调整切换组件状态，又可以有效地减少需要维护设计资产数量。

注意：在将图层属性应用于组件之前，需要考虑这些组件是否需要使用交互事件或原型连接。由于原型交互事件必须连接两个对象。如果使用图层属性来控制组件不同样式的话，将无法为他们创建交互事件。

例如，您将一个图层属性应用于按钮组件中的图标以表示两种状态：一个按钮带有图标，一个按钮没有。因为您使用的是单个组件，所以无法在这两个状态之间建立交互。原型交互必须在两个单独的对象之间进行。

创建图层属性

在任何组件的子图层创建该图层的图层属性，从而获得在组件关联的实例上快速调整对应子图层的可见性。选中对应组件子图层，右侧面板的「图层」模块将会展示「对应」图标，点击该图标即可为该图层创建图层属性并设置初始值。

例如：一个按钮组件将在特定情况下不展示icon，选中icon图层，在右侧「图层」模块创建图层属性，命名属性并设置默认值保持可见，点击创建。再将按钮组件复制一份实例，现在在实例面板中就可以看到刚才创建的图层属性。

实例属性

实例交换属性可以设置主要组件或变体中的实例进行切换。创建实例交换属性时，您可以从任何本地和启用的库中定义默认实例值。

对于使用此属性的父级组件，右侧面板将会展示该子图层的实例切换菜单，以将嵌套资产换成本地其他的组件资产，或来自任何可用库的资产。

创建实例属性

实例属性同样在组件的子图层创建，但需要注意实例属性只能在当前图层是来自其他组件的实例时才可以创建该属性。通过选中该实例图层，在右侧面板「实例」模块中点击「对应」图标即可为该图层创建图层属性并设置初始值。

快捷替换

创建实例属性时，可选择快捷替换组件，使用实例时快捷替换，更加便捷。

文本属性

通过文本属性来控制组件内子图层的文本内容。您可以在实例右侧面板进行快速修改设置了文本属性的文本图层内容。在创建该属性时，您也可以设置统一的默认内容应用在对应的文本图层。

注意：文本属性目前不支持富文本，例如有序无序列表样式、角标和其他高级文本类型设置。但您仍然可以将这些设置直接应用于文本层，右侧边栏的组件属性面板中不会展示这些设置。 如果文本层包含高级文本样式时，从右侧属性面板更改文本会删除这些高级文本样式。

创建文本属性

文本属性同样在组件的文本类型子图层创建，通过选中组件内文本图层，在右侧面板「内容」模块中点击创建图标即可为该图层创建文本属性并设置初始值。同一组件中多个文本图层若关联同一个文本属性时，这些文本内容在修改时将会保持一致。

实例替换

组件让您可以创建和复用设计元素，以加快流程并保持一致性。在创建界面时，我们经常在图标、按钮和卡片等对象的这些组件的实例之间切换。

您可以通过实例面板从当前文件和任何已启用的团队资源库中查找组件并替换。

选择实例后，从右侧边栏中的属性面板访问实例菜单，选择相关组件即可替换当前选择。

实例覆写

组件让您可以创建和复用设计元素，以加快流程并保持一致性。在使用实例时，您可以对实例进行尺寸、颜色、字体、文本内容、等样式调整。调整后的对应样式将不会和主组件同 步更新。

注意：实例中子级图层的位置不能更改。

组件分离实例

您可以将任何实例与其主组件分离。

从实例菜单分离

• 选择要分离的实例。
• 单击属性面板中的实例菜单。
• 点击「脱离主组件」。

从右键菜单分离

• 右键单击画布上或图层面板中的实例。
• 从选项中选择 「脱离主组件」

您也可以使用键盘快捷键快速分离实例：

• Mac：⌥ Option + ⌘ Command + B
• Winsdows：Ctrl + B

更改主组件

您创建的任何实例都链接到主组件。当您对主组件进行更改时，Pixso 会将您的更改应用于任何链接到该组件的实例。

如果主组件和实例在同一文件中，Pixso 会立即应用更改。如果组件已发布到资源库，您需要通过组件面板发布更新才能在订阅的文件中查看这些更新。

更新组件

如果您想修改组建的设计，只能在原始文件中编辑主组件。

未发布的组件：

Pixso 会自动将您对主组件所做的任何更改应用到文件中的任何本地实例上。

已发布的组件：

主组件和实例在同一文件中时，修改会立即生效，如果您希望将这些更改应用于其他文件中的实例上，则需要将这些更新发布到资源库中。

查找主组件

• 在当前文件中选择一个实例。
• 打开右侧边栏中的“设计”选项。
• 在实例部分点击「跳转到主组件」。
• 选择主组件并进行任何更改。

注意：当您通过实例「跳转到主组件」后，Pixso 会为您提供返回实例的选项。

创建和使用组件变体

当您创建组件并构建您的设计系统时，您会发现需要彼此相似但只有细微差别的组件。例如：您可能有多个按钮组件，具有不同的状态和大小，以及明暗模式。组件变体功能就是将相似的组件放到同一个容器中，您可以方便的找到他们。

注意：我们不建议使用变体对不同的图标进行分组。如果您使用的是一个图标的不同尺寸（或交互状态），那样您将它们组合为组件集才会更方便。

相关概念解释：相似的组件我们通常将它们成为变体（variants），放置变体的容器叫做组件集（component set）或者组件变体

创建新变体

注意： Pixso 将变体放置在作为组件变体的单个画板中。该画板中只能包含组件。

创建新变体操作方法：

• 右键选择一个组件
• 在操作菜单中，单击在【主组件】展开菜单，点击【新增组件变体】来添加您的第一个变体。

Pixso 会执行以下步骤：

• 添加具有相同属性的相同组件
• 将两个组件作为变体添加到组件集
• 最后，您可以根据设计需要对变体进行任意视觉更改。

注意：默认情况下，组件集具有紫色虚线描边且无填充。您可以后续调整以更好地适应您的品牌或设计系统。

将组件组合为变体

注意：当您将带有变体的实例添加到文件中时，Pixso 将导入其所属变体组合的每个变体，这可能会影响到您的使用

如果你已经在 Pixso 中有组件库，你可以将你的组件组合为变体。一般过程如下所示：

• 重命名您的组件，用斜杠/来分割
• 在画布上调整放置您的组件
• 将组件创建为变体
• 给您组件的属性命名

向组件集添加更多变体

使用以下任一方法继续向您的组件集添加变体：

• 选中组件集，右下角会出现 + ，只有当您至少有一个变体时，您才会看到加号。

• 点击在右侧边栏的变体部分中，然后选择新增变体。
• 将其他组件拖动到组件集中以将它们添加为变体。

提示：拖入其他组件不会重置现有变体。

注意：当您将带有变体的实例添加到文件中时，Pixso 将导入该组件集中的每个变体。导入大型组件集将影响 Pixso 的速度和性能。

使用变体

配置变体

通过在右侧栏中配置属性和值来选择组件集中的其他变体。

• 选择实例。
• 在右侧边栏中查看组件集名称，下方是可以用于配置的属性和值的字段。
• 选择您想要更改的属性和属性值。
• 比如下图中，您可以将绿色的组件改变颜色属性，变成白色，或者将它的阴影属性改为「无」

在实例之间交换

使用变体时，您仍然可以进行实例替换，就像使用常规组件一样。

最有效的方法是使用实例替换菜单。实例菜单允许您从当前文件或任何启用的资源库中查找组件替换。

选择组件后，从右侧边栏中的属性面板访问实例菜单。

• 选择要更改的实例；
• 单击右侧边栏中的组件名称；
• 使用实例菜替换单选择另一个组件。

管理变体

当您向组件添加新变体时，Pixso 默认会在组件集中添加变体，它们之间的间距相等。如果放入组件集之前组件处于另一个布局中，放入之后 Pixso 会为组件集保留原来属性。

• 选择一个变体并将其移动到组件集中的新坐标。Pixso 将允许您将变体放置在组件集中的任何位置，包括在其他变体的顶部；
• 调整右侧边栏中组件集的尺寸，或在画布中调整其大小，就像使用常规画板一样；
• 您还可以通过右侧面板中的字段来调整变体之间的水平间距。

变体的属性和属性值

您可以自定义变体的属性，根据需要添加属性和值，并对其进行自定义以满足您的设计需求。您甚至可以将变体的属性和值映射到设计系统中的代码组件。

属性：可以理解为变体的特点，举个例子按钮组件的属性可以是type、size、state，或者它是否具有icon.

值：即属性值。例如： 状态（state）属性可以有default、hover、pressed和disabled值。

组件集中的所有变体拥有相同的属性和值，但每个单独的变体一定是属性和值排列组合的唯一值。

接下来让我们看一个例子！这里有一个按钮组件，它有 8个独特的变体。下图显示了该组件在组件集中的所有变体。

这里的按钮组件集中有2个属性，每个属性都有自己的一组值。

• button类型具有主要和次要2个属性值。
• 状态具有悬停、聚焦、默认和禁用4个属性值

为属性命名：

• 选择组件集。
• 在右侧边栏中的变体部分查看当前属性名。
• 单击以编辑属性名。
• 单击空白处完成重命名。
• 对其余属性重复此操作。

图层名称和语法

命名是创建和管理变体的一个重要方面。与 Pixso 中的其他任意命名的图层名称不同，组件集中的变体名称有专属的规则。它应该包含该变体的属性和值的信息。当您在图层面板中双击重命名变体时，您就可以看到相关信息。

变体名称遵循以下结构：属性1=值，属性2=值，属性3=值；例如：颜色=白色,形状=正方形,阴影=有

发布组件到团队资源库

如果您对已发布的样式或组件进行更改，这些更改只能应用到当前文件中的实例，但是如果您希望这些更新同步到团队里，您需要「发布更新」。

Pixso 会在左侧边栏的组件面板中的图标上显示一个蓝点，让您知道是否有更新需要发布：

• 单击左侧边栏顶部的组件面板打开团队资源库。
• 查看列表，里面详细列出了添加、修改或删除的任何样式和组件。
• 添加相关描述
• 单击发布按钮，Pixso 将显示一条通知以确认您的组件更改是否成功发布。