【Sketch】デザインをgit管理する！Abstract

はじめに

本記事ではSketchでデザインを作る際に、作成したデザインをgitのようにバージョン管理ができるプラットフォーム、Abstractをご紹介します！

特にチームでデザインをする際に変更した箇所を簡単に特定したり、どういった変更が行われたのかを見たりするのに役立ちます。

また、１人で作業している方でも大幅な変更を伴うかもしれないデザインを作成する時に便利です！

Abstractとは？

他のデザイナーが修正したところを確認する時に、どこのコンポーネントを変更したのかよくわからない、という経験ありませんか？

もしくは、デザインに変更を加えたけど、やっぱりオリジナルのデザインで進めることになり、変更を元に戻すのに苦労した、などの経験はありませんか？

Abstractはデザインのバージョン管理をできるようにしてくれます。Sketchファイルのどのコンポーネントにどのような変更が行われたかを追い、様々なバージョンでどのような変更が行われたかをコンポーネント単位で見せてくれます。AbstractはSketchのシンボルととても相性が良いので、２度以上使うコンポーネントは必ずシンボルにして、他のチームメンバーとのコンフリクトすることを防ぎましょう。

Abstractの機能

Abstractの機能は大きく分けて3つあります。

1. 新しいブランチを作成する

現状のデザインから追加のデザインを作成したり、現状のデザインを変更したりする際には、新しいブランチをmasterから作成し、新しく作成したブランチで作業を進めます。

2. 加えた変更をコミットする

追加デザインを作成、現状のデザインを変更し終えたらその変更を１バージョンとして保存するためにコミットします。

3. 良さそうなコミットをマージする

チームにチェックしてもらいレビューを通ったデザインはmasterにマージすることができます。

Abstractを使う際のSketchファイル構成

Abstractをさらに生かすためにオススメのSketchのファイル構成をご紹介します。
下記ファイル構成を使用することで、無駄なコンフリクトを防いだり、ワークフローを改善することができます。

基礎として用意するもの

色

ブランドカラー、文字色、　UIカラー、それぞれのアクションのために色などを定義するカラーパレットを作ります。
その後は、よっぽどの理由がない限りはそのカラーパレットにない色は使わないようにします。

テキストスタイル&レイヤースタイル

次はタイポグラフィを定義していきます。
デザインに必要なフォントサイズのリストを作成します。

フォントの太さ、色、左寄せ、右寄せなどを変更する場合もリストに加えておいてください。

コンポーネント

今回はシンボルを入れ子にすることによってコンポーネントの管理をしやすくしていきます。

コンポーネントのレベル１：Foundation

レベル１のシンボルにはシンボルが入れ子になっているものを使用しない。最小単位のコンポーネントのみを使用します。

作成するコンポーネント：
– アイコン：暗いアイコン、明るいアイコン、そのほかの色味のアイコンセットを用意します。
– アバター：人物の写真やアバターなどを使用する場合は、レベル１コンポーネントとして８つほど様々な人のアバターを用意しておくと良いです。

コンポーネントのレベル２：Lower-level blocks

レベル２のコンポーネントにはレベル１のシンボルを入れ子にしたり、そのほかの基本的なコンポーネントを作成していきます。

作成するコンポーネント：
– フォームのコンポーネント：ボタン、テキストインプット、チェックボックス、ラジオボタンなど
– サブナビゲーション
– バナー

コンポーネントのレベル３：Mid-level blocks

レベル２とレベル１のシンボルを組み合わせて作ったシンボル。実際のデザインにもよく使うブロックを作成していきます。

作成するコンポーネント：
– サイドバー
– メインコンテンツエリア
– アプリのヘッダー
– モーダル

このように作成すれば、最後のアートボードはいくつかのシンボルのみで成り立ち、また色を変更したりする際もおおもとの色を変えるだけで、全てのページの色が変わるので非常に便利です。

Abstractを使ってみる

では、詳しいAbstractの使い方を見ていきます。
まずは、公式サイトからAbstractをダウンロードしてください。
プランによっては無料で使えます。
ダウンロードはこちらからどうぞ。

ダウンロードできたら、ダブルクリックでアプリをインストールします。

インストールできたらAbstractを立ち上げます。

最初はプロジェクトが１つもないので、まずは新しくプロジェクトを作っていきます

プロジェクト名とプロジェクト詳細、色を選び、プロジェクトを作成します。

新しく作成したプロジェクトに入ると、すでに既存のSketchファイルをインポートするか0からSketchファイルを作成するか選ぶことができます。

今回の場合は既存のSketchファイルをインポートしてみます。

ポップアップが開いた際にインポートしたいSketchファイルを選択し、インポートします。

インポートすると、アートボードの情報などが表示されます。

Abstractでバージョン管理をする場合は、Abstractのプラットフォーム上から編集するSketchファイルを開く必要があるので、気をつけましょう。

この際、masterに直接デザインの変更を加えることはできないので、新しくブランチを作成し、その中で作業をします。

ブランチを作成する際はブランチ名と任意のブランチの説明を入れます。

Sketchを開き、デザインに変更を加えます。

変更を加えると、Sketchの下部に「Preview and Commit」というボタンが出てくるので、そちらをクリックして、自分が加えた変更をコミットします。

コミットした時に変更したファイルは「commit」タブで確認することができますし、それぞれの変更にコメントを加えることができるので、もし、変更したデザインをチェックしてもらう必要があればコメントでフィードバックをもらうことができます。

デザインの変更に対して、OKが出たら、画面右上の「Merge Branch」というボタンからmasterにマージすることができます。

以上、Abstractの基本的な使い方をまとめてみました。

まとめ

今回はデザインをgit感覚で管理できるツール、Abstractをご紹介しました。
gitに苦手意識をもつデザイナーもいますが、実際にデザインのバージョン管理ができるのは非常に便利ですし、むしろチームでデザインする時には必須とも言えるかもしれないです。

ぜひSketch Runnerと一緒にデザインする時のマストアイテムとして活用してください。