Skip to content

Instantly share code, notes, and snippets.

@bomberstudios
Last active May 17, 2024 02:53
Show Gist options
  • Save bomberstudios/c9e6975acd4d4d84a728 to your computer and use it in GitHub Desktop.
Save bomberstudios/c9e6975acd4d4d84a728 to your computer and use it in GitHub Desktop.
How to diff your .sketch files in Git

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:

screenshot 2015-11-16 09 15 50

@seehadley
Copy link

seehadley commented Sep 13, 2016

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?

@milsanore
Copy link

Has anyone been able to achieve the same in SourceTree?

@AndyDentFree
Copy link

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

@ZevEisenberg
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment