组件属性

组件属性允许设计师定义组件中可以更改的部分。所有可编辑的属性集中在右边栏展示，协作者可以轻松编辑带有组件属性的实例。

Motiff 妙多支持四种类型的组件属性：变体属性、布尔属性、实例替换属性和文本属性。

• 变体属性：适用于创建不同尺寸、状态或颜色的组件。比如，创建一个具有不同状态的按钮。
• 布尔属性：适用于需要显示或隐藏某个图层，或在两种状态间切换。比如，包含图标的按钮。
• 实例替换属性：适用于需要更换图标、图片或其他组件的场景。比如，更换按钮内部的图标。
• 文本属性：用于标记可编辑的文本内容，在右边栏快速修改文本信息。

在示例中，一个按钮的变体组件有 24 个变体，具有 2 种类型（主按钮和次按钮）。每个都有 4 种状态（默认、悬浮、点击和禁用）。此外，按钮图标有两个位置（左边和右边）。

而使用组件属性，仅需创建 8 个变体。

变体属性

变体属性可以让你将相似的组件组织到一个容器中，便于管理不同状态的组件。

适用于创建不同尺寸、状态或颜色的组件。比如，创建一个具有不同状态的按钮。

布尔属性

布尔属性就像一个开关，只有开和关两种状态。

适用于需要显示或隐藏某个图层，或在两种状态间切换。比如，包含图标的按钮。

通过组件的子图层创建

1. 1.选中组件或变体组件中的子图层。
2. 2.点击右边栏「图层」模块右侧的 。
3. 3.输入属性名称并设置默认值（例如：按钮图标，展示）。
4. 4.点击「创建属性」。此时右边栏的「图层」模块会出现对应的属性。

通过组件创建

你需要先通过组件创建布尔属性，再选择子图层应用该属性。

1. 1.选中组件或变体组件。
2. 2.点击右边栏「组件属性」模块右侧的 ，选择「布尔」。
3. 3.输入属性名称并设置默认值，点击「创建属性」。此时右边栏的「组件属性」模块会出现对应的属性。
4. 4.选中对应的子图层应用此属性。点击右边栏「图层」模块右侧的 ，选择对应的属性。
5. 5.此时右边栏的「图层」模块会出现对应的属性。

实例替换属性

实例替换属性允许你将嵌套的实例直接展示在右边栏，便于协作者快速进行切换。

适用于需要更换图标、图片或其他组件的场景。比如更换按钮内部的图标。

通过组件的子图层创建

1. 1.选中组件或变体组件中的嵌套实例。
2. 2.点击右边栏实例模块中的 。
3. 3.输入属性名称并设置默认值。
4. 4.此外，可以选择「首选值」设置默认的切换范围，便于使用者快速切换。
5. 5.点击「创建属性」。此时右边栏的实例模块会出现对应的属性。

通过组件创建

你需要先通过组件创建实例替换属性，再选择子图层应用该属性。

1. 1.

   选中组件或变体组件。

2. 2.

   点击右边栏「组件属性」模块右侧的 ，选择「实例替换」。

3. 3.

   输入属性名称并设置默认值。选择「首选值」，设置默认的切换范围，便于使用者快速切换。

4. 4.

   点击「创建属性」，此时右边栏的「组件属性」模块会出现对应的属性。

5. 5.

   你需要选中对应的子图层应用此属性。点击右边栏实例模块右侧的 ，选择对应的属性。

   

6. 6.

   此时右边栏的实例模块会出现对应的属性。

选择「首选值」

实例替换属性的「首选值」功能允许你自定义一个替换的列表。使用者能够快速找到合适的替换实例，提高设计效率。

你可以通过以下方法为实例设置「首选值」：

1. 1.打开「编辑实例替换面板」。
2. 2.点击「首选值」右侧的 。
3. 3.在组件库菜单中，选择你想添加为首选值的实例。
   • 排序：选择一个或多个实例，拖动到目标位置，可以更改实例的展示顺序。
   • 移除：选择想要删除的实例，点击该实例右侧的 。

文本属性

文本属性用于标记可编辑的文本内容，便于快速修改组件中的文本。

图层创建文本属性后，使用者可以在右边栏或在画布上编辑文本内容。

通过组件的子图层创建

1. 1.选中组件或变体组件中的文本图层。
2. 2.点击右边栏「文本」模块中的 。
3. 3.输入属性名称并设置默认值。
4. 4.点击「创建属性」。此时右边栏的「文本」模块会出现对应的属性。

通过组件创建

你需要先通过组件创建文本属性，再选择子图层应用该属性。

1. 1.选中组件或变体组件。
2. 2.点击右边栏「组件属性」模块右上角的 ，选择「文本」。
3. 3.输入属性名称并设置默认值，点击「创建属性」。此时右边栏的「组件属性」模块会出现对应的属性。
4. 4.你需要选中对应的文本图层应用此属性。点击右边栏「文本」模块中的 ，选择对应的属性。
5. 5.此时右边栏的「图层」模块会出现对应的属性。

简化实例

Motiff 妙多支持「简化实例」功能，选中实例后，右边栏仅展示组件模块，协作者无需关注其它属性。

你可以通过以下方法简化实例：

1. 1.

   选中组件或变体组件。

2. 2.

   在右边栏点击组件名称右侧的 。

3. 3.

   在「组件设置」面板中，勾选「简化实例」。

   你可以对组件添加描述，便于协作者了解组件的使用场景等信息。点击了解「为组件添加描述」相关功能。

展示内部实例的组件属性

在设计系统中，组件嵌套的情况普遍存在。Motiff 妙多支持「展示组件属性」功能，便于设计师选中组件时可以直接编辑内部嵌套图层的属性。

比如，创建一个卡片组件时，将内部嵌套的头像、按钮设置「展示组件属性」。引用该组件时，仅需选中最外层容器，右边栏会展示嵌套图层的所有属性，无需再依次选中每一层的实例进行编辑。

将光标悬停在右边栏的属性上时，Motiff 妙多会在画布区使用颜色框突出显示使用该属性的图层。

操作步骤

1. 1.选中包含嵌套组件的组件或变体组件。
2. 2.点击右边栏「组件属性」模块右侧的 ，选择「内部实例的属性」。
3. 3.勾选需要在最外层容器展示的实例。
4. 4.此时右边栏的「组件属性」模块会展示内部实例。

管理组件属性

调整排序

默认情况下，将按照「变体」、「布尔」、「实例替换」、「文本」的顺序展示组件属性。

其中变体属性显示在其他属性的上方，你可以调整多个变体属性之间的顺序，也可以调整布尔、实例替换和文本之间的顺序。

1. 1.选择一个或多个属性。
2. 2.拖动到目标位置可以更改。

编辑属性

1. 1.选中已创建组件属性的组件或变体组件。
2. 2.光标悬停在属性上，点击右侧的 。
3. 3.可以更改「属性名」和「属性值」。

删除属性

1. 1.选择一种或多个属性。
2. 2.通过 或 Delete 将选中的属性删除。