Design + Sketch

A collection of articles, tips, tutorials, and stories on UI, UX and web design and prototyping with Sketch and beyond

I made a Sketch Plugin. You can too.

3 min readSep 20, 2015

--

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
Design + Sketch

Published in Design + Sketch

A collection of articles, tips, tutorials, and stories on UI, UX and web design and prototyping with Sketch and beyond

auxdesigner
auxdesigner

Written by auxdesigner

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

Responses (4)