よりぶろ

アプリのUIとかについて書いてく予定

Sketch バージョン47で待望のLibraries機能が追加!されるので試してみた

f:id:ryo_pan:20170901001353p:plain

以前から噂(中の人がアナウンスしてましたが)のあったSketchのLibraries機能。シンボルを別ファイルで管理できるようになり、複数の.sketchファイルで同一のSymbolを参照できるようになるのでは?と推測されていました。

sketchhunt.com

 バージョン45か46で搭載されるようだぞとコメントがあったのでそわそわしながら待っていたのですが音沙汰がなく、年内には来ないのでは…?と半ば諦めていたところ、バージョン47のβ版でついにLibraries機能が搭載されました。みんなが気になっているであろう新機能、さっそく試してみました。

(※β版で既存の.sketchファイルを開いた場合、現状のバージョンと互換性がなくなる場合があります。利用には十分気をつけてください)

 

 Libraries機能の仕様

まずはLibrariesの仕様を確認してみましょう。SketchのDocumentationページにLibrariesの項目が追加されていましたので、そちらを読んでみます。

Sketch - Libraries (Beta)

ざっとまとめると、

  • Librariesに使うのは通常の.sketchファイル。Libraries用にファイル名やSymbol Pageをどうこうする必要はない。
  • 設定(Preferences)からシンボルを含んでいる.sketchファイルを参照すると、メニューから呼び出せるようになる。
  • 参照元のシンボルに変更を加えると、アップデートするかどうか選べるようになる。

という仕様のようです。類似した機能を持っているプラグインTerasi」には命名ルールがありましたが、Librariesは柔軟に対応してくれるみたいですね。

では実際にLibraries機能を使ってみましょう。

 

Librariesを使う

まずはLibrariesとして使いたいシンボルがまとまっている.sketchファイルを接続(参照)します。今回はサンプルとしてAppleが提供しているファイルを使用します。

Design Resources - Apple Developer

まずPreferencesを開いたのち、Librariesタブに移動します。

f:id:ryo_pan:20170831224736p:plain

ちなみにデフォルトでiOSコンポーネントがひととおり入っています。やさしい。

そして…ウィンドウ内に….sketchファイルを…

f:id:ryo_pan:20170831224846g:plain

ドラッグ&ドロップ!これにてLibrariesとの接続は完了です。なんて簡単〜

 

無事に接続が完了すると、メニュー / ツールバーのInsert(ツールバーの場合はSymbolも)に追加されます。

f:id:ryo_pan:20170831225124p:plain

↑先ほど接続したファイル名がメニュー項目として表示されています。半角スラッシュによる階層分けも反映されているのがわかりますね。

 

LibrariesからSymbolを配置する

あとは通常のシンボルと同様、選択したものを配置するだけです。

f:id:ryo_pan:20170831225410g:plain

以降、便宜上Librariesで参照しているシンボルをLibraries Symbol、通常のSymbols Pageで管理しているシンボルをLocal Symbolと呼称します(Documentationにもそれっぽい記述が見られたので)。

Libraries SymbolはLocal Symbolと見分けがつくように、Layer List上では下記のアイコンが使われています。

f:id:ryo_pan:20170831230100p:plain

また、Libraries Symbolをダブルクリックor選択してリターンキーを押下すると、ダイアログが出て参照元の.sketchファイルを開くか、Librariesとの接続を切って配置しているファイル内のシンボルとして変換するかを選択できます。

f:id:ryo_pan:20170831230621p:plain

参照元を開いた際には、ちゃんとSymbols Page内のシンボルにフォーカスした状態にしてくれます。親切〜

 

Libraries Symbolの更新を反映する

最後に、Libraries Symbolの元データに変更を加えた際に、どのような挙動になるのかを紹介します。

まずは先ほど配置したシンボルに青いRectangleを追加してみました。

f:id:ryo_pan:20170831231017p:plain

次に、ちょっといじわるをして「Libraries Symbolとして配置されてないシンボル」且つ「複数のSymbolにNestedされているシンボル」に変更を加えてみました。

f:id:ryo_pan:20170831231202p:plain

右上のシンボルにグリーンの半透明なRectangleを追加。Nestしているシンボルにも反映されています。「Libraries Symbolとして配置されてなくても変更を知らせてくれるか」「Nestedを含むシンボル全てに変更が知らされるのか?Nest元のシンボルだけに変更が知らされるのか?」を検証します。

 

変更を加えた状態で保存をすると、アプリケーションウィンドウの右上(最近のSketchはここでプラグインのアップデートや見つからないフォントなどを通知してくれます)に通知が出ます。

f:id:ryo_pan:20170831232009p:plain

「Library Update Available」をクリックすると、以下のダイアログが出ました。

f:id:ryo_pan:20170831232158p:plain

なるほど。どうやら、ファイルそのものを参照しているとは言え、Libraries Symbolとして配置されていないシンボルの変更は通知されないようです。まあ、参照してないのだから当たり前と言えば当たり前でしょうか。「Update Symbols」を選択すると、Libraries Symbolに更新が反映されます。

