GameWith Engineering Blog

GameWith のエンジニア、デザイナーが技術について日々発信していきます。

InVision謹製、DSMこと「DesignSystemManager」を使ってみて

 GameWith デザイナーの @guchitaka_ です。Web からアプリまで諸々デザインに携わらせていただいております。 inVision が2018年1月提供予定の DSMこと「DesignSystemManager」の EarlyAccess が出来るようになったので早速使ってみました。

www.invisionapp.com

InVision「DesignSystemManager」について

はじめに、そもそもデザインシステムとは

組織におけるデザインの共通言語となるものです。

従来はスタイルガイドやUIキットを作り、それを関係者が参照するような形で組織のデザインを制御していました。しかしながら少しでも更新が滞ったりすると参照する意味がなくなり、死んだガイドラインとなった経験をされた方も多いのではないでしょうか。メンテナンスにかけるコストも馬鹿にならなく、ガイドラインの整備に追われて作る時間がとれず本末転倒になる場合もありました。

デザインシステムはこれを解決するもので、それ自体が各プロダクトにエコシステムを提供するプロダクトとして運用されるというものです。

今回は InVisionDSM について言及するので詳しい説明は割愛します。

このあたりに詳しく書いてあります

InVision DSM で出来ること

  • スタイルやシンボルのバージョン管理
    • Color
    • Text Styles
    • Layer Styles(現在は項目だけ存在)
    • Icons
    • Components(Artboardも出来ます)
    • Fonts
  • Team 管理
  • DesignToken の出力

目次

  • 導入
  • 実践
  • バージョン管理
  • 出力
  • まとめ

導入

Early Access を申請されていた方はメールが届いているかと思いますので指示に従い導入します。 大まかな手順は以下の通りです。

  • 「CraftManger」をインストール(既にインストール済みの場合は一度アンインストール)
  • Organizations 作成
  • Libraries 作成

InVision DSMにアクセスすると以下のような画面が表示されます。

f:id:guchitakas:20171225183053p:plain

今回は適当な Library を作成します。

f:id:guchitakas:20171225183036p:plain

詳しくは以下を参照してください。

support.invisionapp.com

実践

Library の作成と CraftManager の準備が整ったところで実際にDSMを使ってみましょう。

まずは適当なアセットを用意します

Icons と Components は実際の運用を想定して Symbol 化しています。

f:id:guchitakas:20171225185804p:plain

次にDSMのパレットを開いて追加します。

CraftManager のツールバーに六角形のアイコンがあるのでクリックします。 まだ何も追加していないので No Hoge...と表示されるはずです。

f:id:guchitakas:20171225190042p:plain

次に、追加したいアセットを選択して「+」を押します

追加したいアセットを選択して、DSMのパレット右下にある「+」ボタンを押します。とても簡単でありがたいです。 パレットを見ると追加されているのが確認できます。

※ Layer Styles も表示されていますが、EarlyAccess版では未実装のようです。

追加したアセットのSketch 上での見え方

各アセット毎に分けられて表示されています。 階層を切れるので、役割ごとにグルーピングできるのは嬉しいですね。

Colors

f:id:guchitakas:20171225190505p:plain

Text styles

f:id:guchitakas:20171225190518p:plain

Icons

f:id:guchitakas:20171225190531p:plain

Components

f:id:guchitakas:20171225190543p:plain

Web上 での見え方

Colors

RBG/HEX/HSL/HSV が取得できるようです。

f:id:guchitakas:20171225190810p:plain

Text styles

Paragraph の設定は取得できないようです。 可能であれば TextColor も HEX などで見られると嬉しいですね。要望出しておきました。

f:id:guchitakas:20171225190857p:plain

Icons

Icon のダウンロードはここからは出来ません。後述する DesignToken から得られます。

f:id:guchitakas:20171225190907p:plain

Components

f:id:guchitakas:20171225190934p:plain

Fonts

f:id:guchitakas:20171225190945p:plain

アセットを利用する

使い方は簡単、Icon や Component の場合はパレットからドラッグ&ドロップで配置するだけ。 Color や TextStyle の場合は反映したいオブジェクトを選択してパレット内のスタイルをダブルクリックします。

f:id:guchitakas:20171225192306p:plain

アセットを更新する

オブジェクトを選択してパレット内の「+」ボタンを押すとアセットが更新できます。 変更点がダイアログで表示されますので、新規作成か更新を選んでください。 尚、Symbol Override も引き継ぐようですので、更新の際はご注意を。

f:id:guchitakas:20171225192604p:plain

アセットの更新を受け取る

異なるファイルで同じ Icon を DSM からドロップして配置しています。

f:id:guchitakas:20171225194041p:plain

DSM パレットの「↓」アイコンを押すと、ファイル内のアセットに変更内容が反映されます。とても楽ですね。

f:id:guchitakas:20171225194551p:plain f:id:guchitakas:20171225194107p:plain

バージョン管理

まずはバージョンをリリースします

Library 名 をクリックして「Release new version」を選びます。

f:id:guchitakas:20171225194632p:plain

Version 名と Description を求められるので入力して「Create Version」を選びます。 これで作成完了です。

f:id:guchitakas:20171225194644p:plain

バージョンを変更するには

先と同じように Library 名 をクリックして「Switch Version」を選びます。

f:id:guchitakas:20171225194655p:plain

バージョンの更新を共有するには

バージョンの更新だけでは不十分ですよね、それを関係者に共有する必要があります。 Web 版の DSM を開き画面右上の「Share」を押すとURLが出力されるので活用しましょう。

なお「Share」しなくてもDSMを開いた際には、更新された旨が通知される安心設計です。

f:id:guchitakas:20171225195202p:plain

出力

この機能が InVision DSM の真の価値ではないでしょうか、なんと DSM は Design Token の出力に対応しております。 DesignToken が唯一の正しいデザイン(Single source of truth)として機能し、各プロダクトで一貫性のあるデザインを提供できるようになります。

実際に出力する

Web 版の DSM 右上にあるアイコンをクリックします。

f:id:guchitakas:20171225195255p:plain

DesignToken が出力され、取得できるようになります。 対応形式は以下の通りです。

CSS/Sass/Less/Stylus/XML/JSON/YAML/Android/iOS

アイコンなども Resouces として取得できるようですが、余白として設定した透明ピクセルをカットされてしまうので現状はまだ使えません。

f:id:guchitakas:20171225195308p:plain

まとめ

スタイルガイドの作成やデザインのチーム内での共有、Artboardもシンボル化せずに登録できるため、画面単位での共有もできると、非常にありがたみを感じます。 そしてとどめの DesignToken ... SalesForce も採用していますが、これは可能性しか感じません。 ちょうど DesignSystem の構築を考えているところなので、GameWith でも導入を検討したいところです。

参考文献

www.invisionapp.com support.invisionapp.com Designing a Design System // Speaker Deck