.sketch XML Representation

[JohnCoates]

One of the main reasons for building SketchKit is to make it easier to collaborate on Sketch projects.

Right now if you commit a .sketch file all you get is an opaque binary. What if you change the name of a layer and want to just commit that change? You need to commit another full binary. You're not able to track changes like other projects. I'm working on being able to represent full Sketch documents in XML. The way this will work is that you'll save a Sketch document as .SketchML file (Sketch Markup Language). This will actually be a folder, and inside will be a purely text XML file representing the entire document, as well as an assets folder that contains all raster images.

Any feedback is welcome!

Here's an example of the XML I have so far, representing an oval shape.

<shapeGroup name="Oval 1">
<style>
    <borders>
        <styleBorder thickness="1" position="0">
            <color red="0.592" green="0.592" blue="0.592" alpha="1"/>
        </styleBorder>
    </borders>
</style>
<bezierPath>
    <moveTo x="126" y="199"/>
    <curveTo x="199" y="126" controlPoint1x="166.3167867354" controlPoint1y="199" controlPoint2x="199" controlPoint2y="166.3167867354"/>
    <curveTo x="126" y="53" controlPoint1x="199" controlPoint1y="85.6832132646" controlPoint2x="166.3167867354" controlPoint2y="53"/>
    <curveTo x="53" y="126" controlPoint1x="85.6832132646" controlPoint1y="53" controlPoint2x="53" controlPoint2y="85.6832132646"/>
    <curveTo x="126" y="199" controlPoint1x="53" controlPoint1y="166.3167867354" controlPoint2x="85.6832132646" controlPoint2y="199"/>
    <closePath/>
    <moveTo x="126" y="199"/>
</bezierPath>
</shapeGroup>

[bomberstudios]

Why XML and not JSON?

Take a look at this thing I found some time ago if JSON is an option you'd consider: https://gist.github.com/bomberstudios/c9e6975acd4d4d84a728

[JohnCoates]

@bomberstudios
Hey that looks pretty cool, I wish I had seen your gist sooner!

Before choosing XML I looked through JSON, YAML, TOML, etc.

I chose XML because I thought it looked pretty good and with the support in the core libraries it's pretty easy to encode and decode without needing an extra dependency. I usually work with JSON so it was a difficult choice.

[bomberstudios]

Check https://developer.apple.com/library/ios/documentation/Foundation/Reference/NSJSONSerialization_Class/

[bomberstudios]

Sorry, that was the iOS version. OSX version here: https://developer.apple.com/library/mac/documentation/Foundation/Reference/NSJSONSerialization_Class/

[JohnCoates]

I've used that class in many projects, and it's great for certain circumstances, but I always end up developing a wrapper around it or using something like https://github.com/icanzilb/JSONModel for more complex tasks. That being said, I think I'll have to do the same thing for Apple's XML classes.
One thing that I do like a lot about XML is that it can express things in a horizontal fashion instead of just growing vertically like JSON. So you have the option of doing <moveTo x="126" y="199"/> vs

"moveTo": {
      "x":126,
      "y":199
}

Clearly you're a big JSON fan, what benefits do you see in adopting it?

[bomberstudios]

I wouldn't say I'm a big JSON fan, I was just thinking that you can have a JSON dump of a Sketch doc for free using SketchTool. But now I realize you never said you'd be using SketchTool, so maybe I'm assuming too much : )

[JohnCoates]

I'd never even heard of SketchTool until you mentioned it. Taking a closer look at it I realize that everything conforms to NSCoding, so that should make my life a lot easier!

[bensmeets]

I came here while looking for solutions for collaborating with Sketch (realtime), just like you mentioned @JohnCoates . Did you happen to get any further?

The ultimate goal would be to let Sketch work like http://www.precursorapp.com and my gut tells me the steps you are taking here, are a in-between step to get there.

[JohnCoates]

@bensmeets,
I work tend to work on my Sketch projects when I'm using Sketch on a daily basis, and haven't had much designing to do in the last month. So it's on the backburner for now, but now that I know Sketch's format, it won't be hard to implement, just take a while!