Workflows. Manual version control for Sketch files with GitHub.

With version 43 Sketch introduced a completely new approach to its file structure. Eventually, .sketch file became compatible with .zip format, which technically allowed it to be extracted into a folder.

Extracted folder.

Extracted Sketch file contains:

  • .png files in /images and /previews, which are pretty much screenshots of its artboards;

To get a better picture of the new file structure, check out “New file format in Sketch 43.” article by ale.

What to do with that.

The .JSON format potentialy allows treating Sketch files as code, making it possible for designers to adapt all the benefits of developers’ workflow, such as sharing, collaborating, updating and reusing design files, as well as maintaining it’s version control with git on GitHub.

Moreover, it finally allows teams of developers and designers to organize their work around the same repo, making it more efficient and simpler to maintain the code and update design systems.

Besides that, now designers can work together on open source projects, using design files from initial commits as a base, forking them and building upon them. Such projects could benefit the whole design community, allowing to create, reuse and evolve basic design patterns and techniques.

Take a look at “With Sketch 43, Design IS Code & Code IS Design.” article by Andree Huk, to learn more about benefits of implementing version control in design workflows.

How to do that.

The version control of Sketch files with Github is not a new idea. In this article I will describe how to manually create and update design repository, using only default macOS tools.

Currently, there’re a few well-developed solutions for such workflows, which could be much more productive and convenient to use, such as:

  1. Kactus, which started as Sketch plugin and evolved into a standalone product Kactus.io with an open source repo.

More reading on comparison all the version control options in “Abstract vs Kactus vs Plant: a guide of version control solutions for Sketch.” article by Marie Lu Vinh.

Manual solution.

Here’s a snippet of Version 1 of the initial Sketch file.

Version 1.

Uploading files to GitHub:

  • Sign up for a GitHub account, go to the home page and click the green New repository button at the top right corner, fill out the Repository name field and click Create repository button at the bottom;
cd [path to your extracted folder] git initgit add .git commit -m "Initial commit."git remote add origin [URL to your newly created GitHub repo]git push -u origin master

Note: Hit Return after each line. In the end, the system will ask you for your GitHub account login and password.

Initial commit.

This process finalizes uploading of the Version 1 of the initial Sketch file to the GitHub repo. Now, to iterate on your project, you need to convert it back to the Sketch file format by right-clicking the .zip file in your project folder and renaming it back to .sketch.

Here’s a snippet of Version 2 of the Sketch file.

Version 2.

Updating files on GitHub:

  • First, you need to change the .sketch back to .zip format;
cd [path to your extracted folder]unzip [your file name].zip
  • The system will prompt you to replace a document (first in the folder, usually .JSON), type A (for “All”) and hit Return. All the files inside of your folder will be replaced with their newly updated versions;
git add .git commit -m "Version 2."git push -u origin master
Updating to Version 2.

To iterate more on the project, you basically need to follow the same steps: Rename file to .sketch > Iterate on the design in Sketch > Rename back to .zip > Unzip the file from Terminal > Commit the update to GitHub.

Cloning files from GitHub:

If you need to have a copy of the project in a different location or another designer should work on the master repo of your project, you would need to clone your repo into a new folder or on a new machine by following these steps:

  • Create a new folder from Finder and navigate to it in Terminal:
cd [your new folder]git clone [URL to your master repo on GitHub]
  • The process of iterating on the design is similar as described before. To update the master repo type the following:
git add .git commit -m "Version 3."git push -u origin master
Cloning the repo.

GitHub also allows creating a copy of the master repo and fork from the initial version of the project. This feature makes it possible to iterate and collaborate on bigger projects, such as open source, allowing to reuse and evolve the code by many collaborators.

To understand the forking process and its techniques, check out GitHub Help documentation.

Another great GitHub feature is the ability to visually check all iterations. Every time the project files are being updated it reflects all the changes in the commit history. By opening the commits tab in the top right corner, you can see the list of all commits. Choose the commit you are interested in and scroll down the page, you can see all the changes in code and visual comparison of updated files.

Commits comparison.

Check out GitHub repo with all the updates and commits described in this article.

Creating shortcuts

You can also speed up the process of converting files from .sketch to .zip and back by creating shortcuts with Automator:

  • Open Automator app on macOS, click New Document and choose Service, then search for Rename Finder Items and drag that workflow into the window;

I personally chose Control+Command+Z to convert to .zip, and Control+Command+S to convert to .sketch.

Thank you for taking your time to read this article and I hope you can find it somewhat useful. Very soon I plan to work on a few open source design projects, so stay tuned for further updates on Twitter @zhurankou.

Designer at OneDrive.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store