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

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!

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

by Daniel Schwarz via SitePoint