Sketch 43 is coming to town with a new game. An open file format!
Sketch 43 will be out in a few weeks, and it will fundamentally change how the design tools game will be played out in the coming years.
“enables more powerful integrations for third-party developers” is stating it lightly. This is what the fine folks at Bohemian Coding has done — they opened up Sketch’s file format into a neat JSON making it possible for anyone to create and modify Sketch compatible files.
In case you’re wondering, here’s how it looks:
This is just a text file — anyone with basic programing knowledge can create files that look like this. And they don’t even need SketchApp to do that, nor do they need to be on a Mac.
Can you imagine what kind of new things will now be possible? One word: design automation (okay, two words!). You want Artboards that showcase a font and its variations, like a Google Fonts page? There’s probably going to be a script to generate that file. There will be websites from which you can download freshly brewed Sketch files based on what you ask — say an image gallery, or a landing page, or a signup form. You’ll be able to pick your brand colors, choose a theme, randomize it, and voila! you have a Sketch design to start playing with. Someone could even build a Sketch equivalent that runs on the browser. The possibilities are many!
The reason I’m excited about this is obviously because of Protoship. We have two tools that work intimately with Sketch: Teleport can convert websites into Sketch designs, and UIPad can convert Sketch designs into HTML, CSS, and React.
We implemented Teleport by writing a massive Sketch plugin that creates layers and adds texts and inserts pictures, all using Sketch’s internal API. Yes, if you’re a developer, you read it right — Sketch’s Internal API. Here’s a rough glimpse of that code:
function createArtboard() {
var artboard = MSArtboardGroup.alloc().init();
artboard.setName(layerTree.originalName);
var fill = layer.style().addStylePartOfType(0);
fill.color = rgbaToMSColor(backgroundColor);
var frame = layer.frame();
frame.setX(node.rulerX);
frame.setY(node.rulerY);
frame.setConstrainProportions(false);
frame.setWidth(node.width);
frame.setHeight(node.height);
layer.setName(node.originalName);
}This is an approximation of the code that we use in Teleport for creating a new Artboard in Sketch. The functions and objects we use (MSArtboardGroup for example) are the exact same stuff that Bohemian Coding themselves use to build Sketch. This is the essence of their plugin architecture: they let the plugins execute from within the same process space as that of Sketch — there is no explicit API nor any kind of sandboxing from the parent process. Plugin developers have almost the same power that Bohemian’s programmers themselves have because the plugins have access to Sketch’s internal code!
This freedom is what made the thriving third-party plugin ecosystem for Sketch possible. And it is already one of the major differentiators of Sketch compared to its competitors. To see the breadth and depth of this ecosystem, take a look at the official Sketch Plugin directory. If Bohemian Coding doesn’t have the inclination or the resources to build a feature, the community just makes it.
This is no accident — Bohemian has supported the third-party ecosystem over the years in many ways. They hired the exceedingly helpful Ale Munoz as a sort of Developer Evangelist a few years back, and has setup an actively-supported forum for Plugin developers.
And Sketch itself comes with an in-built REPL where anyone can whip up a plugin in no time, and just hit Save to package it into a distributable plugin. There is nothing extra to do — it is all in the app. This makes it very easy for users of Sketch to get started with plugin development, and they happily take the bait!
But I shouldn’t be waxing this eloquent about the plugin ecosystem. It is not all honeys and roses and doughnuts.
The whole thing is practically undocumented! Doing anything non-trivial is painful. First you have to rummage through the mailing list hoping someone has already asked your same question, then go scavenging for code from other plugins that does similar stuff, and finally give up and ask it on the forum. Not to mention some good ole-fashioned API whack-a-mole. While building Teleport and UIPad, Sherin and I spent weeks staring at Sketch’s classdump trying to reverse-engineer the API calls we needed.
But I wanted to make a point with all this: even though plugin development is undocumented and painful, developers still build crazy useful things on top of it. And it is not like there is much choice anyway! Sketch is a design programming platform with a large user base and zero substitutes. Developers (who are often power-users themselves) are willing to endure anything to get a chance to program the tools they use.
Now by opening up the file format, Sketch has upped the game by a notch. Competitors should take note. Adobe XD’s major differentiator is integrating design and prototyping into one seamless workflow, while Figma’s is collaboration.
Adobe is a company of massive resources — forget their existing customer base that gives them an almost-monopoly in the field, and forget their massive financial resources. Just the amount of technical expertise in that company in high-performance graphics tools is simply mind-blowing. They practically invented the field.
And Figma is a heavily funded company with a bunch of very smart folks. One of the founders wrote a programming language on top of which parts of the product is built. They have good algorithm chops in-house, and Figma runs on the browser, but is written in high-performance C++ which their whiz kids transpile into Javascript using Emscripten.
I shouldn’t forget Serif. The company produces tools that are a credible alternative to Adobe’s suite. They have a Photoshop competitor Affinity Photo which does most of what Photoshop does, but with none of its cruft. They also have a high-performance alternative to Sketch, the Affinity Designer, which has rave reviews from its users.
As each of these competitors came out, I wondered about Bohemian Coding’s long-term vision. They are a bootstrapped business with only organic, sustainable growth and don’t have the resources to compete with the likes of Adobe and Figma to play the feature-accretion game.
But Pieter Omvlee characteristically doesn’t care about competition, and there is so much to love in his attitude towards products and business. If the team were to build what their customers so ferociously demanded, they’d have tried integrating Prototyping and Flexbox-style responsiveness into Sketch already, making it a kludgy frankenstein in no time — both in terms of the user experience and in terms of the entropy of the codebase (an unrecoverable mistake for a small technology business to make). A software product is like a living, breathing organism, and if you stuff too much into it too fast, it will fold under its own weight.
So when Prototyping was all the rage, Bohemian was building support for Nested Symbols. This solved a lot of issues I had with UIPad, so I’m personally thankful for that! And they invested heavily into the 3rd party ecosystem which had higher leverage than everything else. It enabled others to make Prototyping tools (not one, but many!) that integrated well with Sketch, circumventing the problem completely. And now they’ve opened up the file format itself while its competitors don’t even have a plugin system.
If you are curious to know more about the new file format, hear it straight from the horse’s mouth — here’s Ale’s original announcement and the lively discussion that followed in SketchPlugins. There is much work to be done — the format has to become stable, it has to be documented, and developers have to sit down and build stuff on top of it.
But everything I discussed so far are my personal observations based on this announcement and could very well be wrong. The open format might just be a useful side-effect of some other technical decision, and not a primary motivation. That is an actual possibility — the format that’ll be used in Sketch 43 contains proprietary blobs that can’t be manipulated independently, and they too need to be opened up for .sketch to become a universal file format for vector-based designs.
But I very much hope it’ll happen and am thrilled thinking about the possibilities. We have plans for some cool stuff to do with it already — little hacks that’ll make your design life easy, and big improvements in how UIPad and Teleport will work. It might take some time for us to build them out, but I’ll try to write often about how things are progressing. Watch this space for juicy stuff as they happen, and tell me what you think in the comments!
Plugs to some nice folks:
- If you’re new to Sketch or want to level up, give Christian Krammer’s The Sketch Handbook published by Smashing Magazine a go. I had the chance to review the book and learned a lot from it!
- A shoutout to Marko’s sketchtricks.com — a great newsletter to learn nifty things about Sketch.
- And tell your developer friends about Protoship UIPad — no more manual HTML and CSS chopping. Generate them automagically!
