-
Notifications
You must be signed in to change notification settings - Fork 42
designer: sketch files from canonical svgs #71
Comments
update: not currently possibletl;dr:
Sketch version 43There 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 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. Viewing raw sketch dataIn node, there are some existing modules, created or updated after v43 was released, which can give us access to the raw sketch data: sketch2jsonhttps://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 sketchyhttps://github.com/kristianmandrup/sketchy CLI wrapper for sketch2json. sketch-zipperhttps://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. sketchapp-json-flow-typeshttps://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. Creating a sketch file programmaticallySketch-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. Alternative: create an icon-font from svgsThe 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. RecommendationBohemian'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
The text was updated successfully, but these errors were encountered: