Runner: Speed up your Sketch workflow

Hacked together within 30 hours at #SketcHHackday

Published in

Design + Sketch

4 min readApr 21, 2016

On 8 and 9 April 2016 the team of Precious Design Studio and Number Four AG organized a hackathon for Sketch plugins in Hamburg, Germany. The event was very well organized from start to finish. It was amazing to meet and work together with all the friendly and skilled designers and coders from the plugin community. #SketcHHackday

Ale Muñoz from Bohemian Coding introducing the Sketch API — Instagram swipestudio

The event took place in two separate studios: the open space and the hack space. In the open space there were presentations by Craft from InVision Labs, Framer, the Facebook Design Tools Team, Open Color Tools and Avocode. The hack space was in the studio of Precious. Here the teams hacked on their plugin ideas assisted by Ale Muñoz and Sam Deane from Bohemian Coding.

Florian pitching his idea to overcome keyboard shortcut conflicts — Instagram ginettateam

Some teams were established before the event started. Other teams were just looking for a helping hand to design or develop their plugin ideas. The Sketch Runner team consisted of 6 people who joined the event by their own. We never met each other before. After the elevator pitches we merged our ideas and quickly established a diverse team of motivated people. From the beginning we were convinced we had a powerful solution in mind. One that solves a significant problem designers are faced with over and over during their work in Sketch.

The designer’s struggle

While working in Sketch, you often do quite some tedious actions to perform simple tasks. The actions we think are slowing down our worklfow:

Navigating pages, artboards and layers in your document
Inserting and managing symbols
Applying text and layer styles
Positioning, aligning and distributing layers

Besides these basic native Sketch functions, a lot of designers use custom plugins extensively. The problem with these plugins is that you have to remember the keyboard shortcut to prevent them from slowing you down. And when you have a lot of plugins installed, you’ll at some point get into the situation where shortcuts are conflicting with other plugins.

The struggles of a designer: Navigating, inserting symbols and running plugins.

The solution

Wouldn’t it be great to perform such actions all with your keyboard? But without the hassle of remembering all those pesky shortcuts? That’s what we thought.

We were inspired by a bunch of search tools and command runners. The Spotlight from OS X, Alfred app, Quick Switcher (Slack), Goto Anything (Sublime Text) and Command Palette (Atom) are some great productivity boosters we love. They make the tools we already enjoy using even better.

So we began sketching, designing, developing and building our own command runner for Sketch. We created the website for our plugin, finished the plugin demo, designed a brand and launched our website within 30 hours. Just in time for the demo presentations. Along with 9 other teams we presented our work to the professional jury of Sketch, NumberFour and UberCreative. And to put the icing on the cake, we won the first prize of the hackday!

Sketch Runner allows you to:

Run any plugin action or menu item;
Navigate your pages, artboards, groups and layers;
Insert symbols;
Apply shared styles and text styles;
Create symbols and styles.

Demo video of the /Runner plugin

Some cool example of what you can use Runner for:

Quickly align or distribute multiple layers. Just type ‘left’, ‘right’, ‘horizontal’ etc. and choose your option from the results (Run).
Change the capitalization of a text layer to all caps or lowercase. Just type ‘upper’ or ‘lower’ and pick your option (Run).
Update layers in a mockup using Magic Mirror plugin. Select the mockup screen, launch Runner and type ‘Refresh’ (Run).
Add layout specs to your document and export them using the Measure plugin (Run).
Create a symbol, shared layer style or a text style by just typing the name and selecting your option (Create).
Browse all your symbols and insert the the one your looking for (Insert).
Keep brand and UI colors consistent troughout a document by applying shared styles (Apply).
Mark up your text by applying H1, H2 and Paragraph text styles (Apply).

People seem to love it 😎

The hackday team from left to right: Sergi, Nikolas, Moriah, Aby, Florian and Roy

What’s next?!

Part of the team took the challenge to keep developing the plugin as a side project. We’re planning on gathering user feedback and improving the plugin piece by piece.

If you have any feedback, let us know via Twitter or hello@sketchrunner.com