Simple Git versioning for Sketch

Kryštof Korb
Nov 2, 2017 · 3 min read

If you’re designing in Sketch, you probably already know that the version 43 introduced a new file format. That's quite a thing and there’ve been written tons of posts describing what that makes possible.

Basically, each Sketch file is just a zipped bunch of JSONs and images with .sketch extension. This means there is a space for version control, because everything (except images) is represented in plaintext.

This is how the Sketch file looks inside

There are already few tools that takes advantage of this, namely Kactus or Abstract for example. But we were looking for something simpler and more straightforward.

So if every Sketch file is just a ZIP, we only need to automate the unzipping and zipping process, right? Right. And fortunately, there are Git Hooks to help us.

TL;DR

  1. Install Python 3 *
  2. Download the pre-commit, post-merge and post-checkout hooks from our GitHub repository
  3. Copy them into .git/hooks folder in your repository
  4. Make the scripts executable: run chmod +x .git/hooks/pre-commit .git/hooks/post-merge .git/hooks/post-checkout in your repository
  5. And try to commit some Sketch files!

* Actually, this is not necessary, but recommended, see the explanation below. The easiest way is to install Homebrew and then execute brew install python3 .

How does it work?

The pre-commit hook does three things:

  1. unzips all staged Sketch files,
  2. prettifies the JSONs so that we can use line-level versioning and
  3. adds the whole Sketch file-folder to the commit.

All you need is just to commit the Sketch file you want and the magic happens behind the scenes.

The second thing is especially important. Sketch uses minified JSONs (for obvious reasons), but that isn’t very handy for versioning. The reason why I recommend installing Python 3 is that the utility we're using for prettifying (json.tool) also sorts the keys alphabetically in Python 2 and I wanted to keep the Sketch files as much untouched as possible.

The post-merge hook is much simpler: it just zips the contents of the folder and creates back the Sketch file.

Post-checkout hook is exactly the same as post-merge hook and does the same thing when switching branches.

Hmm, so what?

This is Sketch commit on GitHub

This is just a first try and we’re beginning using this approach in Cloudaper right now, so I guess there will be further development, but we’d be happy about any feedback or even a pull request. Happy committing!

Update (November 21)

We've run into some minor issues, mainly with committing the Sketch file itself. So now the scripts works in the way it only backups the untouched Sketch files into special folder and never commits the work-in-progress Sketch file, which is recreated with each pull or branch switch. This should enable easier conflicts resolving.

Cloudaper

Stories about how we’re making the world paperless: a little bit of our approaches in UX design, development & everything else

Kryštof Korb

Written by

Cloudaper

Cloudaper

Stories about how we’re making the world paperless: a little bit of our approaches in UX design, development & everything else

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade