Skip to content
🔋 A batteries-included toolkit for making Sketch plugins
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
media
src
.gitignore
LICENSE.md
README.md
ROADMAP.md
package.json

README.md

Sketch Plugin Helper npm Version

A batteries-included toolkit for making Sketch plugins

Sketch Plugin Helper

Features

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

You can’t perform that action at this time.