sketch插件时通过js来编写的,可以通过两种方式创建插件:
使用Sketch Plugin Manager skpm(官方实用程序)来创建,构建和发布Sketch插件。
通过自己直接组织所有文件或使用Rollup或webpack之类的模块捆绑器手动组织所有文件。为了快速入门,Sketch Plugin Manager提供了一组模板,用于不同类型的插件,包括数据供应商和使用Webview提供用户界面的插件。
1.使用 skpm
要求您需要npm安装才能安装skpmSketch插件及其任何依赖项。
安装 skpm
使用来安装Sketch Plugin Manager npm。npm install -g skpm
查看用法说明以查看所有可用命令。skpm --help
从模板创建
使用默认插件在磁盘上的任何位置创建一个新插件。skpm会自动将符号链接添加到Sketch插件安装文件夹,以使该插件在Sketch中立即可用。skpm create my-plugin
结果文件夹包含插件源和生成的Sketch插件包。更改文件夹结构时,请确保skpm在package.json必要时调整其中的设置。.
├── README.md
├── assets
│ └── icon.png
├── my-plugin.sketchplugin
│ └── Contents
│ ├── Resources
│ │ └── icon.png
│ └── Sketch
│ ├── manifest.json
│ ├── my-command.js
│ └── my-command.js.map
├── node_modules
├── package-lock.json
├── package.json
└── src
├── manifest.json
└── my-command.js
文件夹 描述
*.sketchplugin 由skpm构建过程生成的插件包。不要编辑此文件夹中的任何文件,任何更改都将被下一个版本覆盖。
assets 应该与插件捆绑在一起的所有资源文件的文件夹。要使用其他路径或添加文件夹,请在中修改skpm.assets设置package.json。src 包含清单和要使用Webpack捆绑的脚本的源文件夹。
切换到Sketch并从“插件”菜单运行插件。
新创建的插件可在Sketch中立即使用
快速提示:有关其他模板,请参见skpm官方文档。
构建插件包
对插件源进行更改后,需要重新构建.sketchplugin捆绑软件。用src/my-command.js以下脚本替换的内容。import sketch from 'sketch'
export default function() {
const doc = sketch.getSelectedDocument()
const selectedLayers = doc.selectedLayers
const selectedCount = selectedLayers.length
if (selectedCount === 0) {
sketch.UI.message('No layers are selected.')
} else {
sketch.UI.message(`${selectedCount} layers selected.`)
}
}
使用构建插件npm。
npm run build
要验证插件是否已更新,请创建或打开Sketch文档并选择一些图层。当您从“插件”菜单再次运行该插件时,现在应该看到带有选定层数的消息。快速提示:改为通过运行更改后自动重建插件npm run watch。
2.手动创建sketch插件
如果您更喜欢使用自己的方法来捆绑插件,则必须确保正确定义清单,并包括插件运行所需的所有脚本。例子
该示例插件包含两个JavaScript文件。command.js定义在Sketch中选择插件的菜单项时调用的处理程序,并shared.js包含command.js使用导入的代码require。.
└── Contents
├── Resources
└── Sketch
├── command.js
├── manifest.json
└── shared.js
manifest.json
清单文件告诉Sketch如何从“插件”菜单中运行插件。有关选项的完整列表,请参见清单文档。{
"author": "",
"commands": [
{
"script": "command.js",
"name": "Greeting",
"handlers": {
"run": "onRun"
},
"identifier": "messages.greeting"
}
],
"menu": {
"title": "Message…",
"items": ["messages.greeting"]
},
"identifier": "com.bohemiancoding.sketch.messages",
"version": "1.0",
"description": "An introduction on how to build plugins.",
"authorEmail": "developer@sketch.com",
"name": "Messages"
}
command.js
const sketch = require('sketch')
const { randomEmoji } = require('./shared')
varBfwOnRun= function(context) {
sketch.UI.message(`Hello Sketch ${randomEmoji()}`)
}
shared.js
let emojis = ['
网友回复