はじめに
去年は、SketchToolで画像書き出しを自動化 - Qiitaの記事を書きましたが、今年も続けてSketchネタです。
Sketchはv43からファイル形式がJSONファイルとなったので、ちょっと遊んでみようと思います。
JSONファイルってどういうこと？
はい、まず、.sketchの拡張子を.zipに変更して解凍みてください。
↓すると、こんな感じのファイル構成になっていると思います
document.json
user.json
meta.json
pages/...
previews/...
このように、.sketchの実態はjsonで構成されているのです。
なにが嬉しい？
それまではバイナリデータだったのが、jsonファイルになるのでGitで管理しやすくなると思います。
デザインの変更点をエンジニアに口頭で伝えなくても、コードで会話できるようになります。
が、解析はちょっと辛いかも
pagesフォルダ内のjsonが各ページのオブジェクトなどの情報が入っているのですが、情報量が多く解析が辛いです。。ちょっと移動させたや色を変更した程度なら分かるかもですが、視覚的に理解はまず無理だと思います。
例（diff）
-"x": 135,
-"y": 281
+"x": 143,
+"y": 289
...
-"blue": 0.847,
-"green": 0.847,
-"red": 0.847
+"blue": 0.1066960170865059,
+"green": 0.007513228338211775,
+"red": 0.816203773021698
うーん、位置の移動は分かりやすいですが、色の変更は何色になったのかが分かりづらいです。。
が、変更点がコードで分かるようになっただけでも、世界が広がった感じがします。
スクリーンショット
変更前
変更後
zip → json化を自動化する
毎回手作業でzipをjsonに変更するのは手間ですよね。
こちらを細かく説明しようと思ったのですが、既にこちらの記事に詳しく書いてあるので参考にしてみてください。
コマンド一発でjson化してくれます。
コマンドも面倒だよ！
はい、面倒ですね。
ファイルの保存毎に書き出してくれるテンプレートを作成しました。
GitHub - mdb-konno/sketch-template: sketch-template
npm scriptsを利用してファイルの監視＆圧縮＆書き出しをしてくれます。
実務で使えるか？
正直、テンプレート作って、この記事書いておきながら、実務ではGit管理までは使っていません。（ファイルの圧縮の自動化は便利なので使っています）
デザイン作業を並行して作業することが多く、本来であれば、ブランチ切って作業すべきなのでしょうが、ちょっと面倒です。。
もっといいツールがある
こんな地味なことしなくても、既に便利なツールが世の中に登場しました。
- Abstract - Secure version control and design workflow management
- Kactus
- Introducing InVision Design System Manager + Brand.ai is joining InVision - InVision Blog
恐らくSketchは上記のようなツールが出ることを期待し、jsonファイル化にしたのかもしれません。
まとめ
- Sketchがjsonファイルになったけど、自力で解析などをするには辛い
- 財布と相談し、他ツールを使う方がいいかも
- ファイル形式が変わっただけで、デザインフローに大きく関わる時代に突入しそう。今後に期待