【お役立ち情報】Sketchのバージョン管理が出来るAbstractとは?

お役立ち情報

Abstractの使い方を徹底解説!

Abstractのサイト

  • Abstractは、Sketchファイルをバージョン管理する為のサービスです。
  • 1ヶ月無料トライアル付きです。
  • 月$10から利用する事が出来ます。

Sketchについてよく分からないという方は、こちらのエンジニアでもSketchを使ってみよう!の記事を参考にしてください。

バージョン管理とは?

バージョン管理とは、ファイルの変更履歴を記録するシステムの事です。バージョン管理する事で、1度編集したファイルを過去の状態に戻したり、変更内容の差分を表示することが出来ます。

また、変更履歴には「誰が、いつ、どのように」変更したかも含まれるので、複数人で作業する場合に導入する事をお勧めします。

Abstractの特徴

Abstractは、アメリカのElastic Projects, Inc.が提供しているバージョン管理の仕組みを持ったサービスです。現在は、拡張子が「.sketch」のデザインデータに対して変更履歴を記録する事が出来ます。(今後Adobe系対応予定)

エンジニアの方でしたら、デザインのgithub版と捉えてもらった方がわかりやすいかと思います。これから説明させて頂きますが、作成したデザインデータに対してブランチを切って変更をコミット、マージすることが可能です。

Abstractで出来る事は主に下記の通りです。

  • コメント機能
  • プレビュー機能
  • バージョン管理機能
  • サービス単位でプロジェクトファイル作成
  • サービスのSketchファイル一元管理

Abstractは、変更差分のプレビュー表示機能があるので、どの部分のデザインが変更されたのか一目で確認する事が出来ます。

プレビュー機能

Abstract以外にもGithubを利用したKactusというツールがありますが、Gitへの知識や用語が必須になりますので、初心者の方でしたらAbstractの方が参入障壁が少ないです。

Abstractをダウンロードしよう!

今回は1ヶ月無料の方でダウンロードしてみましょう。
まずは、Abstractの公式ページにアクセスしてアカウント作成します。

アカウント作成

アカウント作成後

アカウント作成後は、下記のページに飛ぶので組織名もしくは会社名を記入しましょう。

組織名登録画面

組織名を登録すると、Web上でAbstractの画面にページ遷移します。

デスクトップの管理画面

実際の作業をするには、Macアプリをダウンロードして作業を進めていきます。右上のメニュー、もしくは、Projectsページの「Download Abstract for macOS」ボタンからダウンロードする事が出来ます。

デスクトップ版アプリダウンロード

プロジェクト作成 〜 ユーザー招待をしよう!

Abstractは、サービス単位でプロジェクトを作る事が出来ます。
プロジェクトは、設計作業を行う場所になります。
1つの組織(pikawaka)の中にWebやiOSなどのデザインの設計作業を行う事が出来ます。

また、作成したプロジェクト毎に招待するユーザーを制限する事が出来ます。

プロジェクト作成する方法とは?

プロジェクト作成方法

  1. サイドバーにある「Projects」を選択します。
  2. 右上の青い「NEW PROJECTボタン」を押して、プロジェクトを作成します。
  3. 既にローカルにプロジェクトで使用する.sketchファイルがある場合 作成したProject内で「IMPORT SKETCH FILE」を選択します。
  4. 新規の.sketchを作成する場合 右側の「CREATE SKETCH FILE」を選択します。
用語 内容
Make project private プロジェクトをサービスの中で非公開する時に選択
Automatically generate assets プロジェクトをexportする際のブランチ選択


他のユーザーを招待する流れ

ユーザー招待の流れ

  1. サイドバーにある「People」を選択します。
  2. 右上の青い「INVITE PEOPLEボタン」を押してフォームを開きます。
  3. 開いたフォームで「Contributors」か「Viewers」の権限を選んで下さい。権限は下記を参照して下さい。
  4. 権限を選択したら、メールでユーザーを招待するかリンクを取得してユーザーに送るか選びます。
権限 内容
Contributors すべての機能にアクセス出来る
Viewers 作品をレビュー、コメントや注釈を残す、
ファイルをエクスポートする事が出来る


プロジェクト毎に招待するユーザーを制限する

先ほどの手順は、サービス全体にユーザーを招待していましたが、
プロジェクト毎に招待するユーザーを制限することも出来ます。

プロジェクト毎にユーザーを招待する

  1. サイドバーの「Projects」より招待するProjectを選択します。
  2. Project内のサイドバーの「Members」を選択します。 <ここから通常の手順と同じです。>
  3. 右上の青い「INVITE PEOPLEボタン」を押してフォームを開きます。
  4. 開いたフォームで「Contributors」か「Viewers」の権限を選んで下さい。
  5. 権限を選択したら、メールでユーザーを招待するかリンクを取得してユーザーに送るか選びます。

