InVision製デザインシステム管理サービス「Design System Manager」のEarly Access版を試してみた

諏訪 悠紀

2017.12.22

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

InVision Design System Manager

2018年1月にリリースされることが発表されている「InVision」の新しいサービス「Design System Manager（DSM）」。2017年12月現在はEarly Access版（申請制）として提供されています。

申請が通りましたので、早速使ってみました！

できること

Design System Managerでは、以下のようなことができます。

  • デザインシステムのバージョン管理
    • Color
    • Text Styles
    • Components
    • Fonts
  • Sketchプラグインによる連携
  • チーム管理

はじめに - オーガナイゼーションとライブラリの作成

Early Accessの申請が通ると、メールが届きます。メールの内容にしたがって、オーガナイゼーション（Organization）とライブラリ（Library）を作成します。オーガナイゼーションの中には複数のライブラリを作ることができます。

ライブラリでは、新規に作成するときにサンプル（あらかじめ定義のあるテンプレート）を選ぶことができます。今回はこちらを使います。

Colors

Text Styles

Icons

Components

Fonts

Craft Managerのインストール

次に、SketchにCraft Managerをインストールします。すでにインストール済みの場合も、再インストール（一度アンインストールしてから、再度インストール）を行う必要があります。

Design System Manager（Sketchプラグイン）のインストール

Craft Managerのパネルにて ⌘ + Shift + B を押すと、ベータアクセスの画面になります。表示されている画面でこちらに記載されているパスワードを入力します。

必要な情報を入力し「Activate code」を押します。

「Environment」の「Production」を「Design System Manager」に変更します。

「Install」をクリックします。インストールが終わったらSketchを再起動します。

Sketchを開き、Craft Toolbarに下記のマークが表示されていれば、無事にインストールできています。

このボタンをクリックすると、InVisionのログイン画面が表示されるので、ログインします。

InVisionアカウントでアクセスできるライブラリが表示されました。

Sketchでライブラリを活用する

Design System Managerを使うと、ライブラリにデザイン素材を追加したり、ライブラリに保存しているデザイン素材を取り出したりすることができます。今回は簡単な「Colors」（色のパレット）を使ってみました。

ライブラリに色を追加する

非常に簡単です！Sketch側でシェイプを選択し、Design System Managerで「+」ボタンを選びます。選択済みのシェイプが色候補として出てくるので、選んで追加します。

ブラウザでは更新があったことが通知されます。

再度読み込むと、追加した色がすぐに反映されます。

ライブラリの色を使う

非常に簡単です！Sketch側でシェイプを選択し、Design System Managerで適用したい色をダブルクリックするだけで反映できます。

まとめ

Design System Managerは、アプリケーション全体で統一したデザインシステムを管理できるので Sketchを使ってデザインを製作している場合は必ず併用すべきツール と言えるでしょう。恐らくもうすぐで正式リリースされるはずなので、ぜひ活用していきたいですね！

参考

本記事は、下記の記事を参考に執筆しています。

customer-story-analytics