2017年9月13日

デザイン

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

目次

  1. はじめに
  2. Abstractとは?
  3. Abstractの機能
  4. Abstractを使う際のファイル構成
  5. Abstractを使ってみる
  6. まとめ + 感想

はじめに

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

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

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

Abstractとは?

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

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

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

Abstractの機能

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

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

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

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

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

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

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

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

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

基礎として用意するもの

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

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

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

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

コンポーネント

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

コンポーネントのレベル1:Foundation

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

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

コンポーネントのレベル2:Lower-level blocks

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

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

コンポーネントのレベル3:Mid-level blocks

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

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

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

Abstractを使ってみる

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

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

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

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

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

新しく作成したプロジェクトに入ると、すでに既存の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と一緒にデザインする時のマストアイテムとして活用してください。

0

0

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP