Wondering how open the Sketch file format actually is. Here’s a story behind the very first ever PSD to Sketch Design Converter that is now used by thousand of designers, based on technology we already had in the house...

The journey from Photoshop to Sketch

Photoshop and Sketch are significantly different tools. One created for bitmap image editing, the other for vector based app design. However, Photoshop has been and still is being tweaked for user interface design.

With the rise of mobile, most designers started to realise the obstacles of Photoshop driven design workflows. Suddenly you'd have to design tens if not hundreds of screens. Keeping all of this in one file requires not only a lot of data storage but also a lot of patience with moving and sharing large files. When Sketch showed up, it seemed both as a godsend and a natural development of the design workflow.

This year we have assessed data from over 1,000,000 Photoshop and Sketch designs that were uploaded to Avocode in 2016, and one of the most curious things we found out was that Photoshop is no longer in the lead.

When we asked various designs teams about switching to Sketch, the biggest problem was, that their entire design system is in Adobe Photoshop. And the idea of recreating all this – well that's just too much time and effort they don’t have. (As a matter of fact, our product designer at Avocode went through the same experience he took the time to recreate all design assets layer by layer.)

Meanwhile, Avocode is able to render uploaded Photoshop designs this means, disassembling the PSD format data structure (parsing) on our servers, translating it into our application independent data format and then rendering all layers and showing all assets (images) in the Avocode UI as close to 1:1 as possible. The reason why we have our own rendering is that unlike any other tool on the design inspecting market, we allow the developer export any layer from the design. All other tools require designers to prepare assets in the PS or Sketch design by renaming layers and setting Exportables ? which prolongs the design handoff and limits developers freedom.

Then Sketch 43 was introduced with their Revised file format. Some even preached it?s open and it will change the game. At the time we were already able to read both Photoshop data format and the old Sketch file format (SQL database with Binary Plist documents), however, the real struggle was writing it creating a Sketch file. When Sketch released the new more open format, we thought creating a converter which would assemble a Sketch file would be a piece of cake?

1) New Sketch app format is not human readable

To clarify, Bohemian Coding didn't announce the new format as open, but only as revised. Nevertheless, there was a lot of buzz in the design community about how open the new Sketch design format actually is, and what could it mean.

Well, a neat JSON would be swell. But this thing is nothing close to neat JSON. In reality, it’s a ZIP file with a lot of JSON files, each page equals one JSON file. However, text layers are described as BASE64 encoded Binary Plists, pasted inside the JSON files. Though the format is different, the data structure is 95% same as the old one.

Since the format is not human readable, we thought there might be some documentation, but nope there’s nothing. Therefore you just have to keep looking at it until you think you understand it.

Quite a ride really. Thanks to our experience with the old format we figured it out in about 3 days. However, the more challenging part was still ahead of us: assembling a Sketch file.

2) Building a Sketch file from a drastically different data structure (called PSD)

Yea, yea, we know Photoshop and Sketch are different tools. We also know that their data format semantics are significantly different. But still, we were surprised when we saw the scope of things you can do in Photoshop in comparison to Sketch. In other words, Photoshop allows designers to be super messi while Sketch is puristically simple.

Plus there were more serious matters:

• A square in Photoshop is just a set of 4 lines. In Sketch there are additional metadata about the number of corners.
• There is currently no inner and outer glow support in Sketch. So we’d have to fake them somehow.
• There are several types of masking (at least 5) in Photoshop. Sketch has only alpha channel and vector clipping masks.
• Photoshop has its own text layer rendering, while Sketch is using macOS text rendering.

Additionally, thanks to this project we revealed and fixed a few mistakes in our internal app independent data format, for example with parsing the design grid and assigning it to a specific layer.

Nevertheless, after over a month of development, testing and fixing (with the help of our amazing Community!) we were able to build a functional design converter, which can assemble the design layout with named layers, vector shapes and most layer effects.

The result

Our PSD to Sketch Converter converts even large files (around 500MB) within a matter of minutes including upload, parsing and processing. So far we have converted 11,769 Photoshop designs with an overall size of 61.6 GB, and we have a 99% conversion success rate.

Our goal was not to create the impossible in Sketch but to be the first ones on the market who can not just read but also assemble the Sketch data format. Our converter is indeed the first one out there and it was warmly accepted by the design community and to date we got got 849 upvotes on Product Hunt.

Convert as many PSDs to Sketch as you like

See for yourself how close to your expectation our PSD to Sketch conversion works. It's free.

1. Convert your PSD to Sketch here

Here’s a step by step tutorial, how to use our Converter.

2. Join our Slack Community of Beta testers

3. Report bugs to our Github

4. Tell us if you find it useful or what features should we add

We're still in Beta. Here’s what?s next:

Since the text line height is still slightly broken, we need to fix calculating text layer bounding box. It requires a lot of mathematical calculations, and we want to release it once we’re absolutely sure we got it right.

We also want to come up with a few faking techniques for some layer masks, layer styles like Inner and Outer glow and Circular and Angular gradient color fill options.

And last but not least we’re working on improving the performance to speed up the conversion so you can get your Sketch files faster.

Once we get this right, we might be adding 3 new converters:

• PSD to Xd
• Sketch to Xd
• Xd to Sketch

And in case you’re curious about Sketch to PSD conversion – we’d like to build it too. Please understand that assembling a PSD data format is a much bigger project than creating a Sketch file. Until then, stay tuned and make sure to check out our core product Avocode – which has made our design parsing technology possible.

If you want to be the first to know about things we are working on, follow us on Twitter or join our community.