Sketch, XD, Figma, Studio を比較する連載記事の5番目です。

1. 導入と背景知識
2. 基本項目の比較
3. デザイン機能比較
4. シンボルとスタイル
5. プロトタイピングとコラボレーション    ◀イマココ
6. まとめ

今回はデザインに画面遷移やアニメーションをつける「プロトタイピング」機能と、複数人での作業や情報共有の機能についでです。

プロトタイピング機能とは

画面遷移やアニメーション、インタラクションを作成する機能です。UIデザインを行う際に、

★ 画面遷移やUIのアニメーションを表現する
★ ユーザーの操作に応じてインタラクションを行う
★ スマホなど最終的な実機環境でのデザイン確認を行える

ことで、最終的なアウトプットに近い状態でデザインを確認したり、チーム内でイメージを共有しやすくなります。

Sketch / XD / Figma / Studio のいずれも、ツール単体でプロトタイピングを行えます。ただし、アニメーションの表現力や、プロトタイプに設定できるトリガー条件、共有しやすさなどに性能差があります。

▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼

アニメーション

特にアニメーションの表現力においてはStudio・XDが圧倒的に優れています。Studio, XDはアートボード間の差分から自然なアニメーションを補完する機能を備えており、手間をかければ大抵の表現は作れます。

特にStudioはオブジェクトひとつひとつの動きをタイムラインで編集可能で、かなり高精度なアニメーションを作成できます。いくつか、クオリティの高い作品のURLを紹介しておきます。

作品URL
- https://dribbble.com/shots/6109678-Travel-Destinations-App
- https://dribbble.com/shots/6267421-Pro-Multitasking-Finder-for-iPad-Concept
- https://twitter.com/toiletgranny/status/1109819503804862464

Figma, Sketchは用意された画面遷移アニメーションからしか表現できません。特にSketchは数が少ないです。Figma, Sketch にも差分アニメーションが超欲しいです...。

もっとも、StudioもXDも専用の動画作成ソフトに比べれば表現力は見劣りします。本当に高精度なアニメーションが必要な場合は After Effects や Origami Studio を使ったほうが良いでしょう。

インタラクション・トリガー

画面遷移するプロトタイピングを作る場合に、どこまでインタラクションの操作・トリガーを設定できるかの比較です。単純なトリガーの種類だけでいえばStudioが1番多いです。そもそもXD, Studioは、先述の差分アニメーションのおかげで、かなり自由にインタラクションを作ることができます。

アニメーションの項でもわかる通り、プロトタイピングにおいてSketchはゴミです...。Figmaはアニメーション表現ではStudio, XDに劣りますが、その他の取り回しや使いやすさはかなり優れています。XDでは音声操作、Studioはキーボード入力を唯一トリガーにできるのがおもしろいですね。

また、トリガーの他にも、モーダルや画面スクロールの設定など、ツールによって用意されているプロトタイピング用の機能は異なります。

画面遷移、スクロール固定などの簡単なインタラクションはすべてのツールで表現可能です。

上記のような複雑な操作になってくると、Sketchは単体では対応できません。

アニメーションの項でも触れましたが、StudioもXDも専用のプロトタイピングツールに比べればやはり自由度は下がります。より高度なプロトタイプが必要な場合では、Origami Studio や、 Xcode や CSS/JS でのプロトタイピングもよく行われています。

リアルタイム実機プレビュー

いずれのツールも、作成しているデザイン・プロトタイプを、スマートフォンでリアルタイムに確認可能です。Figmaが一番楽で、接続も安定して使えます。

Sketch: Sketch Mirrorアプリ(iOSのみ)を入れて、無線/有線でMacとペアリングする。Androidにも「Crystal」という非公式アプリで実機確認できる。

XD: XDアプリ(iOS/Android)を入れて有線でMacとペアリングする。無線は不可能。

