README

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

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

Usage no npm install needed!