sketch插件开发指南

您所在的位置：网站首页 › sketch模版怎么用 › sketch插件开发指南

sketch插件开发指南

2023-11-23 17:01| 来源: 网络整理| 查看: 265

沫沫.png

这是第 123 篇不掺水的原创，想获取更多原创好文，请搜索公众号关注我们吧~ 本文首发于政采云前端博客：sketch插件开发指南

背景

先抛个问题，众所周知，Sketch 是 UED 设计工具，大多数 Sketch 插件都是用于提升设计人员工作效率。那么，作为前端研发的我们为什么要学习 Sketch 插件开发呢？

纵观整个前端研发流程，PRD => Design => Code => Release。目前我们的研发提效方式主要集中在 Code => Release 环节，通过 Low Code 低代码开发平台（组件化 + 配置化 + 搭建能力）来提升交付效率。当搭建能力趋于成熟的情况下，前端研发提效的下一个突破口在哪儿？是的，就是 Design to Code，通过解析 Sketch 设计稿来完成 UI 层代码的生成，让前端研发同学更专注于业务逻辑代码。这也是我学习 Sketch 插件开发的初衷。当然今天分享不是 D2C 相关，所以主要篇幅还是集中在 “如何帮助大家快速掌握 Sketch 插件开发”。

前期知识储备

开发语言：JavaScript + CocoaScript（为 JS 访问内部 Sketch API 和 macOS 框架提供了桥梁）

其他技术补充：Sketch 插件支持 WebView，可使用 React、Vue 等框架开发

工程化工具：前端打包工具 webpack、脚手架工具 skpm

如果你是一枚前端研发工程师，那么这一切对你而言就不陌生了。

快速上手使用 skpm 快速创建 Sketch 插件

脚手架工具 skpm 提供了插件创建、打包、发布等功能，以及丰富的脚手架模板。分分钟可以出创建一个 Sketch 插件工程。

1. 安装 skpm npm install -g skpm 2. 使用脚手架模板创建插件 skpm create --template= 常用的脚手架模板 skpm/skpm 默认的基础模板 skpm/with-actions 包含 Action 的模板 skpm/with-prettier 包含 Eslint 校验的模板 skpm/with-webview 包含 WebView 的模板 3. 安装依赖 npm install 说明：这一步不仅会安装三方依赖包，并且会自动创建 Symbolic Link，将开发目录下构建的插件实时同步到 Sketch 插件安装目录下，便于开发调试。

4. 本地开发热更新 npm run watch 说明：watch 命令会监听插件 src 目录的文件，一旦文件变更，会触发重新编译构建。再通过上面提到的 Symbolic Link，将重新编译构建的插件同步到 Sketch 插件的安装目录下，即可实时查看到插件修改的效果。 5. 打包构建 npm run build 详解

至此，你应该已经得到了一个完整的 Sketch 插件工程，那我们一起来看下它都包含了哪些内容。

工程目录结构 ├── assets // 静态资源 │ └── icon.png // 插件显示的Icon图标 ├── sketch-plugin-demo.sketchplugin // skpm构建后生成的插件安装包 │ └── Contents │ ├── Resources │ │ └── _webpack_resources │ │ └── resources_webview.js │ │ └── resources_webview.js.map │ └── Sketch │ ├── manifest.json │ ├── __my-command.js │ └── __my-command.js.map ├── package.json ├── webpack.skpm.config.js // webpack配置文件 ├── resources // Webview相关资源文件 │ ├── style.css │ ├── webview.html │ └── webview.js └── src ├── manifest.json // 插件的清单文件 └── my-command.js // 命令对应的执行脚本js manifest.json

manifest.json 清单文件是 Sketch 插件最核心的一个文件。主要包括插件名称、描述、作者信息、调用菜单项 menu、定义的命令 commands 、事件监听 Actions 等等。Sketch 插件支持定义一个或多个菜单项 menu，菜单项关联相应的命令 command，命令功能由对应的 JS 脚本来实现。

1. 基础配置 // 基础配置示例 { "compatibleVersion": 3, // 兼容版本号 "bundleVersion": 1, "commands": [ // 定义命令 { "name": "生成随机色", "identifier": "sketch-plugin-demo.generate-random-color", "shortcut": "ctrl shift r", "script": "./generateColor.js", "handlers": { "run": "onRun", "actions": { "OpenDocument": "onOpenDocument" } } } ], "menu": { // 定义菜单项 "title": "sketch-plugin-demo", "items": [ "my-plugin-with-webview.my-command-identifier" // 对应上面命令的identifier ] } }

详细释义如下：

commands name：命令对应菜单项的显示名称 identifier：命令的唯一标识，建议命名规则 ${PluginName}.xxx-xxx-xxx shortcut：调用命令的快捷键 script：实现命令功能的函数所在的脚本 handlers：定义处理程序，包含触发命令时调用的函数方法名（默认为 onRun），以及定义 Action 事件监听 menu title：插件在菜单栏显示的名称 items：定义菜单的集合，对应命令的 identifier 2. 菜单项支持多级配置 { "commands": [ { "name": "第三级菜单项", "identifier": "my-plugin-with-webview.my-command-identifier", "script": "./my-command.js", "handlers": { "run": "onRun", "actions": { "Shutdown": "onShutdown" } } } ], "menu": { "title": "my-plugin-with-webview", "items": [ { "title": "第一级菜单项", "items": [ { "title": "第二级菜单项", "items": [ "my-plugin-with-webview.my-command-identifier" ] } ] } ] } }

