+
95
-

回答

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 = ['					

网友回复

我知道答案,我要回答