Sketch成為夢想中的“設計師工具箱”。但是每個人都有不同的需求，也許你需要一個我們還沒有實現的功能。不要擔心：插件已經可以滿足您的需求，或者你可以輕松創建一個插件。
一、Sketch插件可以做什么？
Sketch中的插件可以做任何用戶可以做的事情（甚至更多！）。例如：
| 根據復雜的規則選擇文檔中的圖層 |
| 操作圖層屬性 |
| 創建新圖層 |
| 以所有支持的格式導出資產 |
| 與用戶交互（要求輸入，顯示輸出） |
| 從外部文件和Web服務獲取數據 |
| 與剪貼板交互 |
| 操作Sketch的環境（編輯指南，縮放等...） |
| 通過從插件調用菜單選項來自動化現有功能 |
| 設計規格 |
| 內容生成 |
| 透視轉換 |
二、插件簡介
Sketch 插件都是 *.sketchplugin 的形式，其實就是一個文件夾，通過右鍵顯示包內容，可以看到最普通的內部結構式是這樣的：
manifest.json用來聲明插件配置信息，commands 定義所有可執行命令，每條 command 有唯一標志符，identifier，menu 定義插件菜單，通過 identifier 關聯到執行命令。
my-commond.js是插件邏輯的實現代碼實現文件。
三、Javascript API for Sketch
這是Sketch的原型Javascript API。 原生Javascript，Sketch的完整內部結構的一個易於理解的子集。它仍然是一項正在進行中的工作。
Javascript API for Sketch 原理：
四、開發文檔
3、Action API
https://developer.sketchapp.com/guides/action-api/
https://developer.sketchapp.com/reference/action/
五、Sketch webView
Sketch模塊，用於使用webview創建復雜的UI。有別於一般的插件頁面，可以使用webview模塊加載一個復雜的Web應用，使其與Sketch進行交互。
1、BrowserWindow
在瀏覽器窗口中創建和控制Sketch：
// In the plugin. const BrowserWindow = require('sketch-module-web-view') let win = new BrowserWindow({ width: 800, height: 600 }) win.on('closed', () => { win = null }) // Load a remote URL win.loadURL('https://github.com') // Or load a local HTML file win.loadURL(require('./index.html'))
2、webContents
const BrowserWindow = require('sketch-module-web-view')
let win = new BrowserWindow({ width: 800, height: 1500 })
win.loadURL('http://github.com')
let contents = win.webContents
console.log(contents)
3、skech與webview的通信
1）Sending a message to the WebView from your plugin command
On the WebView:
window.someGlobalFunctionDefinedInTheWebview = function(arg) { console.log(arg) }
On the plugin:
browserWindow.webContents .executeJavaScript('someGlobalFunctionDefinedInTheWebview("hello")') .then(res => { // do something with the result })
2）Sending a message to the plugin from the WebView
On the plugin:
var sketch = require('sketch') browserWindow.webContents.on('nativeLog', function(s) { sketch.UI.message(s) })
On the webview:
window.postMessage('nativeLog', 'Called from the webview')
// you can pass any argument that can be stringified
window.postMessage('nativeLog', {
a: b,
})
// you can also pass multiple arguments
window.postMessage('nativeLog', 1, 2, 3)
六、構建開發工程
1、確立技術棧
使用Sketch webView的方式開發插件。用戶通過操作插件界面，webview與Sketch通信解決用戶的問題。這樣插件界面可以使用現今所有的前端框架與組件庫。
1）webView框架選擇Umi + Ant Design
注：WebView框架也可以單獨的工程與部署。
2）使用Sketch 官方skpm穿件插件工程
A、使用官方的sketch-dev-tools sketch內作為調試工具
下載代碼，代碼運行安裝插件即可：
npm install
npm run build
B、使用瀏覽器的開發者模式調試webView。
在sketch webView中右擊顯示調試器即可：
4）服務端技術方案
2、構建工程
1)創建Sketch插件基礎工程
首先，創建sketch-webview-kit插件工程：
npm install -g skpm skpm create sketch-webview-kit //創建sketch-webview-kit插件工程
其次，依賴sketch-module-web-view：
npm install sketch-module-web-view
2）創建webView工程（Umi + Ant Design）
首先，創建webView工程目錄，
$ mkdir webapp && cd webapp
然后，創建webView工程
yarn create umi
依次：
選擇 app, 然后回車確認；
選上 antd 和 dva，然后回車確認；
最后，安裝依賴：
$ yarn
3）配置webView工程
.umirc.js文件中，添加：
outputPath:'../src/dist', //打包后的目錄 exportStatic: { dynamicRoot: true //靜態自由部署 },
由於Umi生成沒有Html文件，可以自己配置。新建 src/pages/document.ejs，umi 約定如果這個文件存在，會作為默認模板，內容上需要保證有 <div id="root"></div>，比如：
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>Your App</title> </head> <body> <div id="root"></div> </body> </html>
3、sketch加載webView工程與聯調
1）sketch加載webView
第一種方法：
直接部署webView工程，通過Url加載：
win.loadURL('https://github.com')
第二種方法：
加載webView工程打包后的文件：
win.loadURL(require('./dist/index.html'))
注意：
此方法，由umi打包后的靜態資源（css、js）需要拷貝到
pannel3/pannel3.sketchplugin/Contents/Resources/_webpack_resources下。
2）聯調加載方法：
本地啟動webView工程，本地webView工程會在8000端口起一個服務，加載此服務即可：
const Panel = `http://localhost:8000#${Math.random()}`; win.loadURL(Panel)
4、項目成果
文件目錄如下：
七、拓展
1、React - SketchApp
是一個開源庫，為設計系統量身定制。它通過將 React 元素渲染到 Sketch 來連接設計和開發之間的鴻溝。
Sketch Javascript API 是源生代碼，React - SketchApp 使用react對Javascript API 進行了二次封裝。
http://airbnb.io/react-sketchapp/docs/API.html
關注微信公眾號獲得及時推送
