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

yuanqing
yuanqing
May 30 · 4 min read

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

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

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

Reference plugin implementations

Here are some plugins built with Sketch Plugin Helper:

Add Artboard Borders and Titles
Align to Grid
Clean Document

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.

yuanqing

Written by

yuanqing

Product Designer