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