高手进阶技巧！全方位深入理解 Sketch 库（上）

 Sketch 47 中引人的库（Library）功能，这次新改变了设团队作方式流程。库设团队维护一设系统或风格指南，起到非常重的作用，可以给团队加高效作体验。

越来越多设计师和团队使用 Sketch 作为主要设计工具，益于众多插件和第三应用，即使在没有技术支持情况下也能解决些常见问题。然而引入大功能时，也会带来很多坑。事实上有些 UI 设计团队领导，是不太注法和流程，这团队选择 Sketch 大多是为了更快速出图，在这样团队设计师要艰辛地踩各坑。

作为一个写 Sketch 插件的计，非常能理解这些问题给队效率带来的响。在 Sketch 47 刚发布，便开始在的 Automate 插件中增加一些库相关的功能，久而久之便对库有了比较深入的了解。这篇文章主要介绍高的息，可以帮助计队更好的使用 Sketch 库，并解决一些复杂问题。如果需要基础教程，请查阅官方文档或其网上的一些文章。

一系列的文章分为上中下三部分，上部主要介绍基础概念和库的托管方案；中部主要针对库管理者，内容包括组件命名、库护等；下部则是针对团中相对高级的库管理者，使用脚决一复问题。

一、基础概念

1. 模版库

模版（Template）库（Library）本质上并无别，都是一个普通的 Sketch 文件，除了低版本（低于 43）Sketch 建立的文件无法直加入库面板中外，任何带有组件（Symbols）的 Sketch 文件都可以直加入库面板。

有时模版特指被加到菜单 「New From Template」 下或显示在 Welcome 界面上的文件。以使用 「Save as Template…」 菜单或者直接将文件复到 「~/Library/Application Support/com.bohemiancoding.sketch3/Templates」 文件夹内。

库则是指被添加 「Preferences – Libraries」 面板下的那些文件，它没有统一保存的地方。

在没有引入库功能，计队使用模板文件来协作，但 Sketch 并未提供一种文档内容更新机制，只能依赖一些插件将文档通过组件名称匹配来替换成另一个文件的组件，但这对组件图层命名要求严格，也没有可视化对比。库功能解决了这种公共内容更新或替换的需求，这一点在队协作中非常重要。

库并没有取代模版的意思，从界面上只能访问到库文档内的组件，也就是库文档内的画板（Artboard）或不在画板内的图，对库际上没有太用处的，有库是程序生成的，种情况组件在画上的位置也没有太讲究。模板文档则带有一例或说明，模板内的组件也以替换成库的外部组件，模板也以为库提供直观的检索、示例演示或者为一个快速搭建界面的框架。

2. 库的类型

内置库（Internal Libraries）是指随 Sketch 自带的库，目前就是 iOS UI Design 个库，文件存在 「/Applications/Sketch.app/Contents/Resources/libraries/iOS UI Design.sketch」，果需要研究个文件需要复到其他地方打开。

户库（User Libraries）就是户从库面上的 「Add Library…」 按钮上添的库。

 Sketch 49 以后，增加了一种新的类型，远程库（Remote Libraries），内置的需下载的 Apple iOS UI 也属于这类型。目这功能仅了从 Sketch Cloud 添加库，用户需注册 Sketch Cloud 传文件，分享页面链接给使用者，使用者页面的 「Download – Add Library to Sketch」 单添加到库面板。

这三类型在库板上没有明显视觉区分，可以简单地过右键菜单（或库板左下齿轮图标下菜单）来确认属于哪类型。内库法被移除也法打开，可以被禁用；远程库法使用 「Show in Finder」 和 「Open …」菜单，来自 Sketch Cloud 远程库会有 「View in Sketch Cloud」 菜单；用户库则都有这三个菜单。

这三种库在使用上并没有非常大的差别，只是添加方式不同。来内置库和远程库的组件，使用者无法在库中修改，双击这种组件只有一个选项 「Unlink from Library」。

而来用户库的组件，则有个选项 「Unlink from Library」 和 「Open in Original Document」。可以这理解远程库适集中管理的库，用户无法修改而统一由管理者修改，而用户库则适需要协作修改的库，实际上用户可以操作的只有用户库和远程库种，下文会详细说这种类型的库如何同步。

