Okay, Google: How do I open a Sketch on…

… or without Sketch app? We’ve got good news. You don’t have to search any longer.

From now on, enables anyone to import, open and inspect layered Sketch designs on Windows, Linux (yes Ubuntu too), or on macOS without Sketch app. It even works in the browser.

How is this possible? We can read the Sketch data format, translate it into our app-independent format called Octopus and then render it with our Monroe rendering. Wait, my head is spinning, all I care about is: Will my design look the same? Yes, try it on your own here and see for yourself below:

Just to clarify:

• You don’t need the Sketch app to import designs to Avocode now.
• You can import a Sketch file to Avocode desktop or web app from any platform.
• You don’t need to prepare assets or set Exportables. Since Avocode renders the whole design, you can select and hide layers, layer groups or multiple layers at once, and export them in any resolution.

Building world’s first cross-platform Sketch integration was challenging

Sketch is currently the most popular screen design tool on the market. It has been disrupting the design tool market ever since its release in 2010. It gained popularity especially because of the early introduction of Artboards; granular smart components called Symbols and its extremely lightweight vector format. Recently it added Libraries for Design System Management and Prototyping.

Avocode has been supporting the Sketch app since November 10th 2014. Until now, the only way to import designs to Avocode was via a Sketch plugin (quite like with other design hand-off tools). Unfortunately, this solution has many setbacks:

• The person who wants to hand-off and inspect the design is forced to have Sketch. Since the Sketch app works only on macOS, this person by definition has to be an Apple user.
• It takes too long to upload a design, because the plugin has to send every layer as a PNG.

While Sketch offers a great platform for 3rd party developers, its format development and new features pose a lot of challenges for our integration. With every new version of Sketch, we have to check if our plugin works and often tweak it so it would — which is always slowing us down.

We have always wanted to be independent on design tools, so we could give designers and developers the freedom to open and access virtually any design format on any platform. However, to do that, we had to build a complete rendering service. We needed to account for every design part representation of the Sketch design format. Even though we learned how to parse and render most of the design format quite quickly, we still needed the Sketch plugin to send us the rest — for example, text layers. Since we had to assemble parts sent by the plugin and parts that were rendered on our side, the result was not always as precise as we would like. The only solution to that problem was to render everything — including text layers and Symbols.

We have already described some of the obstacles of our text rendering in our previous article about Adobe XD, so let’s focus on Symbols now. When you import a Symbol to a particular artboard in Sketch, the layer data are not actually there. The only available reference is the Symbol Master — a layer or an artboard containing the Symbol’s actual data.

So when you upload a Sketch artboard via the Sketch plugin to Avocode, we only receive the information that this is a Symbol and we get its Master. As you might have guessed this gets especially tricky when you want to contextually change the Symbol’s color (apply an Override) or the Symbol’s width (apply resizing rules).

We had to find a way to recalculate the resizing rules and build a Symbol expander that would expand the Symbols to all of its nested states. This way we can display the Symbol as a normal layer in the Design view. When you’re inspecting a button inside the context of a given artboard, you only see the correct layer with applied overrides and don’t have to bother with the Symbols master.

For example, the logo below, which is actually a set of multiple shapes, can be easily selected and exported as SVG.

At the same time, all the layers of the logo are actually nested inside a bigger header Symbol. If you need to access Symbols master, just can click on Open Symbol and the master version will open in a new tab.

Thanks to our Symbol expander we’re finally able to fulfill the wishes of our customers. Additionally, the new Monroe rendering has also dramatically sped up design processing, improved Sketch rendering precision and most of all allowed anyone to have access to Sketch designs without the Sketch app.

Here’s a list of supported features of the Sketch format:

There are still a lot of things that could be done better to make our design import faster. We’re also planning to add the long requested Sketch Grid, Layout and Guides, so you know how wide design columns should be while inspecting. Up next we’d like to give you an option to play Sketch Prototypes in Avocode.

“That’s all cool, but I really just want to open a Sketch designs without the Sketch app.”

Getting started

We understand. Just start by logging in to your Avocode account or grab a new one here and try the Sketch integration free for 14 days.

Then open any project and simply drag & drop the designs inside. If you’d like to add a new design version, just drag & drop it on top of a Sketch file.

Then just double-click to open the file and double-click on any artboard inside.

You can find out more in this tutorial.

If you have any feedback, please leave it in the comments. Thanks! 🥑🙌🏼

Avocode is a design hand-off and inspect tool for teams which are building next-generation Web, iOS, & Android projects.