Open format: how Sketch’s open file format can supercharge your workflows

At Sketch, we strongly believe that you own everything you create, and we’ve always prioritized putting you in charge of what happens with your documents. That’s why our file format is completely open; it’s a published spec, so you and third-party tools can read and modify it. But it’s about more than putting you in control. With an open format, you can automate actions in your Sketch documents without plugins — or even without Sketch.

In this series, we’ll show you how to use Sketch’s open format to automate and improve your design and development workflows. First, let’s take a look at how this series can benefit you:

For designers

If you’re a designer looking for ideas to make your work less repetitive. Spending less time doing rote work means you have more time for the important parts of your job.

For managers

If you’re a manager looking for ways to maximize your team’s productivity and happiness.

For developers

If you’re a developer looking for a reference for automation using Sketch’s file format, or for some new challenges to improve the health of your team’s workflow.

What is an open format?

An open format allows anyone to read and write documents without worrying about copyright, licensing fees, or any dependency on proprietary tools. Open formats are fundamental to avoid vendor lock-in, and a must if you’re worried about data ownership and freedom of choice.

Plus, when the proper tooling is available, open file formats allow you to read, create, and modify documents programmatically.

In Sketch’s case, you can use our file format tools to work with .sketch files without having to use the Mac app at all. This lack of dependencies extends to the operating system too. You can read and write .sketch documents on macOS, Windows, and Linux, opening a world of possibilities when it comes to continuous integration on your design and development workflows.

The world is your oyster

So far we’ve talked about open format in theory, and you may be wondering what you and your team can do with it. Here are a few examples — we’ll be diving into some of these in more detail later in the series.

Keep design tokens updated

Use automation to keep your Design Tokens (or production code!) updated whenever your design files change. You can reduce the friction in your design handoff process (or even eliminate it) by automating the transfer of knowledge. The next article in the series, Open format: how to read Sketch files and convert to JSON, explains this in detail.

Modify Sketch files programmatically

Quickly generate a Sketch Library including the colors defined in your CSS / Storybook / Design Tokens. The third article in this series, Open format: how to modify Sketch files programmatically, explains how to do this with a simple example.

Automate Library production/releases/mac

Process a few thousand icons in SVG format, and turn them into a Library. Again, you can automate this process to update the Library whenever you change the original icons. We talk about that in more detail in the fourth article of this series, Open format: how to automate the creation of an icon Library.

Do it all using other tools

As a bonus, you don’t have to use Sketch to run these automated tools. Instead you can use CI/CD services, including GitHub Actions, to generate the Library automatically whenever the source of truth changes. We show you how in the fifth and final article of the series, Open format: using GitHub Actions to work with Sketch documents.

And so much more…

The fun doesn‘t stop there though. You can also export production code from the raw data in your design documents, and grab information about Design System modules directly from the file format. Which means your development team doesn’t even need to open or inspect design documents — they can just see the data they need in the raw files.

You can even extract all the text content from a design document, to send it for copy editing or translation. And vice-versa — add the strings from a translation service back into your design documents. All this can happen automatically, whenever the design document or the text content changes in your code repository.

Meet Monday Studio

To give some context to these articles, we’ll be following along with a fictional company, Monday Studio.

Monday Studio has a basic design system in place and uses a classic design and development workflow. We’ll introduce small improvements to their process in each article, and end up with a modern, fully automated workflow that reduces repetitive work and gives both designers and developers more time to concentrate on the interesting parts of their jobs.

Your technical stack will probably be quite different from the one Monday Studio uses, but the core concepts apply to almost every team doing design and development.

Monday Studio develops a multi-language React web app, using Sketch for UX and UI design, and Storybook to manage their library of components. They keep a shared Sketch Library updated with changes from the Storybook components, using a manual process.

For multi-language content, they rely on Crowdin. They use the Sketch plugin to keep design documents updated with the latest changes.

They’re happy with their current workflow, but feel like they spend too much time moving data back and forth.

In the rest of this series, we’ll see how using Sketch’s open file format can help them (and you!) work smarter, with less repetitive work.

Moving forward

We’re now ready to get started with a practical example on the next article in the series, Open format: how to read Sketch files and convert to JSON.

Have you built something worth sharing in this series? Have an idea for automation, but need help with development? Got feedback about the development experience? Get in touch with us at [email protected] or on Twitter!