Sketch Plugin Helper
A batteries-included toolkit for making Sketch plugins
Features
- Write your plugin in modern JavaScript (of course)
- Automatically generate your plugin’s
manifest.json
andappcast.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:
{ }
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