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;
• .JSON files in /pages and its root, which is basically the Sketch document’s data itself.

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.
2. Abstract, a fully developed version control and collaboration product for design teams. More about Abstract in “In search of the perfect workflow: version control for Sketch, powered by git and Abstract.” article by Marie Lu Vinh.
3. Plant is another version control product for designers, described in “8 Reasons why designers use Plant for version control.” article.
4. And, basically, a manual solution by Andree Huk, described in his “Real Design Version Control & Collaboration For Sketch Is Finally Here.” article, where he uses a script to implement the version control.

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;
• Open Finder, go to your folder with Sketch file, right-click on the file and choose Rename. Change your file’s format to .zip, click Use .zip to confirm;
• Double-click on the .zip file to extract it to a folder. Move your .zip file into the extracted folder;
• Open Terminal app on your Mac and type:

cd [path to your extracted folder] 
git init
git 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;
• Open Terminal. If you have closed it before, change your location back to the project’s folder and unzip the file:

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;
• Now, proceed with the following in Terminal:

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;
• Change Add Date or Time to Replace Text, type “sketch” in Find field, then change the full name to the extension only and type “zip” in Replace field; save and name the service;
• Create similar service for “zip” to “sketch” replacement, save and name it accordingly;
• Open System Preferences > Keyboard > Shortcuts > Services, find your services under Files and Folders section and create meaningful shortcuts for them.

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.