I made a Sketch Plugin. You can too.

Liu Liu
Sep 20, 2015 · 3 min read

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

I’m interested in design tools. I was so impressed and inspired by and 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 ). 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 , 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 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 . It’s just a JSON file. So I built a first prototype: I manually created 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 , later on I found out it was listed in the and . My favorite part is people already started building upon it. Check out .

The most important lesson here is probably don’t get intimidated by the imaginary hurdles in your head and . 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!

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Liu Liu

Written by

Liu Liu

Almost definitely believe in Karma. Inconsistently make consistent things @Google. Mostly kinda know enough to fake it. auxdesigner.github.io

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond