先週、InVisionから新サービスである「InVision Design System Manager」のアーリーアクセス権が届いたので触ってみました。

導入方法

事前にアーリーアクセスのリクエストを申請していた人はぼちぼちメールが届いているかと思います。メールに記載されているリンクからDSMが開けるようになっています。またSketchのプラグインであるCraftの裏コマンド的なものを打ち込むと、SketchとDSMを連携させることができます。

個人的にはCraftの裏コマンドが萌えポイントでした。

使い方

Sketch上でCraftからDSMを立ち上げるとこんな感じ。

色・書体・レイヤースタイル・アイコン・コンポーネントなど、デザインガイドラインの「種別」ごとにディレクトリ管理されていて、その中からSketch上で反映したいものをドラッグアンドドロップすると設置ができる。

試しにアイコンから一つ選んで設置してみる

設置が完了すると自動的にSymbolsにもアイコンが追加されました。

Web上で見るとこんな感じ。黒く塗りつぶしたところにはチーム名が入っています。右側にライブラリの一覧が表示されてる。

新しくライブラリ作ってみましょう。

このあとはSketchのプラグイン上で色や書体、レイヤースタイルなどを追加していく感じ。

便利そうだったのが出力の機能。Web上でCSSやJSONでもろもろ書き出してくれます。

他にもバージョン管理が出来るので、前のバージョンに戻したり比べたりできます。

プロジェクトでの利用はまだ早い？

色々触ってみたんですが、ちょっとまだ実際のプロジェクトに使うのには難しいかも。SketchのLibrariesでいいんじゃないかな…と思うようなところも結構あったり。デザインシステムをきちんと管理したいという気持ちは皆さん高まっているので、ぜひDSM頑張って欲しい。そしてやっぱり真価を発揮するのはInVision Studioが出てからなのでは？