Open scottnath opened 7 years ago
@seejamescode @hchughes
There was a shift in how Sketch file data is stored starting in Sketch 43. They changed the way data is stored from binary to JSON. You can open a Sketch file like you would a .zip
folder and view the individual pieces. This will drastically change the ecosystem for manipulating Sketch files in node.
However, while it is possible to manipulate this JSON, the data object structure is not completely documented - so determining what to manipulate becomes the blocker.
In node, there are some existing modules, created or updated after v43 was released, which can give us access to the raw sketch data:
https://github.com/xaviervia/sketch2json
Exactly what it sounds like - takes a sketch 43 file and turns it into a json object. Simple way to get the raw data.
status: installed, works. Stops with no error if files are not v43
https://github.com/kristianmandrup/sketchy
CLI wrapper for sketch2json.
https://github.com/KimDal-hyeong/sketch-zipper
Command line script for zip/unzip of sketch files. Could create a directory of json files, then use this to compile the final sketch file.
status: Created a bunch of different sketch files and unzipped to compare. From this we can get a breakdown of differences between say a sketch file with an icon and one with the same icon, but at a different size. The difference came out to hundreds of lines of JSON when comparing those.
https://github.com/darknoon/sketchapp-json-flow-types
An app which breaks down the json object itself. Will help with clarification once the JSON in a .sketch file is documented correctly.
Sketch-zipper can zip up a correctly-created sketch file directory, creating a .sketch file. If we knew how to change/create the JSON which represents svg files in sketch, we could manipulate a sketch file's contents, then use sketch-zipper to create the file. There is also a webpack version
The problem is that we do not have any way to know how to create the raw JSON data until Bohemian releases more data about their file structure.
The method described in Sketch: A Perfect Icon workflow gives an alternative for using a set of icons when developing in sketch. Creating an icon font from existing svgs can happen in node, but I would need feedback from your designers to know if the approach for this workflow is something that is valuable and worth exploring.
This approach requires:
Creating the icon font and bundle would be fairly straightforward using something like gulp-iconfont. The problem lies in updating of individual computers - and keeping all designers up to date with the latest version of the iconfont. A very large education/organizational hurdle.
Bohemian's update to Sketch file structure will create a flurry of development around manipulating sketch files programatically. The space is fairly new at only two months and the JSON structure is not yet officially documented. Given time, and proper documentation, I believe there will be a plethora of applications, nodejs and otherwise, that will be developed to facilitate manipulating sketch files outside of the sketchapp.
Revisit this in Q3 2017 and look for:
A designer's typical workflow in Sketch is to have a Sketch asset-file which contains assets, such as icons, open while they work on their prototype. They will then copy the assets from the asset-file and paste them into their prototype.
Cross-tool icons