3. 组件实例、组件母版与库组件

组件母版（Symbol Master）是特殊画板，能够引出另个分身称为组件实例（Symbol Instance），分身有单图层，可能会有不观。组件实例在图层板有两图标，旋转箭头图标表示文档内实例，而索链图标则表示来自库实例，这来自库实例法在前文档改母版，很多情况称为库组件（Library Symbol）。

为了区文档上组件母版和库组件，文档上所有组件母版合称为内部组件（Local Symbols），文档上所有库组件合常叫部组件（Foreign Symbols）或导入组件（Imported Symbols）。

从插入组件的菜上，只能显示出库文档内的所有内部组件，文档内的外部组件是不会出现在菜上的，所以通常情况下作为库的文档都是组件母版。使用了嵌入另一库组件的库组件，如果没载入内嵌库组件所属的库，在 Overrides 中把组件更换成其组件，就只能重新插入来恢复之前的状。在 Sketch 49 之后，未被使用的外部组件在文档保存会被动删除，为了保留外部组件可以插入画布内。

4. 库组件如何从关的库更新

在介绍库更新机制前，需要简了解下 Sketch 内部是如何识别对象的。在 Sketch 中创建的任何对象，新建一个文件、插入一个图层、创建一个式等等，Sketch 都会给这些对象添加唯一标识 UUID。图层上的 UUID 这称为图层 ID，组件上的 UUID 称为 组件 ID（SymbolID），组件母版和组件实例都即有图层 ID 也有 组件 ID。ID 息在界面上没有体现，计使也不会用这些息，它是作为 Sketch 文档结构上使用的。

库组件并非的链接，你将包含外部组件的文档给其他人，并不出现坏链导致文档错误，际上数据存在当前的文档中，所以使用外部组件不使文档积减小，它的优势在更新机。库组件也没有存库的路径，它录库名、库 ID 和组件原始 ID（Remote SymbolID， 组件在它的库中的 SymbolID），库的名称显示在属面板和外部组件管理面板上，库 ID 没有在界面上现出来。

库组件自更，实就是 「库列表」 – 「库 ID」 – 「外组件原始 ID」 这者的联。通过库组件的库 ID，从库面的列表中，按照添的时间从到旧依次检索有未被禁的、链接好的库，直到匹配到库 ID ，然后查该库件是否有与库组件 SymbolID 匹配的组件，如果包含并且容有差异就醒更，更的过程实际上就是容替换。如果这个库件没有与之匹配的组件，还会接着从另一个相同库 ID 的库件检索。如果某个环节没有结果，这个组件就会有示更。较棘手的问题是目前界面并没有地方可处这些系，当这种隐藏的系链现问题，就需要借助特殊的插件，或通过在 「Plugins」 – 「Run Script…」 行特定的脚本来查看信息或处联。

二、开始使用库

1. 建立库

任何 Sketch 文件以当库，对独立的设计师的库管理者，以比随意的创建库，出现情况的能并不大。主要在团协中，库管理者就需要上文的库类型和库组件更新原理，并且清晰库和组件的联系，根据自身团的具情况选择哪一种类型的库，用个库文件还是一个库文件，每个库文件里有哪内部组件。

在 Sketch 中创建组件是可现重复的组件 ID 的，大分问题在库 ID 的管上。从 Sketch 创建一个档，就赋予档一个 ID，这个在这个档被作库时就是库 ID，如果在 Finder 或他非方式复制件，就会导致库 ID 是相同的，如果直接在这个库里的组件母版修改容，会现相同 ID 的库里面包含相同 ID 的组件，当这两个件同时被到库列表中，就会可现库组件联错误或无法更。确保库 ID 重复的方法就是尽量建档。

2. 将组件转为库组件

载入有相的库之后就可把之前的件转换为的外组件形式的档，现在已经有成熟的插件可处这个艰巨的工作。

如果之用的模版文件方式设，且库也原的模版文件，那么这种况下库内的组件 ID 设文档的组件 ID 可以匹配的，可以使用基于 ID 的方式替换。Automate 插件内的 「Symbol – Change Symbols to Library Symbol Base Symbol ID」 功能，选择内部组件实例或组件母版之后，可以批替换制库的相同组件 ID 的库组件。