开发辅助工具：DevTools 为提升开发效率，可安装 Sketch 插件 DevTools，便于查看 Sketch 文档结构、Network、Action 执行情况等等，并且支持 Console。

API Reference JavaScript API

虽然 Sketch 应用是使用 Objective-C 开发的，但官方团队为 Sketch 插件提供了一套 JavaScript API，支持访问和修改 Sketch 文档、获取用户自定义设置、提供数据源等等。主要包含以下五个模块：

// 访问和修改Sketch文档 import SketchDom from 'sketch/dom'; // 处理异步操作。在插件开发中，无法使用ES6的async，需sketch提供async import Async from 'sketch/async'; // 提供图像或文本数据，直接与Sketch用户界面集成，使内容在整个设计过程中随时可用 import DataSupplier from 'sketch/data-supplier'; // 常用的UI操作，例如：展示message/alert提示信息、获取用户输入等等 import UI from 'sketch/ui'; // 获取/保存用户的自定义数据 import Settings from 'sketch/settings'; // 包含以上5个模块的所有内容 import Sketch from 'sketch'; 注意：sketch package 涵盖了所有内容，体积比较大，不建议直接引用。大家可根据实际场景按需引入以上 5 个独立的模块。 JS API 使用示例

接下去，我们使用 JS API 实现一个小功能 “获取所选图层中的文本内容”。完整代码见Github。

import SketchDom from 'sketch/dom'; import UI from 'sketch/ui'; const strArray = []; // 递归获取每个层级图层中的文本内容，并存储到strArray数组中 const getTextValue = (layers) => { if (layers.length) { layers.forEach(layer => { const { type, layers: subLayers = [] } = layer; if (type === 'Text') { strArray.push(layer.text); } if (subLayers.length) { getTextValue(subLayers); } }); } } // 用message提示信息的方式展示获取到的文本内容 const print = () => { UI.message('已选择的文本内容：' + strArray.toString()); } export default () => { const doc = SketchDom.getSelectedDocument(); // 获取已选中的文档 const layers = doc.selectedLayers.layers; // 获取已选中的图层 getTextValue(layers); print(strArray); }; Actions

在 Sketch 3.8 中，引入了 Action API，实现了插件对用户行为事件的监听。目前已支持 300+ 的 Action，以下列举了日常我们用到最多的几个 Action：

Action触发条件应用场景StartUp插件安装/启动时文档预处理、读取用户配置、拉初始化数据等ShutDown插件被禁用/卸载时清理插件的缓存数据，功能不可用提示信息等SelectionChanged用户选择的Layers发生改变时重新获取/处理Layers的相关数据信息Open/CloseDocument打开/关闭文档时提示引导信息 Action API 使用示例 // 1. 在 manifest.json 文件中注册 Action "commands": [ { "name": "Actions", "identifier": "sketch-plugin-demo.actions", "script": "./actions.js", "handlers": { "actions": { "StartUp": "onStartUp", "Shutdown": "onShutdown" } } } ] // 2. 在命令对应的js文件中，定义Action的回调函数 export const onStartUp = context => { UI.message('Sketch-plugin-demo 插件已启动'); } export const onShutdown = context => { UI.message('Sketch-plugin-demo 插件已被禁用'); } Context

仔细的同学会发现，在上述 Action 使用示例中，回调函数默认接收了一个 Context 的对象，也就是当前操作的上下文，在实际开发中非常有用。我们将 Context 打印到控制台，可以发现它包含以下字段：

action：当前执行的 Action 以及所处的阶段，分为2个阶段 begin 和 finish scriptPath：当前执行脚本的绝对路径 command：当前执行的命令 document：当前操作的 Sketch 文档 selection：当前选中的所有图层 WebView

Sketch 插件开发，除了使用 JS API 访问和修改文档外，还有一块很重要的能力，就是支持 WebView 开发。我们可以使用 skpm 快速创建一个包含 WebView 的插件。

skpm create my-plugin-with-webview --template=skpm/with-webview

关于目录结构，前面也有提到过，WebView 相关文件都是存放在 resources 目录下统一管理。但这边有个小坑，通过 Webpack 编译构建后的 JS 文件会自动加上 resources_ 前缀。例如：webview.js 编译后会变成 resources_webview.js。所以，在 HTML 中引用 JS 时，也特别要注意这个点。

接下去，我们详细来看一下刚才创建的插件工程代码。

