Sketch Plugin Helper — Supercharge your Sketch plugin development
Today, I’m excited to announce Sketch Plugin Helper, a batteries-included toolkit for making Sketch plugins
--
Here are the headline features:
- Write your Sketch plugin in modern JavaScript (of course)
- Get multi-field user input using a concise, declarative API
- 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
If the above sounds compelling and you want to dive straight into the code, jump straight to the docs on GitHub!
Why?
Sketch Plugin Helper is an opinionated, batteries-included alternative to skpm. I describe it as batteries-included because it imposes some conventions, abstracts away boilerplate code, and generally just tries to do more out-of-the-box, as opposed to leaving too much implementation and too many decisions to the plugin developer.
Sketch Plugin Helper was made primarily to scratch my own itch, and to address specific points of friction that I’ve experienced when writing plugins for Sketch. The goal was to develop a comprehensive solution that addressed the following problems.
1. No high-level API to create UI for user input
Sketch only provides a rudimentary API for getting user input. Any UI more elaborate than either a single text box or a single drop down menu will need to be written from scratch, using imperative CocoaScript APIs. UI code is repeatedly reimplemented across the Sketch plugin ecosystem.
Solution
- Create a higher-level API for building UI to get user input. (Keeping in mind that the trade-off of having this abstraction is that we will no longer have granular control of the UI.)
Example
Sketch Plugin Helper ships with a declarative API for building form fields:
The above code will produce the following UI:
5 types of form fields are supported: CHECK_BOX, DROP_DOWN, RADIO_BUTTONS, TEXT_BOX, and NUMERIC_TEXT_BOX.
In addition, Sketch Plugin Helper also provides a means to specify default settings for your plugin, plus APIs for persisting user input (either permanently, or only within the current “session”).
2. Common plugin tasks require significant boilerplate code
Many common plugin tasks are not supported out-of-the-box by the Sketch API. As a result, boilerplate code to perform these common tasks is duplicated across plugins.
Solution
- Consolidate common plugin tasks into a comprehensive set of utility functions.
3. Plugin tests can be tedious to write
When writing tests, it is tedious to make assertions on a particular structure or particular part of the Sketch file.
Solution
- The test runner should support performing a one-to-one comparison between the resulting Sketch file after running your plugin code and an expected Sketch file.
Reference plugin implementations
Here are some plugins built with Sketch Plugin Helper:
- 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
These plugins were written while iterating on Sketch Plugin Helper itself. It was a means to discover common patterns and surface opportunities for creating abstractions.
Hope this helps
Sketch Plugin Helper began as pet project created for my specific use case, but I do hope that you might find it useful too. So give it a go! Am happy to hear feedback and suggestions on how it could be made even better.
