こんにちは(こんばんは)。
今回は、Sketch3のプラグインCraftの新機能「Sync」とwebサービス「inVision」についてご紹介します。
Craftとは
ダミーデータを挿入して作業を自動化できるSketch3とPhotoshopのプラグインです。
公式サイト
https://www.invisionapp.com/craft
「Sync」機能とは...
- Sketch上で簡単にwebサービス「inVision」と連携できる
- 2016.11.19現在 ベータ版
以前のCraftについての記事
Sketch3とPhotoshopのプラグイン Craft を使って制作を楽にしよう
https://www.tam-tam.co.jp/tipsnote/html_css/post9091.html
Sketch3のプラグインCraftを使ってJSONを読み込もう
https://www.tam-tam.co.jp/tipsnote/javascript/post10605.html
※バージョンが古いものなので、現バージョンとはUIと機能が少し異なります
本記事で検証した仕様環境
OS X El Capitan - version 10.11.3
Sketch 3 - version 41
Craft - versition 1.6.1
inVisionとは
プロトタイプの作成やデザインレビューなどができるwebサービスです。
本記事ではinVisionにアカウントを持っているという前提になっておりますので
記事内容を試される方はアカウントの取得をお願いします。
公式サイト
https://www.invisionapp.com
Craftを使うとinVisionにSketch3のデータを簡単に送信できます。
inVisonで出来ることを抜粋してご紹介します。
プロトタイプを作成できる
アニメーションを利用したプロトタイプが作成できます。(inVisionアプリにて実機確認もできます。)
作成したプロトタイプの情報をスマホのslackに通知し、inVisionアプリを起動して実機でプロトタイプを確認する、といったこともできます。
デザインレビューができる
好きな位置にコメントを残せます。
sketch3のスタイルやテキストの抜き出し(2016.11.19現在 ベータ版)
オブジェクト間の距離やCSS、テキストなどを抜き出せます。
CraftでSketch3をinVisionに連携するまで
Craftのインストールは前回記事を参照お願いします。
Craftプラグインを有効にしますと、インスペクターの左にCraft用のアイコンが表示されますので
「Sync」機能のアイコンをクリックします。
inVisionへのログインを求められますので、ログインします。
次に「Create new prototype」をクリックします。
※inVisionに自分のプロジェクトがない場合にのみこの画面が表示されます。
inVisionのダッシュボードに移りますので
自分のプロジェクトを追加します。
本記事ではinVisionで「tipsnote」というプロジェクトを作成しました。
Sketch3に戻り、Syncから作成したプロジェクトを選びます。
「tipsnote」を選びます。
あとは、「Sync to inVision」をクリックすれば連携されます。
無事反映できました。
まとめ
今回Craftを使用してデザイン一式をinVisionに反映できました。
inVisionにて
- プロトタイプ
- デザインレビュー
- スタイルの抜き出し
という機能が備わっているのは強力です。
デザインレビュー、スタイルの抜き出しについては
現在はzeplin
というツールが流行っており、
追従する形になると思うのですが、
今後のInVisionの開発に注目してみてはいかがでしょうか？
参考サイト
inVisionで簡単！便利！にデザインレビュー！
http://ceblog.mediba.jp/post/144292048687/invision%E3%81%A7%E7%B0%A1%E5%8D%98%E4%BE%BF%E5%88%A9%E3%81%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%AC%E3%83%93%E3%83%A5%E3%83%BC