如需要用到基于组件名称批量替换可以使用以下插件。

• Library Symbol Replacer
• Symbol Swapper
• Move to library

即 ID 也名情况，没法批量处理了，可以使用 Automate 插件内 「Symbol – Replace Symbol with Library Symbol」 功能逐个替换，在替换列表，会把相尺寸或 ID 组件前。

如库组件已经做了较大改变，根据 ID 或名称已经法到理想效，可以在组件右键菜单选择合适库组件替换，最后再使用 Automate 插件内 「Symbol – Remove Unused Symbols」 删除多余组件。

3. 从库步图层和文本样

目前 Sketch 界显示出库文档内部组件，有些保存在库文档资，例如图层样、文本样，甚至色、渐变和图片填充，需要依靠插件步至新文档。

Automate 插件包含从任 Sketch 文件或库倒入文档资源和式的功能。色彩、渐变和图片填充等文档资源是根据内容添加的不会导致列表重复，而式则更加对象的 ID，同 ID 项的式属性会被更新。

Automate 插件样式相关的功能下：

• Style – Import Document Assets from Sketch File，从 Sketch 文件导入色彩、渐变及图片填充等资源。
• Style – Import Text Styles from Sketch File，从 Sketch 文件导文样式。
• Style – Import Layer Styles from Sketch File，从 Sketch 件导入图层样式。
• Library – Import Document Assets from Library，从库导入色彩、渐变及图片填充资源。
• Library – Import Styles from Library，从库导入文本和图层样。

4. 库的托管方案

团队协作中，库管者需要把库件分发给他设计师，设计师需要把库件都入库面，有时还需要设计师配置一些基础设施，如某些 Sketch 插件、字体或者某些第方工具。之后库管者需要有一个机制来通知设计师更库件或自同步。

以下列出一些从低级到高级的方案，可以根据自身团队的况选择合的方案。对库由专人理的团队，了防止设师无意中修改库文件，尽求所设师关闭 Sketch 的自动保存功能。如果库需接受多人协作，则选择版本控制系统方案。

5. 人同

人同指利用邮件或某些传输方式，把库文件打包发给所设师的方法，这一种非常低端的不推荐的方案。实中很多内设团队，可能都会采用这种方案，库的理者问题需注意下，每次发文件时给文件加版本，后记得抄送领导。

上文已经了解到组件更新制，所以设计师收到带不版本号库文件，可以不把这些文件改成前使用名，需要接加入库即可，旧版文件可以从列表上删除或者禁用，保留在列表也不会影响组件更新。

6. 使用链接服务和共享电脑步

macOS 可以连接到些特殊服务和共享电脑，例如 Windows / macOS 共享文件夹、NAS 共享磁盘、FTP 和 WebDAV 等等，详细支持功能可以查看 Apple 官支持文档。搭这服务法也比较简单，可以根据实情况选择。

使用这种方案来同步，没有把库文件发给所有计，实际上所有的计是从同一个共享磁盘目录载入库文件的。这种方案库文件名称必须是固定的，可以通过动或动备的方法记录版本。共享磁盘和 FTP 可以置权限，这可以避免计修改库文件，其类型服可能要考虑其用户写入权限问题。

设计师和库管理者通 Finder 的菜单 「前往」 – 「链接服务器…」，挂载磁盘或链接服务器，不同类型服务的地址，请参考 Apple 官方支持文档。

要决每次开机手动链接服务器的问题，以设置开机自动链接。个设置需要在链接服务器时，勾选 「在我的钥匙串住此密码」。

在 「系统便设置」 – 「用户与群组」 ，选择当前用户的 「登录项」，并将相应的网络硬盘加列表中并持选中。

库管理者将库文件放到网络文件夹中，设计师立即收到更新，此方案需要注意，权问题、版管理和备份等。

7. 使用云盘同步

使用类似 iCloud Drive，Google Drive，Dropbox 等云盘同步，个方案需要考虑改服务的网络问题，是否以文件共享，是否有客户端或系统集成的文件同步，是否有权控等等，最重要的是文件需要同步到地。果处密考虑，则能需要在内网自己搭建例 ownCloud / NextCloud 之类的云盘程序。某云盘服务提供 WebDAV 功能，则以使用上一种方案。

