New file format in Sketch 43

andrewpouliot

jdsimcoe On Origami we had this as our initial format, but it really didn't work out and we ended up switching to a zipped folder. The main issue is that you can't revert the whole folder on dropbox & it tracks changes to individual files separately so you can end up with corruption of the bundle as a whole. Yes, it's better for git the other way, so we left that in as an option temporarily.

andrewpouliot

I discovered you can dump JSON from the current selection this way (probably not optimal or complete):

const selection = context.selection;
const artboard = selection[0];
const artboardImm = artboard.immutableModelObject();
const string = [MSJSONDataArchiver archiveStringWithRootObject:artboardImm error:nil];
log(string);

ale

berk JSON serialisation is definitely on our radar. Meanwhile, see andrewpouliot for some ideas.

berk

\m/

This will be pretty useful for Zeplin!

jonlee108

ale I'm also really interested in whether there's a way to programmatically upgrade old sketch files to the new format. Please do let us know! ?

ale

v-vodyanov jonlee108 asked the team: at the moment it's not possible to use sketchtool to migrate old documents. We could do it, but it's not a trivial change, and at this point it's easier for everyone if you just use Sketch itself to open and save the files.

We have added a feature to sketchtool that allows it to tell Sketch to run plugins (I should probably document this on a new thread). Try running sketchtool run with SketchTool 43 : )

ale

jdsimcoe fun fact: Sketch documents were bundles in the past, and it was a world of pain. Andrew explained some of the issues, and I'll add:

you can't attach a bundle to an email on most mail clients
you can't upload a bundle to a web page using a form
you can't drag and drop a bundle to some file-sharing apps without them going crazy
and many more I've luckily forgotten about

I'm really glad we moved away from that, and don't look forward to dealing with those issues again : )

ale

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

robin

.sketchplugin files are bundles, right? They do seem to have all the same issues ?

ale

robin yes, but literally nobody complains about that, whereas we had dozens of complains daily about Sketch documents back in the day. You're less likely to email a plugin to a client, I guess : )

Also, a bundle format for plugins makes life really easy for developers (no need to package stuff, just git commit and push to update).

robin

ale hehe yep ?? appreciate the advantages

dimitrieh

ale how does this sketchtool to run plugins work exactly? do plugins need to offer support ? is there some documentation on this?

berk

Any plans to JSON-ify the encoded/archived things like MSAttributedStringFontAttribute, MSAttributedString or NSParagraphStyle? ?

romannurik

@ale is there any way to export to Sketch 42 format from Sketch 43?

ale

romannurik not that I know of, sorry

ogawa

@ale
This is truly a wonderful change!

I tried this beta version and I want to check it.

After unzipping the sketch file as a directory, I compressed the directory again into a zip file.
However, I could not open it with Sketch application.
(I changed the file extension from ".zip" to ".sketch")

Is this a specification?
Or is it not enough to simply compress with zip?

ale

ogawa make sure you're compressing the contents of the folder, and not the folder itself

skrzyszewski

ogawa Try using Terminal for zipping/unzipping to avoid compressing more than you need:
- navigate to your working directory in Terminal
- $ unzip file_name.sketch (self explanatory)
or
- $ zip -r -X "file_name.sketch" * (to compress just folder contents)

juzzyo

ogawa I too found that command line zip couldn't create a file that could be opened by sketch. Through research and a little trial and error, I ended up using ditto rather than zip, and that worked for me. Below is the shell script that both minifies the json (I prettify before git commits for git efficiency) then compressed everything back into a filename.sketch file.

Uses https://www.npmjs.com/package/json-minify for minification
Ditto doco here: https://developer.apple.com/legacy/library/documentation/Darwin/Reference/ManPages/man1/ditto.1.html

Hope this helps someone.

#!/bin/sh
# post-commit.sh
# minifies pretty json, and compresses into .sketch format
# command line usage:
# ./post-commit.sh foldername

# pull together a list of all json files to minify
FILES=./$1/pages/*
FILES+=" ./$1/document.json ./$1/meta.json"

echo $FILES
for f in $FILES
do
  echo "minifying $f"
  json-minify $f > ./temp.json
  cat ./temp.json > $f
done

# zip all files in sketch compatible format, 
# and add .sketch suffix
ditto -c -k --sequesterRsrc ./$1 $1.sketch

rm ./temp.json

ogawa

ale It worked well in that way.
Thanks! :-)

ogawa

skrzyszewski Thank you for telling me a good way.
I will use Terminal for zip/unzip.

ogawa

@ale
I'd like to ask three questions to make use of version control system like git.

The output json looks like minified style. (It seems one line)
In order to make the difference in git easier to see,
I would like to use prettified style json. (It contains a line break)
Does Sketch offer options for the style of json?
Does Sketch provide a way to directly edit folders without zip/unzip?
(Eg Framer.app's file system, or other SDK's project folder)

Is it possible to output preview.png individually for each art board?
(In the Fitness App.sketch, for example, it is output like the following)

/previews/Menu.png
/previews/Timeline.png
/previews/Profile.png
(and so on...)

I can probably automate these tasks using Terminal or cocoascript,
But, if Sketch supports these functions I would like to know.

MrPeak

ogawa

ogawa I'd like to ask three questions to make use of version control system like git.

The output json looks like minified style. (It seems one line)
In order to make the difference in git easier to see,
I would like to use prettified style json. (It contains a line break)
Does Sketch offer options for the style of json?

Does Sketch provide a way to directly edit folders without zip/unzip?
(Eg Framer.app's file system, or other SDK's project folder)

Is it possible to output preview.png individually for each art board?
(In the Fitness App.sketch, for example, it is output like the following)
/previews/Menu.png
/previews/Timeline.png
/previews/Profile.png
(and so on...)if("undefined"!==typeof hljs)hljs.ha();else if("undefined"===typeof hljsLoading){hljsLoading=1;var a=document.getElementsByTagName("head")[0],e=document.createElement("link");e.type="text/css";e.rel="stylesheet";e.href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/default.min.css";a.appendChild(e);e=document.createElement("script");e.type="text/javascript";e.onload=function(){var d={},f=0;hljs.hb=function(b){b.removeAttribute("data-hljs");var c=b.innerHTML;c in d?b.innerHTML=d[c]?7<++f&&(d={},f=0),hljs.highlightBlock(b.firstChild),d[c]=b.innerHTML)};hljs.ha=function(){for(var b=document.querySelectorAll("pre[data-hljs]"),c=b.length;0<c?hljs.hb(b.item(--c))};hljs._ha()};e.async=!0;e.src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js";a.appendChild(e)}

I can probably automate these tasks using Terminal or cocoascript,
But, if Sketch supports these functions I would like to know.

@ogawa ????????????????
@ale Please support...

« Previous Page Next Page »