logo
帮助文档/设计系统/组件/创建组件

创建组件

在设计中为了提高设计效率、保持设计的一致性,你可以将复用性高的元素创建成组件。例如:按钮、图标、输入框等。

如果你需要创建多个相似的组件,当同一组件有多个不同状态时,可以使用「变体组件」。它既能简化组件库,又能使每个人都更容易找到需要的组件。👉🏻点击了解变体组件

创建组件

你可以创建一个组件,也可以批量创建组件。

创建一个组件

  1. 1.

    选中要创建为组件的图层。

  2. 2.

    你可以通过以下方式创建组件:

    • 点击工具栏中的 '24_toolbar_component.svg' 按钮 。
    • 右键菜单中选择 创建组件
    • 使用快捷键
      • macOS:⌥ Option + ⌘ Command + K
      • Windows:Ctrl + Alt + K
  3. 3.

    创建完成,所选图层会被嵌套在一个组件容器中,同时图层面板会有紫色的图标以标识组件。 '创建一个组件.png'

在右边栏中,可以为组件添加描述信息。协作的设计师和研发工程师可以在「组件库面板」和「标注面板」查看描述。

批量创建组件

默认情况下,创建组件是将你选中图层创建成一个组件。你可以通过「批量创建组件」功能将多选的图层分别创建为组件。

  1. 1.多选要创建组件的图层。
  2. 2.点击工具栏中 '24_toolbar_component.svg' 按钮旁边的下拉箭头。
  3. 3.在下拉菜单中选择「创建多个组件」。
  4. 4.Motiff 妙多会将你选中的所有图层分别创建为组件。

删除组件

你可以随时删除组件母版,删除组件母版不影响该组件母版的实例。

  1. 1.选择要删除的组件母版。
  2. 2.点击 Delete

恢复组件

如果组件母版被删除,则可以使用该组件母版的实例恢复组件母版。

右边栏恢复

  1. 1.选中被删除组件母版的实例。
  2. 2.在右边栏中点击「跳转至组件母版」。
  3. 3.在恢复组件母版弹窗中,点击「恢复」按钮。

右键菜单恢复

  1. 1.选中被删除组件母版的实例,点击鼠标右键。
  2. 2.在右键菜单中选择「跳转至组件母版」。
  3. 3.在恢复组件母版弹窗中,点击「恢复」按钮。

组件和实例的同步

  • 未发布组件 你可以像编辑任何其他图层一样编辑组件母版,Motiff 妙多会自动将你对组件母版所做的任何修改同步到本文件中的实例。
  • 已发布组件 你对组件母版所做的修改也将立即同步到本文件中的实例。如果你希望将这些修改同步到其他文件中的实例,则需要将这些修改发布到组件库中,并在引用实例的文件中去更新实例才能同步组件母版的修改。

想要更改组件的位置?你可以在文件和库之间移动已发布的组件。