UIデザイナーにおすすめ！Sketch Librariesの基本的な使い方とAbstract上での連携方法

最近Goodpatch Blogでは「デザイナー向けのGitHub」として、デザインデータのバージョン管理ができる Abstract についてご紹介しました。

デザイナー版のGitHub！デザインのバージョン管理システムAbstract社内勉強会を開催しました！

エンジニアたちにはGitHubがありますが、デザイナーには今までデザインの履歴を管理するシステムがありませんでした。そこ …

今回はSketchの機能アップデートで追加された 「Sketch Libraries」の基本的な使い方と、作ったLibraryをAbstract上で連携、管理するまでの流れについてご紹介します。

本記事は一部、Abstractの公式ブログを参考にしています。
Sketch Libraries & Abstract: Per-project Libraries

Sketch Librariesとは

「Sketch Libraries」とは最近Skech 47のアップデートによって追加された機能です。主な機能としては、 Symbolが入ったSketchファイルを外部ファイルとして読み込むことで、ファイル間でSymbol自体を同期して使用することができます。

Sketch Librariesを適応するメリット

適応するメリットは複数あります。

• 複数ファイルでシンボルを自由に使える
• Sketchファイル自体を分割できるので、一つのファイルが軽くなり作業スピードが上がる
• ファイルを分割できたことですぐに見たいpageを探せるようになる

Sketch Librariesの基本的な使用方法

1. 共通のSymbolファイルを作る

まずはSymbol用のSketchファイルを作ります。今回はComponents.sketchというファイル名で作りました。

2. 作ったSymbolファイルをLibraryに追加する

次にSketchのメニューバーからPreference/Librariesに行き、Add Library..から先程作ったComponents.sketchを追加します。

追加すると以下のようにLibrariesにComponents.sketchが追加されます。

3. 他のファイルでLibraryを使用する

Libraryに追加さえしておけば、他のSketchファイルを使用する場合も、メニューバーのInsertからLibraryを使用することができるようになります。
※LibraryからInsertしたSymbolは画像のようなリンク🔗のアイコンになります

4.リンクしたSymbolを更新する

リンクしたSymbolを更新したい場合は、Symbol自体をダブルクリックすると、リンクしているLibrary（Comonets.sketch）を開くかどうかのダイアログが出るので、Open in Original DocumentをクリックしてSymbolを編集します。

編集して元々のSketchファイルに戻ると右上のほうにLibrary Update Availableという通知が表示されているのでクリックします。

クリックすると先程のボタンのスタイルの更新内容がダイアログで表示されるので、Update Symbolsをクリックします。

新しいSketchファイルにも変更が反映されました。

以上が基本的なSketch Librariesの使い方になります。次に作ったLibraryをAbstract上で連携させていきます。

Abstract上で作ったLibraryを連携する

1.Library用のSketchファイルをAbstract上にImportする

Abstractを起動して、Libraryを使用したいブランチまでいきます。タブのFILESを選択するとADD FILEというボタンがあるので、クリックしてImport Sketch File…を選択。先程のLibrary（Components.sketch）を追加します。

2.ImportしたファイルをLibraryとして連携する

次に追加したファイルを右クリックして、Use as Libraryをクリックします。

設定するとSketchファイルのアイコンがLibrary用のアイコンに変わります。

以上でAbstract上での連携は完了です。

最後に

今回はSketch Librariesを使用して、Abstract上で連携する方法をご紹介しました。

Abstractとの連携は比較的簡単ですが、Sketch Librariesに関しては、プロジェクトの初期段階から適応しておくことをおすすめします。（後々やろうとすると、ファイルごとに既存のSymbolをLibrary用のSymbolに全て再設定するなど、結構大変になります。。）

最後に、Abstractの料金プランをまとめました。ぜひ試してみてくださいね。

Abstractの料金プラン