Sharing files via Dropbox, Box, iCloud, Sync is a thing of yesteryear. The day just before Sketch 43 launched, I published the article . The article covers what the open format will mean and imply for the design profession. Since writing the article I kept thinking about the challenges that teams would face in making the open format a part of their design workflow. Design Is Code and Code Is Design What intrigued me the most was how practical the open format is . right now ( blended.io will launch two workshops: and ) Pssst: Version-Controlled Sketch for Skillful Designers & Design Teams Git for Marvellous Designers summary True design file versioning is finally possible with Sketch Going back and forth between the .sketch file and its core data can easily be automated In order to find the lowest common denominator, we decided to use scripts to push and pull data You don’t need to know much about Git to apply the workflow The workflow is smooth if you are OK with Mac’s Terminal every once in a while our goal Integrate Sketch into a versioning workflow based on Git whilst making it as simply as possible for non-technical people to use it (read about the benefits ). here Step 1: Understand the new Sketch file format Step 2: Use a Git platform to collaborate across Sketch files Let’s get to the details. Step 1: Understand the new sketch file format As described in the initial Sketch now allows to get to the data behind the visuals. What do we get: The unzipped .sketch file contains a small preview image and JSON data for all layouts (as well as some user- and document related data). The pages folder contains one single JSON file for each page. These JSON files contain the data for every single element that is designed in Sketch. Furthermore, the .sketch file contains originally sized images for all image assets. Design Is Code & Code Is Design article There are a couple of things to note about extracting or creating a .sketch file The previews folder and preview image are not required for the .sketch to work For the zipped .sketch to work, one has to make sure to only zip the files itself, without its parent folder (sounds obvious, yes, I got trapped a couple of times) Step 2: Use a git platform to collaborate with sketch (True) collaboration via Github or Gitlab requires data to be human-readable (aka text files) instead of in a binary format. The vector data comes as JSON which is good for versioning. All binary images are also included which is not great for versioning. To be clear, versioning does also work with binary files. The difference is though that in versioned binary files, the entire file will be stored with each version. When versioning is applied with text files only the differential change will be recorded. This mechanism keeps repo sizes small and maintains speed. Although having binaries in a repository isn’t great, storing original images isn’t all that bad: A “change” will be recorded in the repository first when an image is added and second when it is removed (for a max. of two records). All changes in between are simply references to the original source file and therefore the source is not stored again and again. The preview image does change constantly and, therefore, we decided to remove it. getting to the nitty-gritty Let’s use Github as the collaboration platform for our imaginary team of designers (and developers). We have two issues to start with: We have to get the data out of .sketch first before we can store it on Github. The entire process between CMD+S in Sketch and upload to Github isn’t simple (as of now). We have to automate those steps in order to kick-start or increase the adoption of a repo-based workflow for designers. The conceptual workflow would be as follows A designer makes changes to the Sketch file, does CMD+S (save) and uploads the Sketch data to Github. Any other designer then downloads the latest state, opens the Sketch file and continues their work. Based on the capabilities that Sketch gives us now, the actual base-bones workflow as outlined below is this: A designer makes changes to the Sketch file, does CMD+S (save) and executes the terminal command (from within the repo) in order to commit and push the changes to Github. $ sh upload.sh "message" Any other designer executes the terminal command (from within the repo) in order to download the latest state and to continue her work. $ sh download.sh how to share sketch files The upload script extracts the core Sketch data from the file .sketch and then uploads (commit and push) only that core data (plus the scripts on the first push). The core data is versioned on Github, hence, we do not need the original .sketch file. It would only clog the repo and reduce speed. The download script pulls all new data from the repo and then creates the sketch file .sketch which you can open with Sketch.app. You can execute the script like this: Open Terminal.app (CMD+Space > type “Terminal”) In Terminal type cd and drop and drop the repo folder from Finder into the Terminal window. Now the file path will appear behind the cd with a space in between. Hit Return and you will directly be moved into the repository folder. Type or . A message must be added otherwise will be used as the (commit) message text. sh upload.sh "message" sh download.sh $1 how to set up a new design repository Download (or clone) the from Github (direct download) repo Extract the repo zip and remove all .sketch files and folders, add your .sketch files Open the scripts and in TextEdit (or any other text editor) and add the filenames without the extension into the like so . Save both scripts. upload.sh download.sh .sketch "" files="filename1 filename1" See above on how to execute the scripts How to add Sketch files into the file upload.sh script. How to add Sketch files into the file download.sh script. For you to test-drive the workflow, you will find the entire repo on as well as both scripts, and . Github.com upload.sh download.sh Pros Be able to version the data that is the core of every visual you see in Sketch is great! A designer does not know much about Git nor Terminal to be able to use the workflow Collaboration platforms like Github or Gitlab are already widely spread and in common use Designers and developers are using the same platform (designer will learn more about Git and code workflows) Data can be hosted securely without the need of using a plethora of storage systems with are not made for design collaboration in the first place The scripts work with >1 Sketch files in the main folder Designers can finally get rid of naming conventions like file1.sketch1, file2.sketch, …, file12.sketch, file12-final2.sketch etc Cons The process is not yet simple to use, I mean, really simple to use Terminal has to be used or either a full executable that runs on click (visit the at our friends Terminal 101 @tower The sketch filenames have to be added manually to the scripts When someone downloads the latest changes from Github, the .sketch file will be overwritten. Therefore, it is advisable to close the file in Sketch prior to download Sketch filenames must not contain spaces as it will break the scripts what to improve I am aware that we could use Githooks, a NodeJS file watcher or a Sketch plugin to streamline the actual process above (I am happy to hear your feedback and suggestions). I did choose to build a script because it allows us to test-drive the lowest common denominator. A simple workflow will be crucial for non-technical people to use repos for their design work. Using scripts in Terminal isn’t the greatest thing since sliced bread and therefore this process and workflow is to be improved quite a bit to ease the way. Besides, auto-save should be deactivated as it might overwrite freshly pulled data. I am very much convinced that the fundamentals described above are the way to go. Now, we must come up with ways to simplify the workflow even further. Please get in touch to discuss how to make this happen. Special thanks to for reading a draft of this. Kristina @kriesse We at are incredibly excited and passionated about the potential innovative leaps for software design and engineering in fintech, investtech and industry 4.0. Thanks for reading. blended.io Get in touch! Stay on the edge about innovation, experience design or engineering! No spam and worthwhile content . Get hands-on articles only See for Mac for details on what I describe above in Terminal. Update: this post and great tool ( blended.io will launch two workshops: and ) Pssst: Version-Controlled Sketch for Skillful Designers & Design Teams Git for Marvellous Designers Originally published at blog.blended.io on June 15, 2017.
