设计师编程指南之sketch插件开发1

1,597 阅读4分钟
原文链接: mp.weixin.qq.com

发现网上关于sketch插件开发的指南太少了,而且都不一定可以成功运行,于是我就写了这个系列的文章:

我们需要了解的语法特点

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 的方法。

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 按钮。

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 一份出来。

动手实验

这部分当然是本文的重点啦。新建一个 sketch 文件,先把 show page list 打开,如下图。然后进入 Run Script 界面。

然后我们输入代码,这是一段新建  个页面的代码:

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  列表的变化,是不是很高效?下面,再试试复制当前页面为 份的代码:

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 等的代码,有了代码加持的画图效率是不是可以提高 倍?

————开个脑洞,甚至可以接入搜索引擎、图片素材库,生成 html  页面等等,也是可行的。

*

知识星球

更多sketch插件的开发,可以在知识星球交流。还包括:

1 看到一些好案例关键技术解决方案 ,写出文章又不成体系,发星球;

2 我会在知识星球发一些非常机密的研究心得;

3 一些非常有技巧的知识,给付费用户;

4 公众号的迭代版本,针对文章发更为升级、核心的内容。

5 当然,还有资深的专家在星球里。

*

热门文章

我们利用周末尝试了一次CO-CODING活动

全栈设计+编程的方法论,以“猜对联”小程序为例

*

关于公众号:

本公众号定期更新人工智能&设计&科技内容。

谈点设计,敲点代码,偶尔创作点人工智能实验产品

码字不易,开启新的打赏方式: