最近突然鬼迷心窍,决定去研究一下如何写 Sketch 的插件。打算重新捡起一下从毕业就开始丢掉的代码开发之余,也希望产出的插件能为自己平时工作中稍作提效。

经过一系列的摸爬滚打,我已经成功锤出人生中第一个有实用性的插件,接下来,我还要学习更多,在此,希望以日记的形式,记录整个学习的过程。Sketch 插件开发相关的教程、资料非常地少,在此也希望能为后来者尽一份绵力。

Say Hello

Sketch 插件以 `.sketchplugin` 作为扩展名,使用 `CocoaScript` 作为开发语言。在开始编写你的第一个插件之前,建议先阅读:

在此之后,我们便可以尝试编写我们的第一个插件——Hello, world

最简单的方式,是通过 Sketch Run Script 功能来创建我们的插件:找到菜单 -> Plugins -> Run Scripts..

在打开的窗口中,输入:

console.log('Hello, world!')

点击运行后,喏,这就是最简单的 Say Hello 方式

2018-09-04-19-31-28

相信好奇的你一定不满足于仅仅在 console 输出个 log,我们能不能——比方说在 Sketch 的画布中输出个 Hello world?当然可以!Sketch 提供了一些常用的  API 接口,比如  Text ,查阅文档后,只需要依葫芦画瓢,在输入框中键入

var document = require('sketch/dom').getSelectedDocument();    //获取当前选中的 Sketch 文件
var page = document.selectedPage;    //获取当前选中的 Page

var Text = require('sketch/dom').Text
var layer = new Text({
  //在 Page 中创建文字图层
  parent: page ,
  text: 'Hello, world!',
  alignment: Text.Alignment.center,

})

点击运行,我们成功地在画布中 Say 了个 Hello