Skip to content

Instantly share code, notes, and snippets.

@romannurik
Last active February 2, 2023 18:38
Show Gist options
  • 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"
@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