墨刀和Sketch擦出的火花

墨刀开发的Sketch插件终于从内测中脱壳而出了，可以将Sketch中的Artboard直接导入墨刀中，然后进行交互操作（页面跳转）的链接设置。

一时手痒，赶紧试了试，也把使用过程和感受分享给大家。（然而非要拖到周一才发）

使用条件

1）有Mac（因为Sketch这个小妖精，你懂的）

2）有墨刀账号

当前版本插件内不支持新建项目，所以新注册用户需要打开浏览器或者墨刀客户端，登录并新建应用后，才能进行上传操作

所以使用前先在墨刀账户里新建项目

使用过程

1）在Sketch中创建Artboard

Artboard数量没有限制，能用就行。不过记住一定得是Artboard.下图是两个Artboard例子。

2.）下载安装墨刀插件MockingBot.sketchplugin

无法在Sketch的官方插件页面--获取到，只能在墨刀官网获取

3）选中要添加的Artboard后，再选择墨刀插件导入

4）输入墨刀账号及密码登录

确保连接的是同一个账号,且Sketch会记录登录信息

5）选择要导入的墨刀文件

支持通过分类和搜索选择墨刀应用

6）导入成功！复制链接在浏览器进入

但我这边复制无效，不过也可以不用复制直接从浏览器中进入墨刀查看。

如果已经打开了项目，直接刷新页面就行

7）在墨刀中进入工作区且选择刚才将Artboard导入的应用

8）在界面右侧会出现刚导入的Artboard图片

此时，原来的Artboard都被处理成了一整张图片，原本的按钮或者图形都无法单独使用

在右侧的页面列表里，刚才导入的Artboard顺序和Sketch中是反着的

9）在左侧工具栏选择“链接区域”在页面上框选区域，然后拉取链接到相应界面

10）运行即可

其它说明

1. 墨刀也有客户端，使用的话和web端完全一样，也可以使用Sketch插件导入的Artboard做交互设置。

2. 墨刀的这个插件目前是V1.0，按官方说法后续应该会有升级。

3. 官方说：设计稿更新上传后，会覆盖原有设计稿，但不会影响已添加交互链接。经过测试，发现分这么几种情况：

3.1在原来的Artboard上修改后，且Artboard数量不变，重新导入后，修改过的Artboard会覆盖原来的，而原来的交互链接在原位置不会变。比如一个按钮上添加了交互链接，在Sketch中把该按钮的位置下调了，但导入后，交互链接区域还在之前的位置；

3.2 在原来的Artboard上修改后，且Artboard数量增加，导入后被修改的Artboard将之前的覆盖，且上面的链接还在，新的Artboard也会依次添加；

3.3 在原来的Artboard上修改后，Artboard数量减少，导入后被修改的Artboard将之前的覆盖，且还是之前的Artboard数量，在Sketch中删除的还在；

3.4 新建Sketch文件，新建Artboard，导入墨刀的同一个文件后，之前的Artboard还在，新的会依次添加。

上面叽叽歪歪一堆，简言之：墨刀中导入的Artboard只多不少，真是任性！

使用感受

1. 让我略感失望的是，Artboard导入墨刀后，被直接处理成了一张图片，原本的形状、图片都无法单独直接点击生成链接，这和我预想的不一样。这很像Axure里的“热区”元件。

好在后续版本会改进。会引入测距功能，开发者在原型上可查看所有控件参数——包括颜色、尺寸、边距等信息。而且会保留分层数据，让设计师完成更精细化的交互原型。

2. 该插件是打算将墨刀和Sketch的优势结合。Sketch作图和界面相当好上手且快速（尤其有各种强大的插件），而墨刀也是国内很优秀的一款快速设置页面交互并演示的产品。将二者结合起来，确实非常棒！期待后续版本更强大的功能。

3. 对于很多产品的交互设计，这都是一个很实用的插件。当然我们的目标也要限于做到页面跳转的交互、控件点击交互等，这已经足以帮我们快速查看交互设计、页面逻辑了。如果要做复杂的页面交互动效之类的，这个插件暂时能力不足。

END

不敢相信，我居然写了一篇正儿八经的教程推文。

不过估计你们也不一定看，看了也不一定下载，下载了也不一定试用，试用了也不一定继续用，继续用了……跟我就没什么关系了。

周一了。

往期推文（点击前往）

一本道 | 设计师专用成语

说来惭愧，我以前总是比较快

将细节进行到底 | 作品集

艺计回忆录 | 交互求职

清美交叉学科 | 考研得知道