designer: sketch files from canonical svgs

[scottnath]

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.

Feature: Cross-tool icons
  As a designer
  I want a cross-tool compatible IBM Design Language Icons module
  So that I can prototype with IBM icons, regardless of the design tool I choose.

  Scenario: svgs as canonical
    Given that I need to upgrade an icon in the IBM Design icons
      and that I need the new version of this icon available to other designers
      and that designers may use multiple tools in their workflow
      and that design assets need to work with multiple tools
     When a I upgrade my icon
     Then I need to create a canonical version of the upgraded icon
      and that version should be importable by Sketch
      and that version should be importable by Illustrator
      and that version should be the source file in the IBM Icons module.

  Scenario: copy svgs when prototyping
    Given that I am building a prototype in Sketch
      and that I need icons from IBM design in my prototype
      and that said icons are stored as svg files
      and that I need said icons compiled into an organized Sketch file
     When I want to use IBM icons in my prototype
     Then I need all IBM icons in a sketch file
      and I need those icons in a grid
      and I need said Sketch file to be generated using the canonical svg files.

---

Cross-tool icons

• svgs as canonical
• copy svgs when prototyping

[scottnath]

@seejamescode @hchughes

update: not currently possible

tl;dr:

• there is no non-trivial way to write a sketch file
• sketch has not released docs on its JSON structure
• minor differences in two sketch files create massive differences in JSON data
• Closest approximation for copy-n-paste request: an icon-font could be auto-generated from svgs and used in designs, but this is not recommended
• recommendation: revisit in Q3

Sketch version 43

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.

Viewing raw sketch data

In node, there are some existing modules, created or updated after v43 was released, which can give us access to the raw sketch data:

sketch2json

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

sketchy

https://github.com/kristianmandrup/sketchy

CLI wrapper for sketch2json.

sketch-zipper

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.

sketchapp-json-flow-types

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.

Creating a sketch file programmatically

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.

Alternative: create an icon-font from svgs

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:

1. creating an icon font from the icon svgs
2. creating an icon bundle similar to this icon bundle
3. all participating designers installing this icon font on their machines
   • any designers who try to use a .sketch file using this method would be required to install this font locally
4. all participating designers would need the sketch icon-font plugin
5. regular updates to the installed font on every participating designer's machine

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.

Recommendation

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:

1. apps that create sketch files from scratch
2. modules which can intelligently manipulate sketch-specific JSON
3. in-browser sketch viewers like this one