Image for post
Image for post

I made a Sketch Plugin. You can too.

Liu Liu
Liu Liu
Sep 20, 2015 · 3 min read

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!

Design + Sketch

The best collection of articles, tips, tutorials, and…

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

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store