デザインデータのバージョン管理ができるAbstractを試してみた✌

複数人で1つのデザインデータを編集していると、突き当たるのが「どうやってマージするか問題」です。
作業人数分のデータを複製して用意したり、「これから◯◯.sketch触ります。開かないでください🙏」とチャットで周知したり……そんな経験をした方も多いのではないでしょうか。
そんなデザイナーの悩みを解決してくれるのが、今回紹介するAbstractです。

Abstractとは

AbstractはアメリカのElastic Projects, Inc.が提供しているサービスです。どんなサービスか一言で説明すると「デザイナー向けのGitHub」といったところでしょうか。
Gitの仕組みを利用して、デザインデータ（.sketchのみ対応。Adobe系も対応予定）に対してブランチを切ったり変更内容をコミットしたり、差分をマージする、といったことが可能です。
まだ正式リリースはされておらず、現在はPrivate Alphaに招待されたユーザーのみ利用できます。
この記事ではAbstractによってデザイナーがどんな恩恵を受けられるのか、実際に使ってみた感想を交えてご紹介します💪

※本記事はElastic Projects, Inc.に執筆許可を頂き、記事内容を確認頂いたうえで公開しています
※執筆時点でのAbstractのバージョンは0.41.3です。正式リリース版とはUIや仕様に変更点が加えられる可能性があります

Abstractの使い方

masterブランチの作成

Abstractを使うにはサインアップとMac Appのインストールが必要ですが、今回は割愛してアプリを起動したところから始めます。

こちらが起動後の画面。プロジェクトはプライベート用か会社用かを選んで作成できます。プライベート用を使えるのは自分1人ですが、会社用はメンバーを招待して複数人で運用できます。上図は会社用のプロジェクトで、右側にメンバーが一覧されています。以降のやりとりが分かりやすいように、2人をデザイナーA、デザイナーBと名前をつけます。
さっそく、デザイナーAに新規プロジェクトを作成してもらいましょう。

続いて、プロジェクトが空の状態なので.sketchファイルを追加します。

以上でmasterブランチが作成されました。

デザイナーBのAbstractでもmasterブランチが確認できます。

masterブランチの詳細に遷移すると

• Conversation（コメントのやりとり）
• Commits（コミットログ）
• Files（プロジェクト内にあるファイル）

の各タブで画面を切り替えられます。

上図のCommits画面ではコミットログが一覧できているのがわかります。

ブランチを切る

続いて、デザイナーB側でブランチを切って.sketchファイルを編集してみます。データを編集しようとするとダイアログでブランチを切るか聞かれるので、ブランチ名を入れて作成します。

ブランチを切ると自動的にSketchが立ち上がります。ここではmasterとの違いがわかりやすいように青い円を追加しました。

コミットする

Abstractから.sketchファイルを開くと、画面下部にAbstractのダイアログが表示されているのが見えます。ファイルを保存するとダイアログが活性化してコミットできるようになりますので、引き続きデザイナーB側でコミットしてみます。

一旦、デザイナーBのブランチはこの状態のままにします。

今度はデザイナーAに戻り、新しくブランチを切ります。

デザイナーAのブランチではアートボードを作成してコミットしました。

これでデザイナーA・Bともにブランチを切り、それぞれ作業をコミットした状態となりました。

従来であれば、ここまでの作業はデザイナーA・Bそれぞれ違うデザインデータで作業して差分は手作業で調整、というシチュエーションでした。Abstractでは発生した差分をmasterにマージすることで解決します。

ブランチをマージする

まずデザイナーAのブランチ（アートボードを追加したもの）をマージします。ブランチにコミットがあれば、画面右上のマージボタンが活性化して押せるようになります。

無事、masterブランチに変更が加えられました。Gitで例えるならmerge + pushが実行されたイメージでしょうか。

masterブランチの変更を適用する

デザイナーAのマージにより、デザイナーB側のAbstractには変化が起こります。

右上のマージボタンがアップデートボタンに変化ました。Gitで例えるならpullの実行ですね。
マージする前にmasterブランチが変更された場合、アップデートをしないとマージすることができません。

アップデート後、デザイナーBのブランチ（青い円を追加したもの）がマージできました。

デザイナーAのAbstractで確認すると、それぞれのブランチがちゃんとマージされていることがわかります。これにより、おおもとのデータであるmasterにデザイナーA・Bそれぞれが加えた変更内容が反映されました。
ここから再びブランチを切れば、新しくなったmasterをもとに、また2人が別々の作業ができるというわけです。

コンフリクトを解決する

複数人で同一のデザインデータを触っていると避けて通れないのがコンフリクトですが、Abstractではデザインデータのコンフリクト問題も解決することができます。
例として、デザイナーAは四角形の色をオレンジ色に、デザイナーBは緑色に変えてそれぞれコミットします。

まず先にデザイナーBのブランチをmasterにマージします。

続いてデザイナーAのブランチをマージしようとするとどうなるか。コンフリクトがない場合は単にアップデートするだけでした。

コンフリクトが発生すると、上図のように「どちらの情報が正しいか」を選択してアップデート、マージができるようになります。

従来であれば作業者同士が変更箇所について会話して整理していたことが、Abstractであればどこがコンフリクトしているか簡単に見つけられるようになります。

その他の機能、特徴

他にもAbstractの機能として、マージやアートボード単位での会話機能や、

Sketchのシンボル対応といった点もあります。

また、Slack連携も搭載されているので好きなチャンネルにログを吐き出すことができます。

Abstractの導入でどんな変化が起こるか？

実際にAbstractを導入するとどのような変化が起こりそうか、少し妄想してみました。

• デザインデータが1つで済むようになる
• チーム内で誰がどんな作業をしているかログで見れる
• コンフリクトをスマートに解決することで確認に取られていた時間が減る

良い方向での変化はこのような感じでしょうか。これまで作業前・作業後にしていた細かなやりとりが減りそうです。また、コミットメッセージによってお互いの作業進捗や状況も正確に知ることもできそうです。
反面、

• どの粒度でブランチを切るか
• ブランチの命名ルールを考える
• コミットメッセージの記載ルールを考える

といった、運用に関する課題は新しく生まれそうです。特にブランチの命名ルールは開発サイドと同じにするのは難しい気がするので、デザイナー側で運用に耐えられるルールを考えるのが必要そうです。

まとめ

以上、Abstractの使い方を簡単にご紹介しました。「なんだか便利そうかも！」という感触が少しでも伝われば嬉しいです。

私自身、以前から「開発サイドみたいにデザインデータもGitHubみたいなとこで管理したいな〜〜〜」と考えていたので、Abstractはサービス告知後からずっと注目していました。今回実際に使ってみて、α版ながら完成度が高いこと、自分の待ち望んでいたことができるサービスであることに大きな魅力を感じました。
気になるのは料金プランですが、よほど無茶な金額でない場合、積極的に導入していきたいと考えています。クライアントの皆様にもオススメしていきたいですね💪

デザインデータの管理で困り果てていた方はぜひ事前登録をお済ませの上、正式リリースを楽しみにお待ちください。
https://www.abstractapp.com/

---

お互いの学びと成長を促せるメンバーを募集しています

STANDARDは「未来の豊かさにつながる仕組みをデザインする」というミッションを元に、人の役に立つ事業やビジネス、サービスの創出や改善をデザインの力で支援し続けています。

そのために、お互いの価値観を尊重し、学習と実践と内省をしながら成長できる場所であり続けることを目指しています。

あらゆる物事の仕組みを設計するデザイナーとして、ご一緒に考えながら試行錯誤していきたいという方からのご連絡をお待ちしています。