f:id:ryo_pan:20170831232547g:plain

では、もう1つの疑問である「Nestに使われているシンボルを更新した際、変更が知らされるのは元のシンボルだけなのか、Nestを含んでいるシンボル全てなのか?」を改めて検証します。Libraries Symbolとして配置していないと通知がこないことがわかったので、まずはNestをおこなっているシンボルを配置します。

f:id:ryo_pan:20170831232843p:plain

この状態で、先ほど追加したグリーンの半透明のRectangleを消去して保存してみました。

f:id:ryo_pan:20170831233038p:plain

結果はご覧の通り。Nested Symbolとして利用していたシンボルの変更だけが通知されました。

f:id:ryo_pan:20170831235549g:plain

もちろん、更新は全てのシンボルに適用されます。

 

追記:

そういえば「Libraries Symbolの入れ子をやると更新通知はどういった構造になるのか?」を試してなかったのでやってみました。かなりいじわるなパターンですが。

Libraries Symbol Aを配置したLibraries Symbol Bを、SketchファイルCにLibraries Symbolとして参照、配置。Libraries Symbol Aに変更を加えた際に、ファイルCに直接updateが通知されるのか?それともLibraries Symbol Bにしかupdateが通知されないのか?の検証です。

f:id:ryo_pan:20170901110432p:plain

f:id:ryo_pan:20170901110724p:plain

結果から言うと、ファイルCに通知は来ませんでした。一度Libraries Symbol Bでupdateを挟んでから、ファイルCに適用される、という流れです。Libraries SymbolのNestはシチュエーションとしてはあまりないかと思いますが、ご参考までに。

 

参照元の.sketchファイルに変更を加えるとどうなるか?

最後に、参照している.sketchファイルに下記の変更を加えた場合、Librariesにどのような変化が起こるのか?を検証してみます。

  • .sketchファイルの置き場所を変更する
  • .sketchファイルの置き場所を変更した後、元の場所に戻す
  • .sketchファイルのファイル名を変更する
  • .sketchファイルのファイル名を変更した後、元のファイル名に戻す

結論から言うと「なんとかなりそう」です。なぜ曖昧な書き方かと言うと、not foundになるファイルと、置き場所を変えても名前を変更してもゴミ箱に捨ててもちゃんと参照を続けてくれるファイルとの2種類が出てきてしまったんですよね。。イマイチ再現性がよくわかりません。v46のファイルをv47で開いちゃったからかな…?

ともかく、そのあたりの柔軟性も意外と持ち合わせていたという、嬉しい誤算でした。

 

ちなみに見つからないと↓のような状態になり、変更を加えるにはLocal Symbolに変換する以外できなくなります。再リンクが欲しいところですが、ひょっとしたらこの挙動がイレギュラーなのかも?しれません。

f:id:ryo_pan:20170831234704p:plain

f:id:ryo_pan:20170831234556p:plain

 

さらに余談ですが、Librariesに接続する→Libraries Symbolを配置する→接続を切る→再度同じファイルをLibrariesに接続…といった複雑な動作をおこなったところ、接続を切った段階ではLocal Symbolに変換するしかできなかったのですが、再度接続したところちゃんと参照してくれました。地味に助かる。

 

Libraries機能はSketchの運用をどう変えるのか

以前から要望の多かった「シンボルの外部管理化」。Libraries機能の実装によって、Sketchの運用はどのように変わるのでしょうか。

ざっと思いつく感じですと、同一コンポーネントを複数サービスにまたがって使用している場合なんかはかなり効率化が進むのではないかと思います。あるいは、PC WebとSP Webでファイルが分かれている場合なんかも役立ちそうですよね。

小さな規模であればだいたい1ファイルで済むことが多いので、大規模な、あるいは多人数のプロジェクトであるほど、今回のアップデートの恩恵は大きいと思われます。

例えばですが、カラーやアイコン類だけをLibrariesで管理してもいいかもしれませんね。スタイルガイド的な役割をLibraries Symbolに担わせることで、必要最低限のスタイルの担保ができるような気がします。

僕はなかなかそういった規模のプロジェクトに関わる機会が少ないので、ぜひLibrariesを活用した事例なんかを拝見したいです!(他人任せ)

 

宣伝:Libraries機能を本に追記したい

実は5月にSketch本を出した段階でLibraries機能の噂はすでに把握していました(実際、書籍内でも「v45か46で出るかも」と言及しています)。ですが、いつ出るかわからない機能を待ってたら本は出せないしなーということで、もしLibraries機能が出たら増補版とか、第2版として出せたら嬉しいな、という思いがあったりします。

さらにSketch本が売れると、次のバージョンが出しやすくなる(ハズ…!)なので、もし周りでまだ購入されていない方がいらっしゃいましたら、ぜひぜひお薦めをして頂けますと大変嬉しいです!!!!!

UIデザイナーのための Sketch入門&実践ガイド

UIデザイナーのための Sketch入門&実践ガイド