Sketch to UIView

Recently, a friend of mine and I started meeting up for 1-day “hackathon” projects. He designs, I code.

It wasn’t too long before I had the desire to automate my job, which, I felt, was simply a matter of making Sketch mockups come to life.

I enjoy writing views in code, rather than using interface builder. I wanted something that would “export” Sketch mockups into UIView code.

The first task was to get the data out of Sketch, which appeared to be easiest using Sketch Plugins. Sketch plugins use CocoaScript, which is similar to cycript, which I’m quite familiar with (at least using Objective-C methods) from iOS reverse engineering. I decided to start with just exporting data, then work on generating UIView code later.

This is the “Sketch to json export” script I came up with.

Select a layer, like an artboard, and run this script. You’ll see a .json file popup on your desktop.

I can post the python script that reads the .json and generates code later if there’s interest.