カウルのプロダクトデザイナー稲井です。
今回はSketchファイルのバージョン管理ツールにAbstractを導入した話をします。
暑い暑い夏にひんやりとした話題をお届けしたかったのですが、そんなに寒くも暑くもない話題です。 デザインファイルの管理に頭を悩ませているデザイナーの方のストレスを少しでも軽減できれば幸いです。
バージョン管理の必要性
カウルではSketchファイルの管理や共有をDropbox上で行ってきました。 デザイナー同士の作業がぶつからないように作業単位でファイルを分割し、衝突を避けるなどの工夫を行ってきました。
デザイナーが少ない状況では管理コストを下げるのに有効でしたが、作業ファイルの分散化やバージョンごとのファイルが増えるなど複数人作業には向いていませんでした。
プロダクトラインの増加にあたり、事業のスピードアップの観点からSketchファイルにもバージョン管理を導入し複数人でデザインできる体制を作ることにしました。
バージョン管理ツールAbstractについて
バージョン管理を行うにあたり、 今回はAbstract(アブストラクト)というサービスを利用することとしました。 GitHubやBitbucketのSketchファイル版ととらえてもらえばOKです。
GitHubなどと大きく違う点は.sketchファイルの変更点のプレビューができる点です。コミット時に変更のあったアートボードやシンボルの一覧が表示されるのでブランチ内の作業ログが簡単に追えます。
ブランチをマージする際にコンフリクトを検知した時は、どちらの変更を採用するかアートボード単位で選択し解消することができます。便利ですねー。
また、Sketchプラグインからコミットができるのでデザイン作業を分断することなくバージョン管理が行えるのも便利です。
ただし、.sketchファイル以外のデザインファイル(.aiや.psd、.pngなど)は管理対象に含められないので注意が必要です。sketchファイル内の画像の書き出しにも現時点では未対応のようなのでZeplinとの併用が必要そうです。
Abstractでできることの概要
※2018/7時点 最新の情報はリリースノートを参照ください。
できること
- Sketchファイルバージョン管理
- ブランチのマージ、リバート（変更差分のプレビューが可能）
- Sketchプラグインからのコミット
- デザインファイルへのコメント
できないこと
- .sketch以外の拡張子のファイルバージョン管理
- スライスの書き出し
- ローカルリポジトリの管理
- プルリクエスト
画面構成の説明動画
素晴らしい動画説明がありましたので動画をご覧になる時間がある方はこちらを ご覧ください。 https://learnux.io/course/abstract/abstract-overview https://learnux.io/course/abstract/new-abstract-interface
カウルでの導入：AbstractにOrganizationを作る
初めての導入だったのですがある程度の規模までカバーできそうなビジネスプランを契約しました。
はじめに会社単位のグループ（Organization）を作成しました。 Organizationの中にメンバーを招待したりプロジェクトを作成することができます。
Sketchファイルの編集やコミットを行うユーザーはContributior、 閲覧のみで利用するユーザーはGuestとして招待することができます。
Organizationに招待されたユーザは全てのプロジェクトを閲覧できますが、プロジェクト単位で招待すると個別プロジェクトのみ閲覧になるので、要件によって使い分けることになりそうです。
Abstractプロジェクト内での作業イメージ
ファイル管理を行うAbstractのクラウドリポジトリ上に各プロダクト単位でプロジェクトファイルを ADMINユーザーが作成します。
Sketchファイルを編集するデザイナーはContributorとして招待される形になります。 AbstractのMacアプリをダウンロードしプロジェクトにアクセスします。
プロジェクト内でContributorはブランチを切ります。 Abstract MacアプリからSketchファイルを開くとローカルに一旦落とされオフラインでもデザイン作業ができるようになります。
作業ファイルをコミットするにはAbstract Sketchプラグイン を利用します。 コミットログなどに変更点を書き込んでコミットすることになります。
ブランチを切れるContributorであればそのままマージもできてしまいますが、カウルではADMINによる確認をしてからマージしようと思っています。
Sketch ライブラリファイルをAbstractに載せるには？
Sketch使いであれば、ライブラリファイルの扱いがどうなるかも気になるところかと思います。 Abstract上でのライブラリファイルの設定の仕方をお教えします。
Sketch ライブラリファイルについてはこちらのURLを参照ください。 https://sketchapp.com/docs/libraries/
1.ライブラリーファイルをインポートまたは新規作成
Abstractプロジェクトのメインメニューから FILES > ADD FILEを選択します。
既存のライブラリファイルをインポートする場合 -> Import Sketch File as Libaryを選択
Abstractにアップされているライブラリファイルを利用する場合 -> Link libraryを選択
2.ローカルライブラリを参照している場合、Sketchファイルを開いてAbstract上のライブラリに入れ替える
Sketchファイルを開くとローカルのライブラリを参照している場合がありますので
その場合は、Symbol Swap Librariesというプラグインを使ってAbstract内で管理されているライブラリを選択してください。
本家のヘルプのこの記事を参考にさせていただきました。
https://support.goabstract.com/hc/en-us/articles/360001392632-Importing-Sketch-Libraries
プロジェクトをまたぐライブラリファイルの利用をする場合は
上記のLink Libraryというボタンを押すと、下記のようなプロジェクト一覧ダイアログが表示されます。カウルではBootstrapのワイヤフレーム素材やGoogleのマテリアルアイコンの素材など全プロジェクトで共通利用できそうなものはプロジェクト化して一元管理するようにしました。
共通のカラーミックスインや写真などもサービス内で共通利用していくことも可能かもしれません。 ノウハウが溜まってきたらまた共有したいと思います。
Contributor/Guestの追加（ADMIN向け）
AbstractのMacアプリの Billingリンク をクリックし、シート数を変更して保存。 シートの数だけContributorを参加させることができます。 現時点では、ビジネスプランで1シートあたり$16.67ドル程度かかります。月単位で必要最小限の利用数に変更していく形になりそうです。
デザインファイルのバージョン管理導入によって今後期待できること
会社のデザイン資産管理が楽
特にデジタルプロダクトの場合、長期に渡る開発で作業者の引き継ぎなどが発生するたびにデザインデータの分散化が起こり資産として残すのが難しかったように思います。 すでにプログラムの世界では当たり前のバージョン管理が導入されることでデザインファイルを資産として捉えやすくなると思います。
新規開発のスクラップ&ビルドを簡単にできる
ブランチ切れるだけでだいぶデザイナーは心理的に楽になります。複数のパターンの比較検討をした場合もコミットしておけば切り戻しなどが簡単に行えます。どんどん作ってどんどん壊しましょう。
デザイン作業のブラックボックス化を防ぐ
今までもZeplinなどで成果物の共有は簡単になってきました。しかし変更点についてはコメントで補足する必要があったり、作業の工程は見えずらいものがありました。 Abstractの場合は変更点をこまめにコミットすることで作業の文脈がわかるのでデザイナー同士やエンジニアとの間での認識も取りやすくなると思われます。
おわりに
ハウスマートではデザイナーやエンジニアがプロジェクトの企画から主導できる環境を用意しています。「何を作るか」から自分で考える環境で仕事をしたい！という方、ぜひ一緒に働きましょう。
今話題のReTech！業界を変えるカウルを支えるエンジニアをWanted！
今話題の不動産テック！スタンダードを創るUI/UXデザイナーをWanted