Why You Need to Know About Sketch’s New File Format

Daniel Schwarz
Daniel Schwarz
Share
Sketch 43

Sketch 43 recently introduced a rather interesting update to their “.sketch” file format, making it more human-readable when opened in a code editor (by that I mean we actually could read the coding of the .sketch file and see details of the layers and styles in code format).

“Huh? What? Why would you want to do that?”

Well, you wouldn’t — this new file format is designed to be read by web browsers so that we can build apps that interpret .sketch files (think: better design handoff, Git-like version control, maybe even Sketch → HTML/CSS automation).

File Format: Sketch 42 vs. Sketch 43

Prior to version 43, the .sketch file format was written in binary (you don’t need to know what that means, just that it’s unreadable). Now it’s written in JSON, which is not only human-readable but can be read and even parsed by web browsers.

You can witness first-hand how web browsers will read this new file format by reading it yourself. Quite literally, you could dive into the code of a .sketch file, edit the JSON code itself, then open the .sketch file in Sketch and see the changes made to our design (don’t worry, designers are still expected to design using the Sketch GUI, this update doesn’t change that).

Here’s how it’s done.

Decompressing and Editing a Sketch File

  • First, rename yourfile.sketch to yourfile.zip
  • Decompress the compressed zip
  • Edit the JSON code (change some styles, for example)
  • Recompress the files again
  • Rename yourfile.zip to back to yourfile.sketch
  • Open the file Sketch to see the changes!
Converting .sketch to JSON

What’s Next?

While the idea of editing .sketch files with code is kind of cool, this isn’t what the new format was intended for. With this new update, web browsers can read the .sketch file format much like we can (using the method above), meaning we could be using Github (or similar) to bring version control into our design workflow, very soon.

Plus, we may see tools like InVision, Marvel and Sympli taking design handoff to a whole new level (imagine: adding keywords like “<h2>” or “<header>” into the layer/object name so that your design can be automatically translated to HTML code).

All we need is for somebody to build the app that does that!

AnimaApp, the makers of the Auto-Layout Plugin that we wrote about last week, has already built a Sketch 43 Web Viewer to test the new file format — try uploading your .sketch file to the Web Viewer, then hovering over the layers to see how the styles have been interpreted.

Would you believe me if I told you this took a day to build?

AnimaApp Sketch 43 Web Viewer

Frequently Asked Questions (FAQs) about Sketch’s New File Format

What are the key differences between Sketch’s old and new file format?

The new file format of Sketch is a significant upgrade from the old one. It is now based on JSON, a popular data interchange format, which makes it more accessible and easier to manipulate. This means that developers can now read and write Sketch files programmatically, opening up a whole new world of possibilities for automation and integration with other tools. The new format also includes a preview image of the document, which can be useful for quickly identifying files.

How does the new file format impact the workflow in Sketch?

The new file format can greatly enhance your workflow in Sketch. Since the new format is based on JSON, it allows for more efficient data exchange between Sketch and other tools. This means you can automate repetitive tasks, integrate Sketch with your preferred design tools, and even build your own plugins to customize Sketch to your needs. The new format also includes a preview image, which can help you quickly identify your files.

What is JSON and why is it important in Sketch’s new file format?

JSON, or JavaScript Object Notation, is a lightweight data interchange format that is easy for humans to read and write and easy for machines to parse and generate. It is based on a subset of JavaScript and is a text format that is completely language independent. In Sketch’s new file format, JSON is used to represent the document structure, making it easier for developers to read and write Sketch files programmatically.

Can I still open my old Sketch files with the new file format?

Yes, you can still open your old Sketch files with the new file format. Sketch has ensured backward compatibility, which means that even though the file format has changed, you can still open and work on your old files without any issues.

How can I take advantage of the new file format to automate tasks in Sketch?

With the new file format, you can use scripting languages like JavaScript to read and write Sketch files, allowing you to automate repetitive tasks. For example, you could write a script to automatically update the colors in a Sketch document based on a JSON file, or to generate a Sketch document from a set of images.

What are the benefits of having a preview image in the new file format?

The preview image in the new file format can be very useful for quickly identifying files. Instead of having to open each file to see what it contains, you can simply look at the preview image. This can save you a lot of time, especially when you’re working with a large number of files.

How does the new file format affect the performance of Sketch?

The new file format does not have a significant impact on the performance of Sketch. The use of JSON might make some operations slightly slower, but the difference is usually negligible. The main advantage of the new file format is not performance, but the increased flexibility and possibilities for automation and integration with other tools.

Can I still use my old plugins with the new file format?

Yes, you can still use your old plugins with the new file format. However, some plugins might not take full advantage of the new possibilities offered by the new file format. If you’re a plugin developer, you might want to update your plugins to make use of the new file format.

How can I learn more about the new file format?

Sketch provides a detailed specification of the new file format on their developer website. This specification includes a description of the document structure, the different types of layers, and how to work with images and text. If you’re a developer, this specification can be a great resource to learn more about the new file format.

What are the future implications of the new file format?

The new file format opens up a whole new world of possibilities for Sketch. It makes Sketch more accessible and flexible, allowing for better integration with other tools and for more powerful automation. This could lead to a whole new generation of Sketch plugins and tools, and could even change the way we work with Sketch.