LiBz Tech Blog

LiBの開発者ブログ

【Sketch】デザインファイル管理にAbstractを導入してみた話

f:id:yuka_sunada:20190619145753p:plain はじめまして。
LiBのデザイナーのスナダです。

主にLiBzCAREERの デザイン/設計/仕様策定などを担当しています。

LiBzCAREERはUIデザインツールにSketchを使用しています。

最近、デザインファイルの管理にAbstractを導入し、
まだまだ探り探りではありますが とても便利で素敵と感じた為、ご紹介します!

Abstractとは

  • Sketchファイルのバージョン管理ができるツール
  • シンプルにいうと「デザイナー向けGitHub」

導入の背景

LiBでは今までInVisionをエンジニアとの受け渡しツールとして使用していたのですが、

  • 複数のプロダクトを同時並行で運営中
  • デザイナーのファイル管理や引継ぎを円滑にしたい
  • そもそもInVision更新のタイミング
  • INSPECT機能は引き続き使いたい

ということで検討した結果、Abstractの導入に至りました。

素敵なところ

  • サービス単位でプロジェクトファイルが作れる
  • サービスのSketchファイルデータを一元管理できる
  • 「◯◯の時の△△のデザインファイルどこですか?」というやりとりが発生しない
  • 誰がいつ何の作業をしたかわかる
  • 以前のバージョンのデザインファイルに戻れる
  • 引継ぎが発生した際も受け渡しが楽
  • INSPECT機能でデザインの寸法やカラーを確認でき、エンジニアにデザイン情報を伝えやすい
INSPECT機能f:id:yuka_sunada:20190619150254p:plain

出来ないこと

  • 遷移をつけたプロトタイピング(InVisionにある機能)
    →Sketchのプロトタイピング機能を使えば◯
  • 画像のスライスや書き出し

使い方

f:id:yuka_sunada:20190619174900p:plain 基本的には以下のような使い方になります。

1. MASTERデータの作成
 すべての親となるデザインがFIXした「MASTERブランチ」データを作成します。

2. 編集用ブランチの作成
 MASTERデータを丸々コピーした編集用の作業場を作るイメージです。

3. Sketchファイルデザイン編集
 必ず、Abstract上の作業用ブランチからSketchファイルを開きましょう。

4. 編集データのコミット
 編集したSketchファイルの変更点を2.で作った編集用ブランチにコミットします。
 変更を記録するイメージです。

5. マージする
 変更済みの編集用ブランチをMASTERブランチにマージ(合流)します。

こんなかんじです。

複数編集などが今後発生していくと、
コンフリクトに注意したり
細かくコミットしたりなど、注意が必要そうなので
今後運用してみて気づいたことをまたまとめたいと思います。

まとめ

  • バージョン管理、とても便利。
  • ファイル整理ちゃんとしようと意識ができる。
  • コミット時に「簡潔に変更内容を記載する」という”伝え力”も鍛えられそう。
  • Abstractとっても魅力的!

以上、Abstractを導入してみた感想でした!
もっとこれから使いこなしたいと思います。
ありがとうございました。