Everything you need to know about the Sketch 43 file format

Debunking some of the myths around Sketch 43’s new file format

Anima App's medium blog
Design + Sketch
6 min readApr 6, 2017

--

By Or Arbel — Co-Founder & CTO @ Anima

Try Anima— Publish responsive websites directly from Sketch, Adobe XD, and Figma and export code.

Some background:

There has been a lot of information spread out about the new Sketch file format.

Last week we wrote an open sourced Sketch 43 Web Viewer.

We got a chance to dive into the intrinsics of it. We’ve learned some things along the way and we feel it might be good to share our findings.

The following is a list of myths along with our verdicts.

Myth #1: Designers have to learn to code

Sketch files, just like any other type of files, store data. Specifically, the data that .sketch files store is the design you created within the Sketch app.

The above passage is true to both Sketch 42 and Sketch 43 files. The data that the different file formats store didn’t change whatsoever. The only thing that did change is the way it’s represented.

In Sketch 42, the data was stored in a binary format. Binary formats are unreadable to humans, and unless the knowledge of code needed to read that format is public they are called “closed”.

Sketch 43, however, introduced a new file format that stores the data in a format called JSON. JSON is human-readable and more importantly, structured in a way that computers easily parse. That means an “open” file format.

A sample of Sketch 43 JSON file which designers doesn’t need to know about

Now, what does all this mumbo jumbo mean to designers when using Sketch to design products? Nothing. Zilch. Nada.

Files are abstractions. Implementation detail. Their format doesn’t affect how designers interact with Sketch itself.

So “Should designers code?” — our verdict: False

Myth #2: Designers have to learn Git

Git is a version control system. It is also the name of its command-line tool.

It is just one of many version control systems. It’s also considered very complicated.

Official Git Documentation — Good luck!

Git became very popular when a company called GitHub decided to put Git on the web. GitHub is a web interface for Git.

Having a text-based open file format like Sketch 43's makes it compatible with existing version control tools such as Git.

Great! That means that it will be much easier for developers to develop version control solution on top of Git or SVN or any other Version Control System and introduce the power of version control to designers.

But does that mean that designers now have to use the terminal and type git add -u && git commit -m "Pushed 1 pixel to the left" && git push ?

We believe visual tools will become available to save the effort.

In fact, GitLab, which is a commercial company that develops an open source version of GitHub, is already making strides.

So, “Should designers learn Git?” — our verdict: False

Myth #3: Plugins that export designs will become obsolete

To quote myself earlier:

“Binary formats are unreadable to humans, and unless the knowledge of code needed to read that format is public they are called “closed”.”

An important part of that quote is “unless the knowledge of code needed to read that format is public”.

The thing is, Sketch actually did make that knowledge public long time ago:

http://developer.sketchapp.com/reference/api/

Actually, way before Sketch 43 came out.

It means that everything that can now be done with the new file format, could have been done, and has been done by various plugin developers. So what’s the big deal?

Sketch 43 lowers the Barrier to entry.

Until now, every developer that wanted to dive into the Sketch eco-system, had to learn how to read the Sketch file and it could only be done on a Mac (since you’d have to use either Sketch app or the sketch command line tool).

Starting now, every developer, whether on Windows, Linux, ChromeOS, etc.. can read and write to and from the Sketch file.

That means much lower effort to create useful solutions within the Sketch eco-system.

Case in point:

Sketch Web Viewer took one day to write

Having that said — There are a few things that are limited in the new Sketch 43 file format which may become an obstacle for it to make all export plugins obsolete:

  1. There is only one preview image and it is of the last edited page.
  2. The preview image is only up to 2048 pixels.
  3. Some of the information in the JSON is still in binary format — font specifications for example, are stored as base64 encoded binary plists. This might be already solved.

The preview images are snapshots of the Sketch file pages. To store all of them and in high-resolution would make the file size big and hurt performance:

Ale Muñoz (@ale) runs Developer Relations @ Sketch | http://sketchplugins.com/d/87-new-file-format-in-sketch-43/70

Until these obstacles are removed we don’t think plugins that export your design are going anywhere. However, having an open file format unleashes creativity in the minds of many developers out there. This myth verdict might not be relevant by the time this post has been published.

So “Will Plugins that export designs become obsolete?” — Verdict: The Jury is out! 🙊

Myth #4: Sketch 43 will revolutionize the design world

While we can’t predict the future, we can present an educated guess.

We don’t think Sketch 43 will force designers to learn to code, learn Git or to start configuring Mac’s Terminal.

However, we expect an influx of tools that supercharge designers workflow and automate mundane, error-prone, human annoyable, tasks.

It might take some time, but automation is revolutionizing the world and since the new Sketch file format is digestible by all, the potential for the integrations with all sorts of automation software is limitless.

So “Sketch 43 will revolutionize the design world” — our verdict: True ✅

Our mission at Anima is to empower designers to own their design. We are creating a workflow that enables designers to define, specify and architect all of the bits and pieces that encompasses User Interface/Experience and in the end automatically generate native code that is 1:1 to the original definition. This allows designers to be independent on other parties of the team such as engineering who sometimes have different priorities than the design team.

From your friends at Anima App 👋

For discussion feel free to join our Facebook Group

--

--