New file format in Sketch 43

jdsimcoe

htodorov

I'd like to ask a question far different from the questions here.

My question is can you edit Sketch content externally with something like a text editor?
You might ask yourself why would I want to do it.

Well the answer is simple If I'm able to change text and image paths I would not need to launch Sketch to do that manually selecting each text and changing image paths. Does anyone know if something like this is possible?

ale

htodorov it's doable, check http://sketchplugins.com/d/87-new-file-format-in-sketch-43/3

xaviervia

Hi. In case this is useful for someone else, I'm writing a typescript/flowtype "documentation" of the file format as I read through it.

https://gist.github.com/xaviervia/edbea95d321feacaf0b5d8acd40614b2

BTW, amazing that this is happening.

andrewpouliot

xaviervia Nice, I actually made some as well available in npm as sketchapp-json-flow-types. I would appreciate your feedback since it looks like you defined more of them https://github.com/darknoon/sketchapp-json-flow-types

You may also be interested in https://github.com/darknoon/sketchapp-json-plugin (pretty minimal at the moment) for the utils to use JSON within a plugin.

gaara87

Android Layout Export -
Would anyone be interested if i wrote a plugin which tried to generate a layout.xml from a given sketch file?

xaviervia

Here there is a webpack 1 loader for the new format.
https://github.com/xaviervia/sketch-loader

ale

xaviervia ???

methodphoto

So this should mean being able to use Git for file versioning?

xaviervia

I extracted the Sketch to JSON functionality to make exploring the contents easier, here there is a place to drop a Sketch 43 file and see it's internal structure. https://xaviervia.github.io/sketch2json/

The only thing it's missing is the images, mainly because I'm not sure how to represent them in JSON format. I've been thinking about data URIs with base64 encoded images. This would make it straightforward for users of the lib to render them in a webpage. Any ideas?

AMoreaux

xaviervia A cli to use your code: https://www.npmjs.com/package/stoj

WonderCsabo

@ale do you plan to support just using a project directory, without zipping? It would be really nice, because we could easily edit the project without unzipping and zipping it, and we could also add the project to version control.

mathieudutour

WonderCsabo That won't be enough to add it to a version control system anyway, the json is compressed so any change would trigger a complete file change.
I'm working on it though ?

ale

WonderCsabo that's very unlikely, for the reasons I outlined in ale, but never say never…

Chrisedmo

Excuse the n00b question, But is there a way to actually edit the text on a layer. I see it's easy to change the layers Title. But the actual text and things like fonts etc are crazy strings.

andrewpouliot

Chrisedmo At the moment it's encoded with keyed archiver -> bplist -> base64 so it's pretty hard to modify but not impossible from pure js. I reached out to the sketch developers to request that they simplify this, but it would be helpful to add your voice as well.

jasim_ab

andrewpouliot Chrisedmo @ale Please add my voice as well to it!

I'd imagine using NSKeyedArchiver makes Sketch's codebase simpler, and since it is a core part of Foundation, it'd be more performant than using JSON which'll require a lot of base64 conversions for dealing with binary blobs.

@shaneal had posted a way to access this from CocoaScript in a post above, but it still needs us to be on a Mac and can't be used to generate Sketch files from web servers. Also that approach seemed to produce a plain string without any structure.

There seems to be a few libraries to deal with NSKeyedArchiver, but I haven't been able to test any of them: NodeJS+Sketch, Ruby, and Python.

Would love to have some sort of official documentation around these things - structure of these blobs, recommended libraries etc.

Chrisedmo

jasim_ab andrewpouliot Cool - thanks for the input.

I wanted to make a bit of drag and drop Mac app that will convert PSD's to Sketch Files, well as best I can. I can tear apart the PSD with psd.rb. And then just need to map the relevant parts to Sketch's JSON files. So ATM I'm ok with it needing a Mac.

If using NSKeyedArchiver helps keep Sketch clean and lean, then that's a good thing! But you're right it does need some kind of conversion to a regular string.

jmegilman

jasim_ab +1 to this, preferably as JSON but if there are tools available to decode/encode then documentation would be great

andrewpouliot

jasim_ab Chrisedmo It's true that you get NSKeyedArchiver for free with cocoa—the prior sketch format used NSKeyedArchiver for the whole document, but people complained about it being hard to parse. The reason people are getting excited about this zipped-JSON format is that it isn't keyed archiver, so having the juiciest bits of the document be still encoded in that format tempers some of my enthusiasm for it. Not sure about it being faster or slower; I imagine the base64-encoding of the plist data actually makes this slower overall vs JSON all the way down.

jasim_ab

Chrisedmo That sounds like a cool useful project! @jcsherin and I have done a similar thing - creating Sketch files from websites. It was done as a Sketch plugin and didn't use the file format, so there is that.

« Previous Page Next Page »