Figma: Figmaアプリ(iOS/Android)を入れてログインしておくと、PCで選択中のアートボードがリアルタイムにプレビューされる。安定しているが、大規模なファイルになると遅くなる。

Studio: InVisionアプリ(iOS/Android)を入れて、無線(QRコード読み取り)でペアリングする。接続は不安定。

複数人でのデザイン運用

事業部にUIデザイナーが複数人いる場合、ひとつのデザインファイルを何人かが修正することも珍しくないと思います。そういった場合、Dropbox・Google Driveなどのクラウドストレージか、Gitなどのバージョン管理システムを使ってファイルを共有しているかと思います。XDならクラウドドキュメントでも共有できます。ただしこれらの運用は常に、ひとつのファイルを同時に複数人が編集したことによるコンフリクト（編集の衝突・競合）の危険性を孕んでいます。

Figmaは唯一、リアルタイムで複数人が同じファイルを編集できるので、この危険性がありません。議論しながらデザイン作業も行え、効率も非常に良いです。

https://www.figma.com/blog/multiplayer-editing-in-figma/

Sketchは有料ツールのAbstractを使用すればこの危険性をかなり軽減できます。

VCS/バージョン管理システム

上記、「複数人でのデザイン運用」にかなり関わる話です。過去のデザインを確認したり、間違った編集が行われた際に前の状態に戻すことができるので、VCSがあると安心です。

よく行われる運用として、修正ごとにファイルをコピーして量産する場合もあると思いますが、これは将来的に負の遺産になり、危険です。

特に複数人でファイルを運用している場合、VCSがあればコンフリクトによる事故も防ぐことができます。UIデザインツールの場合、以下のような選択肢が考えられます。

- ツール自体が持つVCS機能を使う
- Gitなどの既存のVCSを使う
- Abstractなど専用に作られたサービスを使う

それぞれ一長一短です。特にGitやAbstractは概念の理解が難しく、それなりの学習コストがかかります。FigmaなどツールそのものにVCSが組み込まれているものが簡単ですが、機能的にはGitやAbstractに大きく劣ります。

ハンドオフ

UIデザインにおいては、作成したデザインをエンジニアに共有することが多いです。昔はデザイン上に直接マージンのpx間隔やフォントの種類を書き込んだりしていましたが、現在は自動でデザインの状態を共有してくれるハンドオフツールがいろいろあります。

これらのツールはとても便利なのですが有料であり、連携させるのも少し面倒なので、FigmaやXDの用に単体でハンドオフ機能があるのが理想です。以下に、私が考える各ツールでのオススメの運用を紹介します。

ドキュメントとの連携

UIデザイナーはシステムの仕様や設計に関わることも多く、その場合はConfluenceやNotion、DropboxPaperなどにドキュメントを書きます。その際、UIのスクリーンショットやワイヤーをドキュメント内に貼り付けると思うのですが、これは後に地獄の運用を生みやすいです。デザインは日々アップデートされるものであり、その都度ドキュメント内のスクショを貼り直すのは相当につらいです。「Confluence↔Sketch↔Zeplin↔実装されたアプリ」のいずれかが古いデザインのままになりがちというのは、多くの会社が持っている悩みのひとつです。

この悩みを解決するアプローチが、ドキュメントへのEmbed(埋め込み)です。HTMLのiframe形式でドキュメントに埋め込むことで、元のデザインとドキュメントが自動で同期され、古い状態になるのを回避できます。アートボード単位のデザインカンプを埋め込むことも、動くプロトタイプを直接埋め込むこともできます。

Figma, XDはツール単体の機能ですぐに埋め込むことが可能で、非常に便利です。Sketch, StudioはInVnsionを経由することで可能ですが、けっきょく手動で同期させるステップが発生するので、あまり意味がありません。

▲▼▲▼▲▼▲▼▲▼▲▼▲▼▲▼

今回は以上です。次回は 6. まとめ です。更新したらTwitterでも報告します。よかったら続きもお読みいただけると嬉しいです。ありがとうございました。