Sketching in the Browser

Generating Sketch files

At first glance, this seemed like magic, but when we had a look under the hood, we quickly found that it’s actually not that complicated.

To understand how html-sketchapp works, you first need to understand Sketch’s file format. Surprisingly enough, Sketch files are really just Zip files.

Once upzipped, Sketch files are mostly made of JSON files which, of course, can be opened in any regular text editor.

If you have a look at the contents of these files, you’ll see that it’s a relatively simple format, essentially made from a small handful of nested classes.

At its lowest level, html-sketchapp allows you to programmatically generate instances of these classes and convert them to JSON—but it goes much further than that.

The most powerful function in html-sketchapp is ‘nodeToSketchLayers’, which gives you the ability to convert a single browser element into an array of Sketch layers. This is where most of the magic happens, since it contains all of the logic for extracting browser styles and converting them into their Sketch equivalents.

What really brings this all together is the ‘SymbolMaster’ class, which allows you to dynamically generate Sketch symbols. Since symbols form the basis of any Sketch library, this allowed us to selectively expose a set of components to our designers, based directly on the underlying code.

Unfortunately, due to some limitations in the current Sketch format with how text styles are encoded, the generated documents aren’t quite valid Sketch files—html-sketchapp refers to them as “Almost Sketch” files, or ‘asketch’ for short. As a result, they need to be manually imported via html-sketchapp’s Sketch plugin. Thankfully, this process isn’t too difficult.

Wiring all of these steps together sounded somewhat daunting at first, but it turned out that there was already an example project on GitHub showing how to convert an existing style guide into a Sketch document.

As soon as we saw this, it didn’t take us long to start experimenting, and it took a surprisingly small amount of time before we started seeing truly startling results.