How to Build an Illustrator Feature in Sketch and Make Designers' Life Easier

That’s exactly what occurred in our team - Bartek, one of the designers, needed a quick and easy solution that would save his time while working in Sketch. I’m always happy to help and that’s why I built a little plugin that solved the issue. Let me introduce you to Move It!

Houston, we have a problem

It all started with a conversation on Slack. Bartek, our designer, had a problem with moving a number of objects by the same value at the same time. It was super annoying to move some layers in the projects - you needed to use mouse or keyboard arrows if you wanted to be precise, which was an obvious waste of time.

We talked about it for some time and the original conversation included some digressions, but I’ve put together something shorter to give you a better idea of the problem.

I wanted to help Bartek out. After an hour, Move It was born and available on my GitHub. It’s a plugin that lets you move selected layers vertically and horizontally.

How Move It Works

If you have at least basic JavaScript knowledge, you’re good to go, because Sketch uses CocoaScript as its programming language. You can learn more about it on Sketch developers’ guide. But I recommend to learn by browsing other plugins’ code. The algorithm for this feature is quite simple and straightforward.

1. take selected layers
2. prompt user for input
3. iterate on a collection of objects
4. set new coordinates

I put my code on github and tweeted about my little plugin. What happened next was rather unexpected… It was retweeted by Sketch Hunt! It turned out I wasn’t the only one who had a similar problem. Isaac from Uber mentioned me on Twitter about the plugin, happy to find a solution he needed, but he also encountered a weird bug.

@dawidwu @sketchapp This is exactly what I needed today! Only bummer is that it's behaving oddly for me. Any ideas? https://t.co/cT7VziNM7O

— isaacw (@isaacw) November 30, 2015

I replied that it works for me, but this problem obviously drew my attention.

@isaacw @sketchapp weird, it works fine with my v 3.4.2 (15857) https://t.co/g8dOYvg6k6 I'll try to debug tomorrow, cause it's midnight here

— Dawid Woźniak (@dawidwu) November 30, 2015

It turned out I used setX() function on a layer which worked OK on my machine (not sure why, maybe XCode version?). How did I make it work again? I replaced setX() with addX() function to sum coordinates and it worked like a charm.

Final result

The Illustrator feature was ported and working as expected, making designers’ lives a little bit easier.