GitHubでSketchファイルを管理するプラグイン「Git Sketch Plugin」の初期設定と使い方

ウェブサービスやアプリ開発の現場では「GitHub」をはじめとするGitでコードのバージョンを管理し、変更履歴や編集した箇所の差分をいつでも確認できる。チーム開発では必須のツールだ。

「GitHub」はコードを管理する仕組みというイメージが強いが、実は**「Sketch」で作ったデザインファイルも「Git Sketch Plugin」というプラグインを使うと、デザインファイルのバージョンを管理**できる。初期設定(導入)と使い方をまとめておく!

「Git Sketch Plugin」は黒い画面を触る必要がない

エンジニアと一緒に仕事をしているデザイナーはわかると思うが、Gitのイメージはこんな画面ではないだろうか。ターミナルになにかコマンドを入力している…!ただ、これだとコードを書かないデザイナーには敷居が高い。

コーディングするデザイナーもいれば、しないデザイナーもいる。「Git Sketch Plugin」を導入すると、SketchアプリのメニューバーからデザインファイルをGitで管理できる。デザイナーが多いチームでも導入のしやすいのが魅力的。

「Git Sketch Plugin」はアートボードを自動で画像化

僕は、フロントエンドも書くので「Git Sketch Plugin」を導入する前はターミナル経由で、デザインファイルのバージョン管理をしていた。「GitHub」から見るとコードではないので差分が見れないのが悩みだった。

Git Sketch Plugin」を導入すると、アートボードを自動で画像化し、.exportedArtboards/ファイル内に生成。そのままプッシュすると、以下のようにブラウザからでも視覚的に差分を確認できる。Sketchが手元にない環境でも見れ、オープンなデザインが実現できそう。

Github Sketch ファイル 変更履歴

この記事を書くにあたり試しに作ったリポジトリは以下から見ることができる。
youta-suzuki/sketch-git-sample - GitHub
1回目の画像(左)
2回目の画像(右)

「Git Sketch Plugin」の使い方

「Git Sketch Plugin」の初期設定・導入

「Git Sketch Plugin」の初期設定だが、公式ページからプラグインをダウンロードし、Sketchプラグインを有効化する。その後、GitHubにアクセスし、新規リポジトリを作成し、以下のページになったらSketchアプリへ戻る。「.git」で終わるアドレスのコピーもお忘れなく!

GitHub リモート SSH アドレス

SketchアプリのメニューバーにあるPluginsをクリックするとGitが出ている。Advancedの一番上にあるinit git repoをクリックする。

Git Sketch Plugin メニューバー 設定

先ほど、コピーした「.git」で終わるアドレスを以下に貼り付けAdd remoteをクリックする。なお、前提として「GitHub」とSSH接続ができる必要がある。まだの方は、[こちらからSSH設定方法を確認](add remote)して設定すべし!

Git Sketch Plugin リモート 設定

「Git Sketch Plugin」でブランチ管理する

メニューバーのPluginsGitBranchから新規ブランチを切ったり、チェックアウトしてブランチを切り替えたりできる。ショートカットキーはcontroloptioncommandB

Git Sketch Plugin ブランチ

「Git Sketch Plugin」でコミット・プッシュ・アドする

メニューバーのPluginsGitCommitからコミットできる。ショートカットキーはcontroloptioncommandC。コミット時のメッセージも入力できるが、returnでコミットできないのだけ微妙…。

なお、コミット時にGenerate files for pretty diffsのチェックをはずすと、前述の画像生成が行われない(デフォルトではチェックが入り自動生成)。

Git Sketch Plugin コミット

プッシュは、メニューバーからPluginsGitPush。ショートカットキーはcontroloptioncommandPででき、成功すれば「Changes pushed」と表示されているはず。

そして、アド(add)はショートカットキーはなく、メニューバーからPluginsGitAdvancedAdd file to gitでできる。

Git Sketch Plugin メニューバー 設定

まとめ

Git Sketch Plugin」は、GUIで操作でき、かつ他のアプリを必要としないのでとても良さそう。ローカルだけじゃなくGit上にファイルがあるので万が一の際もバックアップとして安心できる。

まだ「Git Sketch Plugin」をプロジェクトで本格的に使っていないので、なんともいえないが、GitHubに上げることで、エンジニアとデザイナーがコミニュケーションするオープンなデザインにも期待したい。

来月からコミットするプロジェクトには「Git Sketch Plugin」の導入を考えており、ブランチの運用方法や使用感なども別記事にまとめようと思っている。ぜひそちらも期待してほしい!

ドキュメント(英語) - Git Sketch Plugin
公式サイト - Git Sketch Plugin by mathieudutour