ある日、僕たちはAbstractと出会った。

Published in

Eureka Engineering

5 min readOct 16, 2017

こんにちは。
Product UXチームでデザイナーをしているNipperです！

突然ですが、複数人でのデザインデータの共有って面倒ですよね！
誰がどの要素をどう変更したのか、誰が持っているファイルが本当の最新ファイルなのか、デザイン以外の不要な確認作業で大きなコストが発生してしまっているチームは結構多いのではないでしょうか？

eurekaのデザインチームも同じ課題を抱えていました。
Boxで共有管理こそしていたものの、ファイルを最新に置き換える作業は人力ですし、同じファイルを同時に複数人が開いて更新するなんて、恐ろしくて想像もしたくありませんでした。

そんなある日、僕たちはAbstractというツールに出会いました。

Abstractさんはこれまで抱えていた課題を一気に解決してくれる、まさに救世主のようなツールでした。今日は僕たちを救ってくれたAbstract様がいかに素晴らしいかをさくっと紹介させていただきます。

Abstractって何がそんなにすごいんだ？

ここまで散々褒めちぎっているAbstract、実際のところ何がそんなにすごいんだいと言いますと、次の一言に尽きます。

「SketchファイルをGitライクにGUI管理できる」

ピンときた人はこの一言を読んだだけで、すでに公式サイトへ行こうとしているんじゃないでしょうか？リンク貼っておきますね。 Abstract公式サイトへGo!!

いやいや、もう少し詳しく聞かせてもらおうか。という方がいらっしゃいましたら、是非続きをお読みください。

Abstractの基本

Abstractは複数人でファイルのバージョン管理が行えるツールです。
確定した最新データがどこにあるかや、誰がいつどこを変更したかがすぐにわかったり、チームメンバーがが今なんの作業をしているのかもわかります。

それでは早速、基本的な使い方を図と合わせて見ていきましょう！
今回は確定したデータであるMASTERへ、作業用スペースであるBRANCHをマージするまでの一連の流れをご説明します。

1.MASTERを作る

MASTERは確定したデザインのみを保管する場所として運用しています。マスターを直接編集することはできず、作業を行う場合はブランチと呼ばれる作業スペースを作成します。

2.BRANCHを作る

BRANCHはマスターを丸々コピーした作業用スペースだと思ってもらえれば問題ありません。BRANCHからさらにBRANCHを作成することもできます。

3.PARENTとCHILDを理解する

ブランチは全て親子関係を持ちます。図1–2の例ではBRANCH AはMASTERを親に持っています。
BRANCH A-1はBRANCH Aを親に持っています。
また、parentに変更が加わると、その変更内容は適時childに反映することができます。

4.BRANCHにCOMMITする

COMMITはBRANCHに編集したSketchファイルを反映する作業を指します。
編集したSketchファイルはローカル環境だけに保存されていて、それをAbstract上にアップする作業と想像してもらえればわかりやすいかもしれません。

5.MASTER等のPARENTにMERGEする
MERGEはCHILDで変更した内容をPARENTに反映する作業を指します。MASTERまでマージすると作業はひと段落ってわけです！

おまけ. 1~5を1分ちょっとにまとめた動画

[video width=”1920" height=”1080" mp4=”https://developers.eure.jp/wp-content/uploads/2017/10/1分ちょっとでだいたいわかるAbstractの使い方.mp4"][/video]

チーム運用で気をつけているところ

さぁ、Abstractの基本が理解できれば、チーム運用のスタートです！
チームで運用する際に一番多いトラブルが、コンフリクトと呼ばれる現象です。
もちろんコンフリクトの解決法も予め用意されていますが、予期せぬ事態はなるべく防ぎたいですよね。

その為にeurekaでは

- ブランチ名を目的ベースの名前にする
- ブランチでは作成時の目的以外の作業は行わない
- こまめにコミットする
- SketchのIntegrationで自動で通知を飛ばす

といった対策をとっています。

例えば、「さがす画面のGridViewのデザイン更新」という名前のブランチを作成したとします。
すると、誰が「さがす画面のGridViewのデザイン更新」ブランチを作成した、とSlackのチャンネルに自動で通知されます。
これで他のメンバーがどの画面を触ろうとしているのかをあらかじめ察知でき、無駄なコンフリクトを起こすことを避けられるわけです。

また、こまめにコミットを行う事で、親との差分が広がるのを避けることができ、コンフリクトが発生した際にすぐ気づけるようになります。

まとめ

いかがだったでしょうか！
Abstractの良さがちゃんと伝わっていると嬉しいです。

Gitの概念を理解できている状態であれば、すぐにでも使いこなせるようになると思います！
Gitにあまり触れてこなかった方も、無料トライアルがあるので、どんなものかぜひ触ってみてください！