Skip to content

Instantly share code, notes, and snippets.

@romannurik
Last active February 2, 2023 18:38
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save romannurik/1a92be90a3ca326eb9e166cc4721e87c to your computer and use it in GitHub Desktop.
Save romannurik/1a92be90a3ca326eb9e166cc4721e87c to your computer and use it in GitHub Desktop.
Cheap Sketch file version control with Git + Kaleidoscope
# Add this to your .git/config file
[diff]
tool = SketchKaleidoscope
[difftool "SketchKaleidoscope"]
cmd = ./util-sketch-kaleidoscope-diff.bash \"$MERGED\" \"$LOCAL\" \"$REMOTE\"
#!/bin/bash
# Check this file into your git repo
MERGED="$1"
FILE_1="$2"
FILE_2="$3"
BASENAME=`basename "$MERGED"`
BASENAME="${BASENAME%.sketch}"
# Create temp directories to export stuff into
TEMP_DIR_1=`mktemp -d`
TEMP_DIR_2=`mktemp -d`
function unpack_sketch_file {
IN_FILE="$1"
OUT_PATH="$2/$BASENAME/"
SKETCHTOOL="/Applications/Sketch.app/Contents/Resources/sketchtool/bin/sketchtool"
echo "$BASENAME: Unpacking $3..."
mkdir -p "$OUT_PATH"
"$SKETCHTOOL" export artboards "$IN_FILE" \
--output="$OUT_PATH/artboards" \
--include-symbols=YES \
>/dev/null
"$SKETCHTOOL" export pages "$IN_FILE" \
--output="$OUT_PATH" \
--max-size=1000 \
>/dev/null
}
# Unpack sketch files
unpack_sketch_file "$FILE_1" "$TEMP_DIR_1" "left sketch file"
unpack_sketch_file "$FILE_2" "$TEMP_DIR_2" "right sketch file"
# Kaleidoscope diff on the two paths
ksdiff --partial-changeset -- "$TEMP_DIR_1" "$TEMP_DIR_2"
@oddjones
Copy link

oddjones commented Apr 5, 2019

Hi there - I'm currently trialling Kaleidoscope as a diff tool for sketch but stumbling at the first hurdle (I'm aware of the sketch file format's zip properties and have heard mention of unpacking it to work with GIT) - I stumbled across this GIST from a google search - can you explain what it does please?

@romannurik
Copy link
Author

Super delayed response! This script unpacks both the previous (left) and new (right) Sketch files using sketchtool (a binary that ships with Sketch) and then compares the two results (which are each directories of png screenshots of artboards)

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