GameWith デザイナーの @guchitaka_ です。Web からアプリまで諸々デザインに携わらせていただいております。
inVision が2018年1月提供予定の DSMこと「DesignSystemManager」の EarlyAccess が出来るようになったので早速使ってみました。
InVision「DesignSystemManager」について
はじめに、そもそもデザインシステムとは
組織におけるデザインの共通言語となるものです。
従来はスタイルガイドやUIキットを作り、それを関係者が参照するような形で組織のデザインを制御していました。しかしながら少しでも更新が滞ったりすると参照する意味がなくなり、死んだガイドラインとなった経験をされた方も多いのではないでしょうか。メンテナンスにかけるコストも馬鹿にならなく、ガイドラインの整備に追われて作る時間がとれず本末転倒になる場合もありました。
デザインシステムはこれを解決するもので、それ自体が各プロダクトにエコシステムを提供するプロダクトとして運用されるというものです。
今回は InVisionDSM について言及するので詳しい説明は割愛します。
InVision DSM で出来ること
- スタイルやシンボルのバージョン管理
- Color
- Text Styles
- Layer Styles（現在は項目だけ存在）
- Icons
- Components（Artboardも出来ます）
- Fonts
- Team 管理
- DesignToken の出力
目次
- 導入
- 実践
- バージョン管理
- 出力
- まとめ
導入
Early Access を申請されていた方はメールが届いているかと思いますので指示に従い導入します。 大まかな手順は以下の通りです。
- 「CraftManger」をインストール（既にインストール済みの場合は一度アンインストール）
- Organizations 作成
- Libraries 作成
InVision DSMにアクセスすると以下のような画面が表示されます。
今回は適当な Library を作成します。
詳しくは以下を参照してください。
https://support.invisionapp.com/hc/en-us/articles/115005671843-Design-System-Manager-early-access-instructionssupport.invisionapp.com
実践
Library の作成と CraftManager の準備が整ったところで実際にDSMを使ってみましょう。
まずは適当なアセットを用意します
Icons と Components は実際の運用を想定して Symbol 化しています。
次にDSMのパレットを開いて追加します。
CraftManager のツールバーに六角形のアイコンがあるのでクリックします。 まだ何も追加していないので No Hoge...と表示されるはずです。
次に、追加したいアセットを選択して「+」を押します
追加したいアセットを選択して、DSMのパレット右下にある「＋」ボタンを押します。とても簡単でありがたいです。 パレットを見ると追加されているのが確認できます。
※ Layer Styles も表示されていますが、EarlyAccess版では未実装のようです。
追加したアセットのSketch 上での見え方
各アセット毎に分けられて表示されています。 階層を切れるので、役割ごとにグルーピングできるのは嬉しいですね。
Colors
Text styles
Icons
Components
Web上 での見え方
Colors
RBG/HEX/HSL/HSV が取得できるようです。
Text styles
Paragraph の設定は取得できないようです。 可能であれば TextColor も HEX などで見られると嬉しいですね。要望出しておきました。
Icons
Icon のダウンロードはここからは出来ません。後述する DesignToken から得られます。
Components
Fonts
アセットを利用する
使い方は簡単、Icon や Component の場合はパレットからドラッグ＆ドロップで配置するだけ。 Color や TextStyle の場合は反映したいオブジェクトを選択してパレット内のスタイルをダブルクリックします。
アセットを更新する
オブジェクトを選択してパレット内の「+」ボタンを押すとアセットが更新できます。 変更点がダイアログで表示されますので、新規作成か更新を選んでください。 尚、Symbol Override も引き継ぐようですので、更新の際はご注意を。
アセットの更新を受け取る
異なるファイルで同じ Icon を DSM からドロップして配置しています。
DSM パレットの「↓」アイコンを押すと、ファイル内のアセットに変更内容が反映されます。とても楽ですね。
バージョン管理
まずはバージョンをリリースします
Library 名 をクリックして「Release new version」を選びます。
Version 名と Description を求められるので入力して「Create Version」を選びます。 これで作成完了です。
バージョンを変更するには
先と同じように Library 名 をクリックして「Switch Version」を選びます。
バージョンの更新を共有するには
バージョンの更新だけでは不十分ですよね、それを関係者に共有する必要があります。 Web 版の DSM を開き画面右上の「Share」を押すとURLが出力されるので活用しましょう。
なお「Share」しなくてもDSMを開いた際には、更新された旨が通知される安心設計です。
出力
この機能が InVision DSM の真の価値ではないでしょうか、なんと DSM は Design Token の出力に対応しております。 DesignToken が唯一の正しいデザイン（Single source of truth）として機能し、各プロダクトで一貫性のあるデザインを提供できるようになります。
実際に出力する
Web 版の DSM 右上にあるアイコンをクリックします。
DesignToken が出力され、取得できるようになります。 対応形式は以下の通りです。
CSS/Sass/Less/Stylus/XML/JSON/YAML/Android/iOS
アイコンなども Resouces として取得できるようですが、余白として設定した透明ピクセルをカットされてしまうので現状はまだ使えません。
まとめ
スタイルガイドの作成やデザインのチーム内での共有、Artboardもシンボル化せずに登録できるため、画面単位での共有もできると、非常にありがたみを感じます。 そしてとどめの DesignToken ... SalesForce も採用していますが、これは可能性しか感じません。 ちょうど DesignSystem の構築を考えているところなので、GameWith でも導入を検討したいところです。
参考文献
www.invisionapp.com support.invisionapp.com Designing a Design System - Speaker Deck
