satake

Sketch3のプラグインCraftでinVisionとの連携が楽になる「Sync」機能搭載

こんにちは(こんばんは)。
今回は、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のデータを簡単に送信できます。
https://gyazo.com/0e070cf915bb64d40bee54a75cb5591a

inVisonで出来ることを抜粋してご紹介します。

プロトタイプを作成できる

アニメーションを利用したプロトタイプが作成できます。(inVisionアプリにて実機確認もできます。)
https://gyazo.com/522784f50c718e4873acf5a20fa16845
作成したプロトタイプの情報をスマホのslackに通知し、inVisionアプリを起動して実機でプロトタイプを確認する、といったこともできます。

デザインレビューができる

好きな位置にコメントを残せます。
https://gyazo.com/958907ec5d9d7a9abe7f68857dd103a9

sketch3のスタイルやテキストの抜き出し(2016.11.19現在 ベータ版)

オブジェクト間の距離やCSS、テキストなどを抜き出せます。
https://gyazo.com/ad8a82cb35afd08f69a5254c6654087d

CraftでSketch3をinVisionに連携するまで

Craftのインストールは前回記事を参照お願いします。

Craftプラグインを有効にしますと、インスペクターの左にCraft用のアイコンが表示されますので
「Sync」機能のアイコンをクリックします。
inVisionへのログインを求められますので、ログインします。

1

次に「Create new prototype」をクリックします。
※inVisionに自分のプロジェクトがない場合にのみこの画面が表示されます。

3

inVisionのダッシュボードに移りますので
自分のプロジェクトを追加します。
本記事ではinVisionで「tipsnote」というプロジェクトを作成しました。

4

Sketch3に戻り、Syncから作成したプロジェクトを選びます。
「tipsnote」を選びます。

5

あとは、「Sync to inVision」をクリックすれば連携されます。

5

無事反映できました。

6

まとめ

今回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

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら