AbemaTVの開発組織では、UIデザインツールはSketchとAbstractを使用しています。今回は2018年11月現在での運用方法について紹介したいと思います。

Sketchは言わずと知れたUIデザインに特化したツールです。様々なデザインツールがありますが、複数人での共同作業やバージョン管理をする際には、SketchとあわせてAbstractを導入する組織も多いのではないでしょうか。

私たちは、2017年12月にAbstractを導入する以前はGitHubやGoogleDriveでSketchデータを管理していました。

しかし、それらのツールは「デザイン作業」に特化しておらず、どうしても痒いところに手が届かない状態でした。 AbemaTVには現在6人のUIデザイナーがおり、マルチデバイスへの対応のため多くのSketchファイルを運用しています。

---

基本の運用フロー

基本的にはデザイナーが作業する際は必ず
ブランチ作成 → コミット → レビュー → マージ
というフローをとっています。

6人のデザイナーの作業履歴を全て追えるようになったことだけでも画期的です。Slackと連携しており、通知が流れてくるのでいつ誰が何をコミットしたかわかるようになっています。 今までのデザイナーの作業はブラックボックスだったところもあるので、丸裸になりすぎて怖いくらいですね。）

AbemaTVでは開発体制がなかなかに巨大なため、リリース後3年目の現在も常に多くのアップデートが行われています。そのため、1つの「iOS」のSketchを同時に3人のデザイナーがいじくり回すこともあります。

動画部分のUIをいじる人、検索機能のUIをいじる人、設定画面のUIをいじる人…などといったように目まぐるしくUIに変更が加えられていきます。

---

Abstractでもツライことはある

正直に言いますと、Abstractで完璧に管理しきれている訳ではありません。Abstractはアートボード単位での差分管理なので、以下のような問題がおきます。

Aさんがある画面の変更を加えてマージする前に、Bさんがその画面に触れないがその画面に含まれるSymbolを編集したときにコンフリクトする。

「今から〇〇の画面いじるから、そのSymbolいじるのちょっと待って!!」
「ｱｱｱｱｧｧ!!そのコミットっ!! こっちがマージするまで待って!!」
「あーコンフリクトしたわ。Restoreしてもこの作業はやり直しだわ。ダメだわ。あー。」

数ヶ月Abstractを使った私たちはだいぶ学びましたが、それでも↑のようなコミュニケーションはいまだに行われています。

少しアナログな方法ですが、コミュニケーションを円滑にするために
「マージする予定のない場合、ブランチ名にArchive用とつける」
といったことをしています。

例えば新機能のデザインのパターン出しをする際は、「綺麗なコミット」に気を配っても非効率なのでアーカイブする前提で作業します。そしてデザインが確定したら「清書する」イメージで新しいブランチを作るようにしています。

その清書ブランチでは、なるべく「綺麗でわかりやすいコミット」をチーム全体で心がけています。

AbemaTVのSketchファイルは「常に全画面の全モジュール、全文言が正しい」状態を目指しています。

もちろんSketchファイルは仕様書ではありません。しかし、デザインの運用が頻繁に行われる組織ではここをないがしろにしてはいけない、というポリシーのもと、なるべく綺麗な状態を維持できるように管理をしています。

そのため、Abstractのレビュー機能を使って、Sketchの使い方が正しいかどうかメンバー同士でチェックするようにしています。

ここで気をつけるポイントがあるのですが、
「デザイン自体の良し悪しの議論」は、Slackなどのオープンな場で行い、 Abstractで行われる議論はあくまでも「Sketchデータの良し悪しのレビュー」に絞っています。

また、元々はデザイナーのみが使っていましたが、最近になってディレクターやエンジニアにもAbstractを導入してもらい、Sketchデータに関するやりとりはここで完結するようにしました。

---

Sketchのライブラリ機能

Sketchのライブラリ機能を複数人・複数プロジェクトで使う場合、Abstractが大活躍します。 AbemaTVでは、UIに用いる「アイコン」と「カラー」に関しては 1つの「ライブラリ」ファイルが全てのプロジェクトから参照されるように設定しています。

特に変わったことはしておらず真っ当な使い方ではあるのですが、真っ当に使うようになるまでの準備が意外と腰が重かったりしますよね（元々ライブラリ機能が出る前からSketchファイルを作っていたので、ライブラリに差し替えるだけでもめんどくさかったり…）。

そこは効率化することに対して意欲的なメンバー（以前この記事を執筆したデザイナー）が仕切ってくれました。 運用の効率化も、やはりリーダーシップを持って進めないと実現できないものです。

ライブラリ内のアイコンを差し替えるコミットをしてマージすれば、そのライブラリがリンクされた別のSketchファイルにも反映されます。

このようにライブラリファイルではSymbol化されたアイコンが並んでいます（画像は一部）。

また、カラーもライブラリ内のレイヤースタイルで管理しており、各アイコンにはデフォルトとしてWhite(#FFFFFF)を設定しています。

ここのポイントは、アイコンのシェイプ自体にはレイヤースタイルは設定しておらず、カラー用のレイヤーを用意してシェイプでmaskしていることです。

アイコンのシェイプに設定してしまうと、シェイプを差し替えたときにレイヤースタイルのOverrides設定がリセットされてしまうのです。

これを設定しておけば、
　↓
このようにライブラリでリンクされたSymbolの色をOverrides機能で自在に変更することができ、 なおかつその色もライブラリで編集すれば一括で反映させることができます。

気をつけないといけないポイントは、Sketchのバージョンのアップデートです。複数人で作業する場合はSketchのアプデタイミングは気をつけないと事故ります。

マイナーアップデートはそこまで問題無いことが多いですが、メジャーアップデート後にライブラリを編集すると、古いバージョンのSketchで開いたときにライブラリのリンクが外れてしまうことがあります。

---

便利なSketchのPlugin

ここまで開発現場での制作フローについてご紹介してきました。 このあとは、具体的にライブラリ機能を使ってシンボルに対する作業を行う際に便利なPluginを紹介します。 続きはこちらのblogをご覧ください。

---