SketchとMarvelが連携!プラグインで連携するとSketchで編集した内容がMarvelに反映されるように

更新日:2017年2月8日

先日、POPを買収し移行作業を行ったMarvelですが、また動きがありましたのでお伝えします。
Play and record Marvel prototypes in Sketch!
Sketchで編集を行ったデータをSketch上にある同期ボタンを押すだけで、Marvelにアップすることができるプラグインがリリースされました。

早速試してみたので手順を紹介します。

まずはプラグインをインストール、プロジェクトを作成

プラグインのインストールはこちらから
Sync designs. Play prototypes. Record flows.

インストールしたらSketchとMarvelプラグインを立ち上げます。
Sketchの左上にMarvelのプラグインが表示されます。

Sync Allボタンを押すとプロジェクトが作成できます。
すでにプロジェクトを作成済みの場合は指定のプロジェクトを選択。新規の場合はプロジェクト名を入力して次に進みます。

ブラウザでMarvelを立ち上げて、プロジェクトが出来ているのを確認します。画面遷移などをつけられるのはブラウザ上でしか出来ないので、繊維をつけたりインタラクションをつけたりします。ここでデバイスの設定を忘れないようにしてください(プラグインからはサイズしか指定できません)

Sketch上のプラグインの中にある再生ボタンを押すと、プロトタイプのプレビュー画面が表示されます。

Sketch上で変更したい箇所を編集します。「Start Shopping」ボタンをオレンジ色に変更してみました。変更したアートボードを選択してSync Selectedボタンを押します。

さきほど表示していたプレビュー画面が自動的に更新されます。

ということで、一度Marvelで画面遷移などをつけたプロジェクトはSketchを離れることなくデザインの変更を同期することが可能になりました。

便利。ですが、もう一歩踏み込んでほしかった…Sketch上で画面遷移をつけたりボタンの位置を変更できるようにしてほしいですね。InVisionのCraftもそれに挑戦中のはずですがなかなかリリースされない…。Sketch上でプロトタイピングができる未来はまだ遠い?引き続きアップデートに期待です!

書き手:小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter: @yoshikikoji