ついに来た! 最強のプロトタイピングツールと期待されている inVision Studio. (early access版) を触ってみました

today

去年からプロモ動画のみを公開し、大きな反響を呼んでいた inVision Studio. SketchやXDの対抗となるアプリですが、動画を見る限りそれらを駆逐するほどの高い機能を持っていると噂されていました。ついに登録していた early access版の招待メールが来たので、調査します。

Studio. は昨年、プロトタイピングのWebサービス大手 inVision がプロモ動画を発表し、その機能の豊富さから、「これだけ機能があって、使いやすくて軽かったらSketchもXDも消えるのでは…?」とまで期待させられていたソフトウェアです。

InVision Studio | Screen Design. Redesigned.
www.invisionapp.com

現在公式サイト に機能の紹介が解禁されていますが、ざっくりいうと

などなど、あきらかに盛りすぎですが最強感が半端ないアプリです。さらに、デザインシステムのツール も作ろうとしていたり、もう唯我独尊を目指しています。

今年の1月にはダウンロード可能の予定でしたが、伸びていたのでやきもきしていた方も多いと思います。今回、ようやっと招待メールが届いたので、さっそくどの程度の機能が使えるのか試してみます。おもにSketchとの比較です。

インスコ・起動

届いた招待メールの「GET STUDIO NOW」からダウンロードページへ行き、いつものように.dmgファイルからMacインスコするだけです。ここらへんは割愛。アイコンはこんな感じです。シンプルな分、目立っています。

起動しました。この画面はLauncherと呼ぶ模様。「Open Studio or Sketch File」の文字が…Sketch形式にも対応している模様。ためしに手元のSketchファイルを開いてみましたが、だいぶ見た目バグったのでこれはみなかったことにします。左下「Learn Studio」はYouTubeの動画 が開くだけでした。

地味にテンプレートが多くてステキ。

やはり基本的なUIパネルの構成はSkechに近いですね。

ちなみにLightなThemeもあります。

チュートリアルで紹介されている機能

とりあえずLauncher画面にある、みっつのTutorialsをやってみます。これをクリックすると練習用の説明付きファイルが開きます。XDでも同じようなチュートリアルがありますが、こういうのとてもわかりやすくて良いです。

Layout

Animation

Scroll

その他の機能

InVisionへのアップロード

当然できます。まぁSketchでもCraft使ってよくやるし割愛。

モバイルプレビュー

SketchMirrorのような機能もありますよ。プロトタイピングを作成したら、右上の画面からQRコードを表示し、

InVisionアプリ のカメラで読み取ってモバイルプレビューできます。

コンポーネント ( シンボル )

さて、大事なシンボル機能についてです。studio.ではシンボルではなく、コンポーネントと呼んでいる模様。Web開発の世界でモジュールの考え方が主流になっている昨今、シンボルよりも適切な名前だと思います。名前は違えど、コンポーネント化(めんどいのでシンボル化って書きます)の流れはほぼ同じです。シンボル化したいレイヤーを選択し、⌘Kのショートカットもしくは上部ツールバーのこのナットのアイコンをクリックするだけです。
シンボルを管理する場所はSketchだと Symbolsレイヤー (正確には任意のレイヤー) ですが、studio.はレイヤーパネルに「Library」という専用の領域が用意されています。こちらは公式動画のスクショ↓
SymbolsのOverrideも当然できると思うのですが、どうも見当たりません…。さらに動画ではこのライブラリを複数人で共有したりテキストスタイルの管理などもここで行えるようなのですが、そのような機能は現状未実装の模様です。

その他の評価

ドキュメント構造

ショートカット

日本語テキスト対応

パフォーマンス

操作はかなりサクサク動きます。拡大縮小のアニメーションがぬるっとしてて少し気持ち悪いです。ファイルの起動はSketchよりもだいぶ遅いです。

ファイル形式

やっぱしSketch同様にJSONでした。作成される.studioファイルの拡張子を.zipに変えて解凍すると想像どおりの結果に。

総評

以上、また発見があれば追記していきます。