4 Tips for Making Your First Sketch Plugin

I recently updated my Notes plugin for Sketch and wanted to share some tips that have helped me through some frustrating hours of coding.

Notes now includes colors, resolution options, and the ability to hide notes. https://github.com/cshdllr/Notes

1 | Keep it simple

I’d been thinking about making a plugin for Sketch for a while. It seemed like a great way to learn more about the tool I use on a daily basis and give back to the design community.

I had a list of ideas that I kept adding to whenever inspiration struck. One day I sat down and read through that list. I thought through each idea on two dimensions.

  • Complexity — If I chose something too complicated, chances are I’d lose steam and not finish the plugin. Everyone is different here, but I have enough 70% finished side projects to know that bite-size projects are better for me when learning new tech.
  • Usefulness — I wanted to make a plugin that I could see myself using on a daily or weekly basis. This would help keep me motivated whenever I thought about moving onto something else.

2 | Get ready to read A LOT of code

The developer docs for Sketch are…developing. The company has more important tasks to focus on at the moment, so I understand why they don’t invest a lot of resources here, but it was a frustrating first step to see this.

I guess everything in life is a work in progress, right?

So how should you actually learn to make plugins? Github, of course! There are a lot of great plugins on Github that do everything from css layouts to Arrested Development themed Lorem Ipsum. I found myself eventually just browsing other’s code for fun.

The plugin you are making is unique, but chances are that parts of it are not. Find examples of people solving problems that you need to solve. Read through their code and try to understand what’s going on. There’s more than one “right” way to solve a problem, so it doesn’t hurt to read through a couple examples.

Maybe you’ll even get lucky and find some code with comments explaining what’s actually going on…but probably not.

Here’s a great list of plugins.

3 | Use your plugin before releasing it

This is sort of obvious, so I won’t dwell on it too long, but test your plugin. Use it for a week and see if there are any rough edges you need to polish out.

Send it to one of your friends and ask them to use it for a week. This was a great source of feature requests for me. I ended up adding the “Hide Notes” feature after someone recommended it. At first I didn’t see a ton of value in it, but after implementing it I’ve used it multiple times a day.

4 | Get comfortable with the console

There will be bugs. Then you will fix those bugs and there will be more bugs. Then there won’t be any bugs. You will send it to your friend to test and they will report back with 100 new bugs.

Your weapon against these bugs is Console and a simple line of code:

log(“the value of var is: ” var);

Putting that line of code in your plugin will help you diagnose what’s happening to different variable values, ensure that the plugin is making it to various lines in your code, and also sometimes drive you crazy because it’s showing value that you don’t expect.

When you open Console, search for sketch. Any logs containing sketch will show up here.

This post won’t be the only thing you need to make your first Sketch plugin, but I hope it helps make it a little easier.

In the words of Charlie Deets, just don’t say no.

Follow me on Twitter at @cshdllr for occasional tweets.

Product designer at Facebook · Playing outside · 🍩 ☕️ 🏄