Building a High‑Performance Sketch Plugin with Vue3, Skpm, and Webview

Background

Rapid UI design changes and the need for consistent design standards prompted the creation of a shared UI component library to reduce wasted design resources. Consequently, a Sketch plugin was built to manage design components, and this article shares development insights and problem‑solving approaches.

Sketch Plugin Overview

Sketch plugins can be written in Objective‑C, JavaScript, or Swift, but the official recommendation is to use CocoaScript (a JavaScript‑like API) via the skpm scaffolding tool.

Development Environment

The plugin combines a native Sketch side with a Vue3‑based webview. The following tools are used:

skpm : Sketch plugin scaffolding and JS API.

http-server : Node‑based static server for local image resources during development.

sketch-module-web-view : Provides Electron‑like window management for the webview.

Vue3 + Ant Design Vue : Front‑end framework for a rich UI.

Sketch‑dev‑tools : Debugging utilities for Sketch plugins.

Project Structure

The plugin’s webview is built as a Vue3 multi‑page application. In development mode the Vue dev server serves the UI; in production the compiled static HTML is loaded into the Sketch webview via loadURL.

Build Scripts

{
  "scripts": {
    "dev": "concurrently \"npm run watch\" \"cd src/webapp && npm run serve\"",
    "build:prod": "cd src/webapp && npm run build && cd ../../ && mv -f ./src/webapp/dist/*.html ./src/webview/ && rm -rf ./astro.sketchplugin/Contents/Resources/_webpack_resources/* && NODE_ENV=production skpm-build && mv -f ./src/webapp/dist/static ./astro.sketchplugin/Contents/Resources/_webpack_resources/static"
  }
}

After building, static assets are moved into the plugin bundle. The skpm‑link command creates a symlink to the Sketch plugins directory for testing.

Webview ↔ Plugin Communication

The webview sends data to the plugin side via postMessage, while the plugin listens with webContents. To simplify callbacks, a wrapper was created that standardises the communication pattern.

Downloading & Extracting Resources

Because the built‑in fetch uses CocoaScript and consumes excessive memory, the plugin leverages the @skpm/child_process package to invoke macOS curl for efficient file downloads.

Fill‑Image Feature

The plugin identifies selected layers (artboards, groups, shapes, text, images) and replaces their content with downloaded assets.

Resource Preview

During development, an http server serves local preview images, bypassing the inability to use the file protocol inside the webview.

Drag‑and‑Drop Functionality

Inspired by the open‑source Sketch‑Stickers plugin, drag‑and‑drop is implemented using NSPasteboard and NSDraggingItem to provide a smooth preview while dragging.

Component Library Usage

Symbols are used to manage the component library. After downloading a library, the plugin parses the Sketch file, builds a hierarchical menu, and loads the selected symbol groups into the webview.

Data Caching

Parsing the library is time‑consuming, so the plugin caches menu data using the localforage library (a wrapper around IndexedDB) to achieve sub‑10 ms load times.

Design Draft Validation

The plugin compares selected documents or artboards against design standards, marks non‑compliant layers, and displays error messages at the top of each artboard.

Conclusion

The article summarises the plugin’s core features, implementation details, and solutions to encountered issues, recommending a webview‑based floating window approach for better stability across Sketch updates.