设计师编程指南之Sketch插件开发 1
发现网上关于sketch插件开发的指南太少了，而且都不一定可以成功运行，于是我就写了这个系列的文章：
1
我们需要了解的语法特点
sketch 是基于 CocoaScript ，支持在 JS 中调用 objective-c 的方法。我们需要了解一些 objecttive-c 的一些语法特点。
Objective-C 最大的特色是承自 Smalltalk 的消息传递模型 message passing 。C++ 里，调用一个方法的语法如下：
obj.method(argument);
Objective-C 则写成：
[obj method: argument];
下面举个 sketch 里的例子，比如: MSDocument 的接口 askForUserInput: initialValue:
OC 写成:
[doc askForUserInput:@"Enter your pages" initialValue:@"default"];
Cocoascript 写成:
doc.askForUserInput_initialValue("Enter your pages", "default");
当然 Cocoascript 里也可以直接写成 OC 的形式。这边推荐直接写成 OC 的形式，以区别于纯 js 的方法。
2
sketch 的主要对象
所有的关于 sketch 对象的操作，都是通过 context 来的。context 的document 对象，oc 对应的是 MSDocument 对象 。我们可以通过 log 命令打印出来查看。
var doc = context.document,
plugin = context.plugin,
command = context.command,
page = doc.currentPage(),
artboards = page.artboards(),
selectedArtboard = page.currentArtboard(),// 当前被选择的画板
selection = context.selection; // 被选择的图层
log(doc)
打开 sketch 里的 Plugins --- Run Script ，然后在里面贴上上面的代码按一下右下角的 Run 按钮。
3
sketch 原生的对象方法清单
看到一个优秀的 IOS 的 APP ，想了解其实现原理，这个时候就要通过逆向工程去查看APP的源代码，学习作者的核心思路了。IOS 逆向工程有个比较好用的工具 class-dump 。它利用 Objective-C 语言的 runtime 特性，将存储在 Mach-O 文件中的头文件信息提取出来，并生成对应的 .h 文件。尤其是做 sketch 的插件开发，由于官方文档写得比较粗糙，必须要了解 sketch 代码中已经写好的一些方法才能更好地进行开发。 Github 上有已经 dump 出来的 sketch 头文件信息，地址：
https://github.com/abynim/Sketch-Headers
当然，也可以自己用工具从本地 dump 一份出来。
4
动手实验
这部分当然是本文的重点啦。新建一个 sketch 文件，先把 show page list 打开，如下图。然后进入 Run Script 界面。
然后我们输入代码,这是一段新建 n 个页面的代码：
var doc=context.document;
var num=[doc askForUserInput:@"输入需要创建的页面数量" initialValue:@"5"]; log(num);
for(var n=0;n<num;n++){
var newPage = doc.addBlankPage(); newPage.setName(n.toString()); };
看看左边的 page 列表的变化，是不是很高效？下面，再试试复制当前页面为 n 份的代码：
var doc=context.document, page=doc.currentPage();
var num=[doc askForUserInput:@"输入需要创建的页面数量" initialValue:@"5"]; log(num);
for(var n=0;n<num;n++){
var newPage = [page copy];
var index=[[doc pages] count];
var newName=page.name()+'_'+index; [newPage setName:newName] [[doc documentData] addPage:newPage] [doc setCurrentPage:page]
};
本篇作为 sketch 插件开发的开篇，暂时写到这里。怎么样？接下来将陆续介绍 artboard、symbol、group、layer、style、font、image 等的代码，有了代码加持的画图效率是不是可以提高 n 倍？
————开个脑洞，甚至可以接入搜索引擎、图片素材库，生成 html 页面等等，也是可行的。
*
知识星球
更多sketch插件的开发，可以在知识星球交流。还包括：
1 看到一些好案例，关键技术解决方案，写出文章又不成体系，发星球;
2 我会在知识星球发一些非常机密的研究心得;
3 一些非常有技巧的知识，给付费用户;
4 公众号的迭代版本，针对文章发更为升级、核心的内容。
5 当然，还有资深的专家在星球里。
*
热门文章
*
关于公众号：
本公众号定期更新人工智能&设计&科技内容。
谈点设计，敲点代码，偶尔创作点人工智能实验产品。
码字不易，开启新的打赏方式：