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

Photo of Dawid Woźniak

Dawid Woźniak

Updated Oct 19, 2023 • 7 min read

Have you switched from Illustrator to Sketch? Do you miss some features available in your previous tool?

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.

time-waste.gif

image02.png


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.

image00.gif

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.

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

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.

image01.gif

Isaac tweeted to me again - this time, it was good news only :)

Check out Move It and let me know what you think!

Getting some appreciation from experts in your industry is definitely rewarding, but this wasn’t about stars on GitHub and retweets. Simply, giving back to the community is rewarding, even if we’re talking about a simple plugin.

I’ll be happy to see what you think about Move It! Feel free to comment on my code and let me know if you find this plugin helpful. Also, that’s not my only work available at GitHub - check out my other plugin, Frame Sequencer. It helps you prepare frame sequences to combine with Generate Gif plugin to generate animated gifs inside Sketch. Perfect for Dribbble.

Do you work in design and want to follow the latest trends? Read our Anticipatory Design 101!

Photo of Dawid Woźniak

More posts by this author

Dawid Woźniak

UX & front-end. Dawid is doing his best at @netguru. He loves good coffee, meeting new people,...
Illustrating innovative ecommerce startup  Elegant, minimalistic look for maximum readability   Discover the story

Read more on our Blog

Check out the knowledge base collected and distilled by experienced professionals.

We're Netguru

At Netguru we specialize in designing, building, shipping and scaling beautiful, usable products with blazing-fast efficiency.

Let's talk business