你是否遇到过这样的情况,在做设计时,往往会对设计稿进行不停的修改,每次修改完都会将文件另存为新的文件。随着时间的推移,文件越来越多,你可能也会忘记每次修改的具体内容是什么了。这个时候,版本控制就派上用场了。Abstract 就是一个借助 Git 对 Sketch 文件进行版本控制的软件,这次介绍的这个,已经不是严格意义上的 Sketch Plugin 了。

在开始正式内容之前,还是简单介绍一下 Git,Git 是目前世界上最先进的分布式版本控制系统,它更多的是出现在程序员的世界中。与之相关的最出名网站就是 GitHub,它是一个通过 Git 进行版本控制的软件源代码托管服务网站,许许多多知名的开源项目都在上面。

PS,Sketch 本身其实也是有版本管理的功能的,只不过功能并没有那么强大。打开 Sketch,点击 File -> Revert To -> Browse All Versions...,就可以看到自带的版本管理功能了。

Sketch 自带的版本管理功能与 Abstract 相比:

  1. 每次保存操作都会产生一个记录点,不能自己控制只产生重要的记录点;
  2. 无法对每次记录点提交文字信息,在查看历史版本时无法快速得知这次提交的改动;
  3. 在多人协作方面,没有很好的支持。
Sketch 自带的版本控制功能

安装

Abstract 官网

  1. 进入 Abstract 官网;
  2. 点击 Sign Up Now 进行账户注册;
  3. 选择 Free Plan;
  4. 下载 macOS 版本 app ;
  5. 安装下载好的 app。

使用方法

创建项目

打开已经安装好的 Abstract,登录之前在网站上注册的账户,就可以开始使用 Abstract了。登录成功后,我们要创建一个项目,才能正式开始我们的版本控制之旅,点击右上角的 NEW PROJECT,在出现的弹窗中输入相应的信息,点击 CREATE PROJECT,就完成项目的创建了。
创建项目

初始化项目文件

成功的创建了项目之后,就能在 Abstract 的主页看到我们刚才创建的项目了。点击创建的项目,就可以进入项目的主页了。现在这个项目是一个空的项目,我们可以导入一个之前已经存在的 Sketch 文件,或者通过 Abstract 新建一个 Sketch 文件来初始化我们的项目。点击 IMPORT SKETCH FILE,然后选择相应的 Sketch 文件,就可以导入我们的项目了。或者点击 CREATE SKETCH FILE,然后输入要创建的文件名,就可以通过 Abstract 新建一个 Sketch 文件了。
项目主页

创建 Branch & 开始使用 Sketch 文件

Branch 是 Git 中的一个基本概念,其实就是分支的意思,每一个分支都相当于一个平行宇宙,他们互不干扰,当然你也可以让两个平行宇宙合并,这个是我们后面要说道的 Merge 操作了。

我们的项目初始化之后,Abstract 就会为我们创建一个默认的 Master Branch,由于 Abstract 并不允许我们在 Master Branch 上面修改,所以我们要新建一个 Branch,才能开始使用 Sketch 文件。点击右上角的 NEW BRANCH,才弹窗中输入新 Branch 的名称,就创建了好了新的 Branch。然后点击 EDIT IN SKETCH,就可以打开 Sketch 文件了。如果你在没有创建 Branch 就打开 Sketch 文件,Abstract 也会提示你要创建新的 Branch 才可以,不然你的修改不会被记录到版本控制。

Abstract 项目主页

PS,当我们用 Abstract 管理 Sketch 项目后,我们只能够用 Abstract 来打开 Sketch 文件,才能正确的进行版本控制。

提交文件修改

通过 Abstract 打开 Sketch 文件后,就可以像之前一样使用 Sketch 了。当你对文件进行了修改之后,并觉得已经满意了,可以像原来一样要保存文件时,就可以用 Abstract 来提交这次的文件改动了。

Abstract 打开 Sketch 文件下方会有对应操作框

点击 Sketch 界面下方的 Preview & Commit...,就可以提交这次的改动了。输入这次改动的相关信息,然后选择要提交的 Branch,点击 COMMIT CHANGES,就可以完成提交了。

输入信息提交改动

合并 Branch

程序员使用 Git 的时,不同的 Branch 用了区分不同的状态,例如正在开发的分支,或者已经提交发布的分支。当我们想要把两个 Branch 合二为一的时候,就需要进行 Merge 操作了。当我们在 Abstract 打开的是非 Master Branch 时,点击右上角的 MERGE BRANCH,就可以进行合并操作了。
非 Master Brach 项目主页

文件回退

当你对于某次的修改不是很满意时,是不是很想坐时光机回到过去呢?Abstract 就可以做到这一点。在项目主页点击 COMMITS TAB,就能看到之前进行过的每一次修改。如果你想讲文件回退到其中的某一次修改,选中这个条 Commit,点击右边的 icon,就可以进行版本回退了。

将文件回退到之前的版本

总结

使用 Abstract 来管理 Sketch 的步骤,基本可以分为:
  1. 创建项目
  2. 创建新的分支并进行项目修改和提交
  3. 将已经满意的分支合并到主分支
  4. 如果有不满意的修改提交,可以回退到之前的版本

当你个人使用 Abstract 时,熟练使用这些功能已经可以满足你的版本控制需求了,当然 Abstract 还支持多人协作的功能,而且还能在上面进行留言讨论,只不过多人协助是要进行付费的。

Abstract 价格

Abstract 的订阅计划包括个人版和商业版,个人版分为两种免费版和 Pro 版本,商业版目前是有 Team 版本一种。

  • 个人版(免费)
  • 个人版(Pro)- 9美元/月
  • 商业版(Team)- 21美元/人/月

个人的 Pro 版本相比于免费版本,增加了储存容量,也可以和其他的 Pro 版用户进行协同工作。商业版则增加了更多团队管理的功能,例如成员管理、权限管理以及 Slack 插件等。

你知道吗?

通过上面介绍,也许你已经知道如何通过 Abstract 软件来使用 Git 管理你的 Sketch 文件了,但是,你有没有好奇过,为什么可以用 Git 来管理 Sketch 文件呢。

这个要从 Sketch 43 版本的一个更新点说起,在这个版本的更新中,有这么一条,「A new file format」,官方对于这个更新点的解释是,在 Sketch 43 版本之后创建的文件,并不能很好工作在之前的版本上。那么,这个新的文件格式的意义到底在什么地方呢?

在这个版本之后的 Sketch 文件,都是可以通过解压缩的方式,读取到 .sketch 文件中的内容的。

将 Sketch 文件解压缩

当我们把 Sketch 文件解压缩之后,我们就会得到一个固定文件目录的文件夹,而我们在 Sketch 中所做的设计,其实都在这个文件夹中,那么这个文件夹中到底是什么呢?其实里面都是 JSON 格式的文件和对应的一些预览图,我们可以很简单的使用文本编辑器来查看到 JSON 文件的内容。

使用文本编辑器打开 JSON 文件

其实我们在 Skech 中的所有操作,都变成了一行行的代码,现在是不是很能理解为什么程序员用来管理代码的 Git,可以用来管理 Sketch 文件了吧。

那么反过来,通过写代码是不是也可以完成 Sketch 设计呢?如果你有兴趣,可以去了解一下 Airbnb 发布的 React Sketch.app 哦。


更多 Sketch 使用技巧和实用插件推荐,欢迎前往少数派 探索 Sketch 专栏查看。