此方案需要注意权限问题、版本管和备份等问题。

8. 使 Sketch Cloud 同步

在 Sketch 49 后将 Sketch Cloud 上的件作为库添，库管者将件上传至 Sketch Cloud，然后通过开放档或着使邮件分享给他设计师，设计师将件添到库之后，库管者每次更件之后，Sketch 会自后台载，他设计师就会收到更醒。

设师法修改库内，自云端的库文件临时存储 「~/Library/Application Support/com.bohemiancoding.sketch3/Libraries」 目录下，临时打可以库面板列表右侧的 QuickLook 图标打预览窗口，再从预览窗口右角的 「Open With Sketch」 按钮打。这文件的修改会被网络的版本自动覆盖。

此案依赖网络，并会涉及项目保密性，适合开放项目，也需要注意版本管理和备份等问题。

Sketch 官方提供了个示例文档。

• Elements UI Kit 添加到库
• macOS UI Library 添加库

9. 使用 Abstract

Abstract 目仅支持 Sketch 文件的版本控制，他包装了一些 Git 版本控制系统的概念流程，提供了一套设师友好的文件新记录、分支、合并功能，采用这方案需所团队员都依赖于 Abstract 平台，并且一套特殊的作方式，需付费能通团队协作功能。类似的服务还 Kactus  Plant，通常都需付费的，这种方案合需多人共同理库文件的况。

10. 使用版本控制系统同

使用版本控制系统同库文件，需搭建一版本控制系统服务器，这些公司的可能已搭建好了，些则付费使用一些线服务。另外求团队中的设师比较了解版本控制系统客户端的操作。虽然技求较高，但可以很好的解决权限控制、保密性、版本理问题。

在小型团队或者开放团队，些免费 Git 服务也可以考虑，例如 GitHub、GitLab 或 BitBucket。这些开放项目没有空和团队限制，GitLab 和 BitBucket 免费用户可以使用 5 团队，设计师使用例如 Cornerstone（SVN）、Versions（SVN）、Sourcetree（Git）、Tower（Git）等客户端来接收更新提醒，库管理者也使用客户端上传文件，并在 Web 端控制权限。Web 端管理程序，附带些文档管理、分支管理和问题跟踪等功能，有些甚至可以处理些自动化任务。

利用 GitHub 或 GitLab 等常见的版本控制，通过脚本解 Sketch 文件，按照定的 Git Flow 工作，工编辑 JSON 的方式也可以并文件或解决冲突，只是对库管理者术要求较高。

11. 托管同步

官方工作人员称此功能尚未完善和对外开放。目前从 Apple UI Design Resources 下载的 Sketch 文件就是链至 Apple 官方托管的库，需要从库面板下载内置的 Apple iOS UI。库更新由 Apple 官方维护，使用者可以动收更新。

12. 使用 Sketch 插件同步

Sketch 插件有后下载和提示更新功能，如果将所有的库文件一起包家开发的 Sketch 插件内，也可以做通过插件的更新机制来同步库文件，或通过插件下载库文件，并通过插件动将文件载入库面板中，保证队中所有计使用的文件版本都是一致的。

种方案缺点是对技术要求高，除自动更新和加载库证设计师文件一致，当团中有成和库文件，种方案的优点就更加明显。其他方案将文件分给其他设计师的程出现一问题，例某设计师并没有在 Sketch 中载正确的库文件，或者没有及时更新，另外有设计没有安装正确的字等等问题，以在插件中决。另外插件还以集成一针对团业务特殊需求或是脚手架的功能，用来提高整的工效率。

13. 选择适合团的方案

下表列出各种方案的工方式的简单对比，管理者的操从简单依次至复，从低级至高级。

团队中采用哪种方案托同 Sketch 库，很程度取决于团队员的技水平文化环境。比如团队里的设师很难接受新事，或者设部门费预算，公司不允许将作内传到网络，团队里的设师都不会 Git ，尽如此建议还尽采用较高级的方案。也可以同时采用多方案，让设师根据自身况选择。