How to diff your .sketch files in Git

sketch-diff-in-git.md

Using sketchtool to diff your .sketch files using text

Requirements

You need to have SketchTool installed somewhere in your path.

Setup

Add this in your ~/.gitconfig file (for some reason, it won't work in a local .gitconfig file):

[diff "sketchtool"]
  textconv = "sketchtool dump"
  cachetextconv = true
  binary = true

and then add this in your local or global .gitattributes file:

*.sketch diff=sketchtool

Usage

Now, whenever you modify a .sketch file in your repo, running git diff will produce a nice text diff like this:

This trick only worked for me with a project-local .gitattributes file, not a global one. Not sure why. @bomberstudios thanks for the tip!

@ZevEisenberg You should set core.attributesfile in the global gitconfig file. Like this:

[core]
    attributesfile = ~/.gitattributes

You could also run the command git config --global core.attributesfile ~/.gitattributes to set the path for your global gitattributes file.

Thanks for sharing this. One thing I've run into is many changes that appear to be unrelated to the change I made. In fact, to test this out I just changed the border radius on a single rectangle and can't find the change in the tool. Any suggestions?

Has anyone been able to achieve the same in SourceTree?

This works for me in Sourcetree 2.7.6. I put the absolute path of sketchtool in my ~/.gitconfig and added a single-line .gitattributes file as per above, directly in the repo. Now in SourceTree, instead of seeing a comparison of the bitmap preview of the doc, I see a text diff of the changes.

Thanks

Note that as of recently, sketchtool doesn't come with an installer any more. I've worked around this by adding /Applications/Sketch.app/Contents/Resources/sketchtool/bin/ to my $PATH. You could probably also use a symlink.