✏️ 备注:我们的 Adobe XD 集成还处于公开测试阶段,因此我们没有完全支持 Adobe XD 组件库文件。

组件库是一种具有控件字符样式图层样式的、可以共享的 Sketch 文件。你可以通过链接的方式在整个组织项目中共享组件库,也可以使用组件库来保持单个项目的一致性。


如何新建一个 Sketch 组件库

The basics- Adding files & libraries.mp4 (13.44MB) 创建一个 Sketch 组件库:

  1. 打开 Abstract 桌面端应用程序。
  2. 选择你要创建组件库项目
  3. 从左侧面板中选择主线
    • 也可以直接在你的分支中创建一个组件库。在分支组件库合并到主线之前,你不能链接分支组件库
  4. 选择顶部的 FILES 选项卡。
  5. 点击 ADD FILE
  6. 点击 Create Sketch File as Library…
  7. 命名并新建你的组件库文件。

组件库的 Sketch 图标将由橙色变为粉色。Abstract 也会将他的更改保存为提交
备注:如果你的组件库文件不包含任何控件组件库将不会出现在 Sketch 中。


如何添加一个现有的 Sketch 组件库

image.png

在导入 Sketch 组件库之前,请先将团队的控件进行整合和分类。我们已经看到有团队成功地将组件库中的控件拆分为平台特定的资产、品牌和 UI 资产文件。

导入 Sketch 组件库:

  1. 打开 Abstract 桌面端应用程序。
  2. 选择你要导入组件库项目
  3. 从左侧面板中选择主线
  4. 选择顶部的 FILES 选项卡。
  5. 点击 Add File > Import Sketch File as Library Import Sketch File (如果是个新项目)。
  6. 选择你要导入的组件库文件。
  7. 如果是新项目,你需要右键添加的文件,选择 Use as Library…

如何将现有的 Sketch 文件转换为组件库

如果你已经在你的项目中添加了一个 Sketch 文件,你可以将其转换为组件库
将现有的 Sketch 文件用作组件库:

  1. 打开 Abstract 桌面端应用程序。
  2. 选择你要创建组件库项目
  3. 从左侧面板中选择 Branches
  4. 选择包含要转化的 Sketch 文件的分支
  5. 在文件名出右击。
  6. 选择 Use as Library…

组件库的 Sketch 图标将由橙色变为粉色。Abstract 也会将他的更改保存为提交


如何不再将 Sketch 文件用作组件库

如果你不再想把文件作为组件库文件使用,请按照将 Sketch 文件转换为组件库文件的步骤,取消勾选 Use as Library…


组件库高级设置

  • 如何设置你的设计系统 [ 即将推出!]