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!
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
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?
Moving Backgrounds: When, Why, and How to Use Them
By Irwin Hau,
Moving backgrounds look cool, but they're not always a good idea. Learn their pros and cons, and when might be a good time to use one.
Five Ways to Remove Backgrounds in Photoshop in 2021
By Amber Leigh Turner,
Need to remove an image background? Learn five ways to remove backgrounds in Photoshop, depending on the kind of image you're working with.
Figma Prototypes: A Quick, Step-by-Step Guide to Useful Mockups
By Daniel Schwarz,
Take your wireframes and mockups to the next level by creating interactive FIgma prototypes that are navigable and animated. Here's how!