デザインのバージョン管理をする世界
僕の同僚のデザイナーはデザインツールにSketchを使っている。デザインは区切りのいいところまで出来ると保存してDropboxで共有してくれる。最近ではGitHubでSketchファイルを管理することも試しているようだ。GitHubで管理することで過去に遡ったり、ほかの人の作業をマージできたりする。ただ、Sketchファイルはプログラムのソースコードのようなテキストファイルではなくバイナリファイルだ。この違いでGitまたはGitHubの便利なものの多くが使えていないんじゃないか。
先日Sketchファイルをテキストファイル(JSON)として管理できるツールを公開したので、どういうモチベーションで作っているのか書いてみようと思う。ツールはまだ完璧ではないが、ぜひ使って意見をもらえたらと…思う 🙇🏻
GitHub: open-sketch
テキストファイルになるとできること
あぁ、デザイン全体のボーダーの色が淡くなったのいつだっけ。そう思ったときどう調べるだろう。デザインをプロダクトにしたときのソースコードから探すだろうか。作業のログを漁って探すだろうか。目的が達成できるならどちらもいいが、デザインファイルから分かるのが一番じゃないだろうか。
デザインファイルがテキストであれば、変更点に加え、デザインを変更した人にも、当時のIssueやPull Requestにもすぐにアクセス可能になる。これだけでも価値はあるのではないだろうか。
IssueとPull Request
例えば、こんなやり取りをするんじゃないだろうか。
まずIssueを作る。 今あるチャットアプリを白基調のデザインにしたい。
Sketchファイルを編集して、テキストデータとして書き出すと、一部だが以下のような差分を確認することができる。各属性は親しみやすいと思われるCSSフレンドリーな名前になっている。
よさそうなので、Pull Requestにする。本当はもっとなぜこうしたか、とか理由を書くほうがいいのだろうか。これはただの例なので、そんなことはしない。
そしてレビューを依頼して返ってくる。レビュアーめ、何が言いたいんだよ別にそんなの感覚だよ。そんなことを思いながら、返信したり修正することもあるかもしれない。
最後にマージする。ちなみにレビュアーはこのPull Requestのブランチをローカルに持ってきて、Sketchにインポートすることでデザインの確認をするだろう。イメージできただろうか。
ほかにもテキストであれば検索性がよかったり、置換作業がとても楽にできるなど、いままで難しかった作業が簡単になったり自動化できたりする。
少しづつ良くしていく
ソフトウェアの世界ではオープンソースソフトウェアとそのコミュニティが強力に動いていて、不満を抱えた1人1人が集まり大きなソフトウェアを作っていることも普通のことだ。デザインの世界で同じことは起こらないかもしれない。でも、複数人と共同作業がスムーズにできることで何か違う文化が生まれるんじゃないだろうか。
文化なんて大層なことじゃなくても、GitHubで行われているワークフローを適応できるとうれしい人もいるのではないだろうか。先程画像と共に説明したようなレビュアーがデザインのPull Requestを作り、レビュイーが差分をチェックして気になるところにコメントする。レビュアーは理由を説明したり、修正して、最後にマージする。簡単なことだが結構品質が変わる。
そうやって、少しだけ新しいワークフローで仕事をして、新しい問題が発生する。それを解決して、また少し新しいワークフローにしていく。そんな感じがいいと思う。
さいごに
テキストファイルでデザインを管理することに興味を持ってもらえただろうか。
このツールの今後のロードマップは以下のような感じ
- SketchファイルとJSONの変換内容に100%齟齬がないようにする
- 画像で差分表示
- GUIでコンフリクトを解消
このツールは完全にSketchに依存しているので、Sketchのバージョンアップによる不具合などが発生する可能性がある。巻き込み事故ともいう。
将来的にはSketch自身がテキストファイルで出力する未来が理想だ。ほんとたのむ 🙏
