Sketch Plugin Helper

A batteries-included toolkit for making Sketch plugins

Motivation · Plugin Basics · Getting User Input · Plugin Utilities · Testing Your Plugin

Features

• Write your plugin in modern JavaScript (of course)
• Automatically generate your plugin’s manifest.json and appcast.xml files
• Get multi-field user input using a concise, declarative API
• Utility functions and abstractions over the Sketch API to ease common plugin tasks
• Write tests to assert that the resulting Sketch file after running your plugin code matches an expected Sketch file
• A powerful CLI to build, lint and test your plugin

See Motivation.

Quick start

Requires Node.js.

To begin:

$ npm install --global sketch-plugin-helper
$ sketch create sketch-hello-world

Enter the information prompted for. Then:

$ cd sketch-hello-world
$ npm install

Next, create a src/hello-world.js file containing the following:

import { showMessage } from 'sketch-plugin-helper'

export default function () {
  showMessage('Hello, World!')
}

Our plugin handler must be the default export of the file. (See Plugin Utilities for a list of helpful functions that you can use in your plugin.)

Then, in our package.json, set src/hello-world.js as the handler for our plugin menu command:

{
  ...
  "sketch-plugin-helper": {
    ...
-   "menu": []
+   "menu": [
+     {
+       "handler": "hello-world",
+       "name": "Hello, World!"
+     }
+   ]
  }
}

Note that the initial src/ and trailing .js extension is omitted.

Then, build our plugin, and install the plugin as a symbolic link:

$ npm run build && npm run symlink

Finally, open a new document in Sketch. Then, run our hello-world command:

$ npm run handler -- hello-world

You should see a Hello, World! message appear near the bottom of the Sketch interface.

To rebuild our plugin whenever we make a change, do:

$ npm run watch

Docs

• Motivation
• Plugin Basics
• Getting User Input
• Plugin Utilities
• Testing Your Plugin

Reference plugin implementations

Plugin name | Description :-|:- Add Artboard Borders and Titles | Automatically add borders and titles to artboards Align to Grid | Align artboards and layers to a grid Clean Document | Automagically organise and clean up your Sketch document Draw Slice Over Selection | Draw a slice over the selection Export Prototype | Export a clickable prototype from your Sketch file Extract Text | Extract text from layers that match a regular expression Find and Replace Text | Find and replace text in text layers and symbol instances Move Layers | Precisely move and arrange layers Select Layers | Create or filter a selection of layers based on name, type or similarity Sort Layer List | Sort the layer list by name or layer position

Installation

$ npm install --global sketch-plugin-helper

License

MIT