Abstractの使い方

下記の基本的な使い方を紹介します。説明補足動画もあるので是非手を動かしながら進めてみてください。

  • ブランチ作成
  • コミット
  • マージ
  • コンフリクト解消
  • 過去ファイルの開き方
  • Masterまたは、ブランチを以前のコミットに復元する

ブランチの作成方法

プロジェクト作成した際に「CREATE SKETCH FILE」もしくは、「IMPORT SKETCH FILE」で選択したファイルが大元のmasterブランチになります。あるブランチから別のブランチを作成することを「ブランチを切る」と言います。

今回は、masterブランチから自分の作業するブランチを切っていきます。

ブランチ作成手順

  1. サイドバーのMasterを選択します。
  2. 右上の青い「NEW BRANCH」ボタンを押してブランチ名を入力して作成します。(Masterからブランチを切る)
  3. ブランチを切ると、ページの右側に「EDIT IN SKETCH」ボタンが表示されるので選択すると、そのブランチでSketchが開いて作業を開始する事が出来ます。

commit(コミット)する

ブランチ切って開いたファイルを編集すると、Abstractのツールバーが表示されます。こちらに変更履歴を残すためにcommit(コミット)を行います。

コミット追加

  1. 作業ブランチで開いたSketchファイルを編集して保存します。(Command + S)
  2. 変更内容を保存すると、Abstractのツールバーで「Commit Changes」ボタンが表示されるので選択します。
  3. モーダルダイアログでコミットのタイトルやメッセージを入力して「COMMIT CHANGES」を選択してCommitします。
  4. Abstractの作業ブランチのページでコミット内容が表示されます。

コミット内容表示

ブランチをmerge(マージ)する

作業が完了したブランチを別のブランチに反映させることを「ブランチをmerge(マージ)する」と言います。

作業中のブランチが完了したら、今回はmasterブランチに変更内容を取り込みます。

作業ブランチをマージする

サイドバーにあるBlanchs配下の作業ブランチのページにある「MERGE BLANCH」と書かれたボタンを選択してmergeします。

merge後に、Masterのページを表示すると作業ブランチで編集した内容が追加されている事が確認出来ます。

コンフリクト解消

mergeする際に、別のブランチで編集した箇所と自分のブランチで編集した箇所が被ってしまう場合(コンフリクト)がしばしばあります。

コンフリクトが起きている状態でmergeしようとすると、編集が被った箇所のどちらのデザインが正しいのか選択するように促されます。

コンフリクト解消方法

コンフリクトが起きている状態だと「MERGE BLANCH」ではなく、「UPDATE FROM MASTER」のボタンが表示されます。
「UPDATE FROM MASTER」を選択すると、コンフリクトが起きているデザインをプレビューで表示してくれるので、正しい方を「PICK LAYER」を押して反映させます。

コンフリクトが解消されると、「MERGE BLANCH」が表示されてmerge出来るようになります。

過去ファイルの開き方

Abstractは、履歴を辿って簡単に過去ファイルをSketchで開く事が出来ます。

過去ファイルの開き方

  1. サイドバーの「Master」ページにある上部の「COMMITS」タブを開きます。
  2. Masterのファイル履歴があるので、そこから開きたいファイルを選択します。
  3. ページの右側に「open」ボタンがあるので、開くと過去ファイルをSketchで開く事が出来ます。

Masterまたは、ブランチを以前のコミットに復元する

自分が所有しているブランチなら以前のコミットに復元する事が出来ます。

以前のコミットに復元する方法

  1. サイドバーよりMaster, Blanchを選択します。
  2. 上部の「COMMITS」タブをクリックします。
  3. 復元したいコミットを選び、右上のSHAREの横にある時計アイコンをクリックします。
  4. 以前のコミットに戻す理由を記載して、「RESTORE COMMIT」ボタンを押します。

この復元内容もMasterまたはブランチの履歴に記録されます。

詳細な使い方は、こちらのAbstract公式ページのヘルプセンターを参照してください。

Abstractの注意点

Abstract上でブランチ切ってから「EDIT IN SKETCH」ボタンを押してSketchファイルを開かなければバージョン管理されないので注意しましょう!

ローカルにあるSketchアプリを開いて作業するだけではバージョン管理をする事は出来ません!!

まとめ

  • Abstractは、Sketchファイルをバージョン管理する為のサービスです。
  • 変更した内容は、プレビュー機能で直接確認する事が出来ます!
  • 1ヶ月無料トライアル付きなので是非導入してみましょう