デザイナーヘルプツール InVision と Sketch の合体技

デザイナーの たなか ゆきこ です。

いまさら感はあるのですが、デザイナーとエンジニアのコミュニケーションに役立つ InVision の導入方法について記載していきます。InVision Studio、InVision Design System Manager、Design Forward Fundなど充実していっている InVision です。

Adobe XD や Zeplin 等ツールは色々ありますが、現在の自分や周囲の状況で臨機応変に対応するのがよいと思ってます。あくまで、道具＝ツールです。デザイナーにとって重要なのは、ツールを使う技術ではなくて、便利なツールを使うことでオペレーション時間を削減して、デザインを考える時間を増やすことです。

• https://www.invisionapp.com/
• https://zeplin.io/
• http://www.adobe.com/jp/products/xd.html

InVision のよさ

デザイナーにとっては Sketch のデータをそのままアップできることが最大のメリットです。デザイン定義書をpdfで渡すなどの必要がありません（最終的に自分のためにもつくることを推奨しますが別の話）。

エンジニアからみたメリットは、inVishonをみて、色や余白などを確認できることです。

確認できる情報

• 色
• 高さ・横幅
• ほかオブジェクトの距離
• 角丸
• 透過

ちょっとしたことなんですが、「ここって何色」「余白ってどうなってる」を自分で確認できることが楽とのことでした。

デザイナーの目には、赤をまぜた灰色・真っ黒ではない黒が認識できていても、「赤をまぜた灰色」と「灰色」の差はわかりにくいという事実があります。「色には温度がある」という言葉は、デザイン系の人々には通用しますが、難しいこともあるのが現実です。

InVision のアカウントをつくろう

https://www.invisionapp.com/

右上の「SIGN UP FREE」から登録しましょう。 無料プランでは、プロジェクトが１個作れます。

あとは、メールアドレスなど入力しましょう。それでアカウント登録完成です。

プロジェクトをつくろう

＋ボタンをクリックでプロジェクト作成ができます。

Sketch からデータをアップするので、PROTOTYPE を選択します。UPLOAD SCREENS は、Sketch があるのでほぼ使わないです。

プロジェクトの名前をつけたら、Sketch へ移動しましょう。

Sketch からの同期

同期は、InVision が公式で出している Sketch Plugin 「CRAFT」を使います。

https://www.invisionapp.com/craft

ダウンロードしてインストールをしましょう。インストールが完了したら、Sketch は一度アプリケーションを終了させて再起動しましょう。初心者みたいですが、「ダウンロードしたのにでないのはなぜだ」ということをやってしまいました。

一番上をタップすると、サインインを促す画面がでますので、先ほど作ったアカウントを入れます。

ログインすると、InVision で作成したプロジェクトを選択することができます。

「sync to InVision」をクリックすれば登録したプロジェクトに同期ができます。

最後に、Sketch にデザインガイドを

InVision をせっかくエンジニアさんへ共有できるのですから、Sketch の Pages にデザインガイドを作成すると自分も助かるので二重の意味で楽になると思います。

デザインガイド

最初に、「タイポグラフィ」と「色」を作成することにしています。

タイポグラフィ情報

色

色の名前は、考える時間が惜しいので、だいたいこんなイメージでつけることにしています。

関連記事

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