最近突然鬼迷心窍,决定去研究一下如何写 Sketch 的插件。打算重新捡起一下从毕业就开始丢掉的代码开发之余,也希望产出的插件能为自己平时工作中稍作提效。
经过一系列的摸爬滚打,我已经成功锤出人生中第一个有实用性的插件,接下来,我还要学习更多,在此,希望以日记的形式,记录整个学习的过程。Sketch 插件开发相关的教程、资料非常地少,在此也希望能为后来者尽一份绵力。
Say Hello
Sketch 插件以 `.sketchplugin` 作为扩展名,使用 `CocoaScript` 作为开发语言。在开始编写你的第一个插件之前,建议先阅读:
在此之后,我们便可以尝试编写我们的第一个插件——Hello, world!
最简单的方式,是通过 Sketch 的 Run Script 功能来创建我们的插件:找到菜单 -> Plugins -> Run Scripts..

在打开的窗口中,输入:
console.log('Hello, world!')
点击运行后,喏,这就是最简单的 Say Hello 方式

相信好奇的你一定不满足于仅仅在 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

发表回复