新建 WebView const createWebView = () => { // options配置信息 const options = { identifier: 'my-plugin-with-webview.webview', title: 'This is a WebView', width: 600, height: 200, resizable: true }; // 新建WebView窗口 const browserWindow = new BrowserWindow(options); // 页面载入完成后才显示弹窗，避免窗口白屏 browserWindow.once('ready-to-show', () => { browserWindow.show() }); const webContents = browserWindow.webContents; // 页面载入完成后提示信息 webContents.on('did-finish-load', () => { UI.message('UI loaded!'); }); // 装载HTML页面 browserWindow.loadURL(require('../resources/webview.html')); }; WebView和插件之间的通信插件发送消息到 WebView // On the plugin webContents .executeJavaScript(`setRandomNumber(${Math.random()})`) .catch(console.error) // On the WebView window.setRandomNumber = (randomNumber) => { document.getElementById('answer').innerHTML = 'Random number from the plugin: ' + randomNumber }; WebView 发送消息给插件 // On the webview window.postMessage('nativeLog', 'Called from the webview'); // On the plugin import UI from 'sketch/ui'; webContents.on('nativeLog', s => { UI.message(s); }); WebView 调试可通过以下配置开启调试功能。开启调试功能后，可右键唤起工作台。 defaults write com.bohemiancoding.sketch3 WebKitDeveloperExtras -bool YES

动手实践

为了避免眼睛会了，手没会的情况。下面来 2 个示例给大家练练手。示例代码见GitHub。

场景 1

矩形色块和文本内容成组，要求随机生成 RGB 色值并更新矩形颜色和对应文本内容。效果如下：

测试文件可直接使用示例工程中的 ./test-file/test.sketch，其图层元素结构如下：

通过 DevTools 插件快速查看 sketch 文件的元素结构，直接对元素属性进行操作即可。 import SketchDom from 'sketch/dom'; import UI from 'sketch/ui'; import Mock from 'mockjs'; const Random = Mock.Random; export default () => { const doc = SketchDom.getSelectedDocument(); // 获取已选中文档 const layers = doc.selectedLayers.layers; // 获取已选择图层 if (layers.length) { layers.forEach(layer => { const { type, layers: subLayers = [] } = layer; if (type === 'Group') { subLayers.forEach(subLayer => { const randomColor = Random.hex(); // 随机生成RGB色值 if (subLayer.type === 'ShapePath') { subLayer.style.fills[0].color = randomColor; // 更新矩形颜色 } if (subLayer.type === 'Text') { subLayer.text = randomColor; // 更新文本内容为RGB色值 } }); } }); } else { UI.message('当前没有元素被选中，请选择'); } }; 场景 2

基于 Umi + Antd 实现一个嵌在 WebView 里的登录页。效果如下：

首先，我们需要在 Sketch 插件工程中集成 Umi + Antd

在插件工程的根目录下，新建 webview 文件夹 $ mkdir webview && cd webview 基于 Umi 模板新建工程，这边我选择的脚手架类型是 app，引入框架包括 antd 和 dva npm create umi 在 .umirc.js 文件中，添加以下配置 outputPath:‘../src/dist‘, // 打包构建输出的目录 exportStatic: { dynamicRoot: true // 静态自由部署 }, 在 webview/src/pages 目录下，新建 document.ejs 文件，Umi 约定默认以这个文件作为模板 Your App 为便于开发调试，可本地启动 web 服务，然后 webview 装载此服务的页面，本地 web 代码更新会实时编译同步到 webview 中 const webPage = `http://localhost:8000#${Math.random()}`; browserWindow.loadURL(webPage)

这样一来，我们就可以愉快的使用 Umi 和 Ant Design 了

import styles from './index.css'; import { Input, Button } from 'antd'; import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'; export default function () { return ( (visible ? : )} /> 登录 ); } 总结

以上是关于 Sketch 插件开发的主要内容，它为我们提供了向前端上游探索的能力，大家可以结合自己公司的情况，研发一些 Sketch 插件帮助 UED 和前端提效。例如，UI 设计规范、Sketch Symbol 组件库以及与下游前端组件库关联映射、Sketch to Code 等等。重要的不是会什么技术，而是想做成什么事情。如何让业务交付更快，让业务有更低的试错成本，这是我们需要一直思考的问题。

参考资料 Sketch Plugin 开发官方文档 Sketch WebView 开发推荐阅读

在 Vue 中为什么不推荐用 index 做 key

浅析Web录屏技术方案与实现

开源作品政采云前端小报

开源地址 www.zoo.team/openweekly/ (小报官网首页有微信交流群)

商品选择 sku 插件

开源地址 github.com/zcy-inc/sku…

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 60 余个前端小伙伴，平均年龄 27 岁，近 4 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

如果你想改变一直被事折腾，希望开始能折腾事；如果你想改变一直被告诫需要多些想法，却无从破局；如果你想改变你有能力去做成那个结果，却不需要你；如果你想改变你想做成的事需要一个团队去支撑，但没你带人的位置；如果你想改变既定的节奏，将会是“5 年工作时间 3 年工作经验”；如果你想改变本来悟性不错，但总是有那一层窗户纸的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程，亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我觉得我们该聊聊。任何时间，等着你写点什么，发给 [email protected]

【本文地址】

公司简介

联系我们