I made a Sketch Plugin. You can too.

TLDR: I made a Sketch Plugin. It’s easy to make one. You should try it.

I’m interested in design tools. I was so impressed and inspired by Josh Pickett and Matej Hrescak that I feel like I have an itch I have to scratch. The only way to do that is to make something myself.

Demo:

Here is roughly how it happened:

• Have an idea: I design with numbers a lot (like data tables). The way I used to make them in Sketch is to create one row or one cell, then copy and paste N times. The problem is that all the numbers I end up getting are the same, which doesn’t make my design look realistic. But if I go back to change each of the numbers manually, that’s very tedious. I wanted to automate that.
• See what’s out there: I already have the Content Generator plugin, but it doesn’t really solve this particular problem. I searched on Github, and couldn’t find anything either. That’s a good sign, I guess. So now I had to learn how to actually make a Sketch Plugin. I looked at the code for Content Generator. The file structure is pretty simple (Kudos to the Sketch team). I skimmed the plugin documentation for Sketch. It’ well written but I didn’t want to know every single detail. I wanted a shortcut.
• First attempt: I looked at how Content Generator generates things like city names. It’s just a JSON file. So I built a first prototype: I manually created a JSON file with a bunch of formatted numbers (like $20.50, or 4.50%). Guess what? It actually works, but it’s not really smart.
• Iterate: Now what I wanted to do is to 1) randomly generate numbers within a range and also 2) format it. My Javascript skill is not that good to come up with the code off the top of my head, but I do know enough to know how to Google. After opening 10+ tabs of Stack Overflow, I made it work. If you’re a maker too, you know how that feels.
• Share with the community: I sent it out to my team, and people really liked it! Since I also put the code on Github, later on I found out it was listed in the semi-official Sketch Plugin directory and Sketch App Sources website. My favorite part is people already started building upon it. Check out this fork from RayPS to easily mock up a calendar.

The most important lesson here is probably don’t get intimidated by the imaginary hurdles in your head and just do it. I’m a designer. I don’t have a Computer Science background. The only code I know is HTML, CSS and Javascript, but they’ll take you a long way. I’ve made mobile apps, chrome extensions, screen savers and other fun stuff (I’ll probably write about how I made those too).

So start making things!