【 プロトタイプ 】FigmaとUXPin – できること、できないこと

Figmaでつくるプロトタイプは最終製品がどのように見えるかを視覚化し、デザインについての説明や、ユーザーフローを計画するには最適ですが、プロトタイプテストには不向きかもしれません。そこでUXPinの出番です。デザイナーはUXPinを使うことで、質の高いテスト結果をもたらすインタラクティブなプロトタイプを作成することができます。本記事ではこれら２つのツールについて詳しくみてみましょう。

主なポイント：

• Figmaはベクターベースのデザイン環境でリアルタイムでの連携を提供し、UXPinはコードベースのアプローチで高度なインタラクティブなプロトタイプを提供する。
• UXPinで提供するMergeなどの高機能により、複雑なインターフェースをFigmaよりも大幅に速く構築できる。
• プロトタイピングにおいて２つを比較した結果、UXPinでのプロトタイプは、Figmaで作成したときよりも８倍速く、よりインタラクティブであることがわかった。
• Figmaは、静的なモックアップ、低忠実度プロトタイプ、共同デザインの作成に優れているが、インタラクティブなプロトタイプ機能が欠けている。

UXPinが提供するMergeテクノロジーによって、デザインチームでもコードベースのプロトタイプの作成を可能します。これによって、デザインから開発への移行を効率化し、コストと時間を大幅に節約することができます。

デザインと開発のギャップを解消させ、UXPinのMergeテクノロジーで高忠実でインタラクティブ性のあるプロトタイプを作成してみませんか？詳しくはこちらのページをご覧ください。

Figmaとは

Figmaは、リアルタイムの連携を実現するベクターベースのデザインツールです。ワイヤーフレーム、モックアップ、プロトタイプ、情報アーキテクチャまで、様々なデザインアセットを作成することができます。

２０１６年にブラウザベースのベクターグラフィックス編集ツールとして誕生し、当時デザインツールの市場を独占していたAdobe製品に代わる人気ツールとなりました。多くのUX/UIデザイナーはFigmaのその使いやすさに惚れ込み、UIデザイン業務においてもFigmaが使われ始めました。

Figmaのプロトタイプは、他のチームにデザインについて説明するのに最適です。また、クリエイティブなプロトタイプ、デザインの探求、パワフルなドローイングを作成するのに優れています。一方、Figmaのプロトタイプでは開発環境の制約沿った高度なインタラクティブ性が欠けていますが、そこはUXPinでかなえることができます。

UXPinとは

UXPinは、部門横断的な連携向けのコードベースのフルスタックデザインツールです。インタラクティブ性のあるプロトタイピング機能はUXPinを使う上で最大の魅力であり、デザイナーは、最終製品のようなビジュアルと完全な機能性を持つプロトタイプを作成することができます。ライブラリやフォームを使うことで、ワイヤーフレーム、モックアップ、ユーザーフローマップ、情報アーキテクチャの作成も簡単に行うことができます。

UXPinのプロトタイプは、デザイナーがプロトタイプにインタラクションを追加して動きを加えることができます。テスト中でもユーザーの入力情報の保存や、ライブデータも使うことができるため、まさに “実物” のような操作性があります。

これらによって、デザイナーは次のようなことが可能となります：

• 堅牢でインタラクティブ性のあるプロトタイプの構築
• ユーザーやステークホルダーから高品質で有意義なフィードバックの獲得
• デザインハンドオフの効率化

FigmaとUXPin – プロトタイピングでの違い

Figmaは、コラボレーション機能とコンポーネントベースのアプローチによって、プロトタイプのための信頼性の高いソリューションを提供します。一方、UXPinではさらに高度なインタラクション機能と、Mergeテクノロジーによるデザインから開発へのシームレスなハンドオフを実現します。

UXPinとFigmaのプロトタイピング機能を簡単に比較してみましょう。

Figma:

• 基本的なインタラクションとトランジション： Figmaでは、デザイナーはクリック可能な基本的なトランジションを追加し、モックアップをより魅力的なものにすることができる。
• コンポーネントの作成とデザインシステム： デザイナーは、共有・再利用可能なコンポーネントを作成し、UIの一貫性を保つことができる。
• 協働デザイン機能： 複数のデザイナーが同時に同じデザインに取り組むことができ、それによってデザインプロセスが効率化され、集団での創造性が促進される。

UXPin:

• 高度でインタラクティブなプロトタイプ： 洗練されたプロトタイピング機能でステート、インタラクション、変数、式などの機能により、実物に近いプロトタイプを作成できる。
• Mergeの「Code-to-Design」手法： デザイナーは Reactコンポーネントをインポートして、最終製品と区別できないほどの「リアルな」プロトタイプを作成できる。また、Mergeはデザインと開発のギャップを埋め、シームレスな製品開発フローを提供する。
• リアルタイムの連携とユーザーフィードバック： UXPinのコメント機能は、チームメンバーやステークホルダーとの部門横断的な連携を促進する。また、ユーザーからのフィードバックをプロトタイプに直接取り込み、実際のユーザーのインサイトやステークホルダーからのフィードバックに基づいて、繰り返しデザインを改良できる。

FigmaとUXPinの比較 – 実際の使用例

シニアUXデザイナーのAnthony Hand氏は、UXPinとFigmaのプロトタイピング機能についての比較記事をMediumに書きました。チームは、関連するブランドカラーとサードパーティのアイコンを含む、カスタムのMicrosoft FluentのWebライブラリを作成しました。

彼はFigmaのFluent UIキットを使い、React UIライブラリのGitHubレポジトリをMergeを使ってUXPinにインポートしました。Reactコンポーネントには、レポジトリで定義されたスタイリングとインタラクティブなプロパティ、必要なコントロールとAPIを含みます。

対するFigma UIキットではFluent Design Systemの静的バージョンであり、デザイナーは関連の変数とインタラクションの設定が必要です。UXPinのReactコンポーネントと比べると、忠実度も機能もかなり劣ります。

実験

Anthony氏は、UXPinとFigmaのプロトタイピングの効率性を比較するために、両方のプラットフォームで同じ単一ページのプロトタイプを作成しました。Figmaではページのデザインで１時間かかったところが、UXPinではわずか８分で作成できました。

「UXPinのプロトタイプには、ライブドロップダウン、カレンダーボタン、ソート可能なデータテーブル、そしてインタラクティブな Highchartsの円グラフまでありました。」 – シニアUXデザイナー, Anthony Hand

Anthony氏がUXPinで作成したプロトタイプは、高品質で、エラーが少なく、Microsoft Fluentのライブコントロールを使用したインタラクティブな要素を備えていました。一方、Figmaのプロトタイプは８倍以上の時間を掛けてつくったにも関わらず、そのようなインタラクティブ性がなく、リアルタイムのインタラクションを減らすラスタライズされた画像に頼っていました。

Anthony Hand氏の見解

Figmaは、馴染みのあるグラフィックデザインのプラットフォームをWeb ベースで進化させたものであり、旧来のツールよりも進歩していますが、まだ限界があります。UXPinでは、コードベースのデザインアプローチで 「インタラクティブなプロトタイプ 」に重点を置いているため、デザイナーはライブコード要素を使ったデザインを作成でき、インタラクティブ性とリアル感がでます。さらに、UXPinでは、最小限の学習要件で単一のページに複雑なインタラクションを実装することができる機能があります。

「Figmaはもちろんすごくいいツールですが、UXPinの便利なスクリプティング機能を活用し、エンジニアが完成品で使用するのと同じライブHTML UIコントロールを使ったインタラクティブなUIをデザインできる方法を学んだ今、Figmaに戻れなくなりました。」シニアUXデザイナー, Anthony Hand

Figmaはプロトタイプ向きか

Figmaは素晴らしいUIデザインツールですが、最終製品のイメージをするためのインタラクティブなプロトタイプを作成するためには必要な機能が欠けています。ここでは、デザインプロセスにおいてFigmaを上手く使うための用途とその理由をいくつか見てみましょう：

• 静的なUIモックアップ： Figmaの直感的なUIと機能で、モックアップのデザインが難なくできる。
• 低忠実度（Lo-Fi）プロトタイプ： Figma は、画面間の基本的な遷移のみが必要なため、低忠実度のワイヤーフレームのプロトタイプに最適。
• 情報アーキテクチャ： デザイナーは、単一のアートボード上に画面を整理して、製品のアーキテクチャとユーザーフローのマッピングや視覚化をできる。
• 協働デザイン： Figmaでリアルタイムの連携がしやすくなり、それによってチームはコメント投稿やデザイン批評の実行、バージョン履歴へのアクセスができる。

Figmaでのプロトタイプの限界

以下を見ると、UXPinを検討したくなるかもしれません：

• インタラクティブ性のあるプロトタイピング： Figmaは、シンプルなクリック/タップのインタラクションを提供するものであり、ユーザーデータの取得や、ドロップダウンメニュー、カルーセル、アコーディオン、日付ピッカーなどの複雑なコンポーネントの作成は、Figmaではできない。
• ライブデータとAPI： UXPinと違い、Figmaでは ライブデータの読み込みができず、そのような複雑な統合には、エンジニアリングの入力が必要。そうなると、時間とリソースが増大してしまい、ほとんどのプロジェクトでは実現不可能になる。
• コードからデザインへ： Figmaはデザインからコードへの手法で動作する。つまり、デベロッパーはデザインをコードに変換する必要があり、時間のかかる複雑な作業である。Mergeがあれば、UXPinのコードからデザインへのワークフローによって、デザイナーはデベロッパーが使うのと同じ構成要素を使ってコードベースのプロトタイプを構築でき、製品開発ワークフローがシームレスになることで開発時間が大幅に短縮される。

UXPinでのプロトタイプ作成がいい理由

本記事に共通するテーマは「インタラクティブ性」であり、デザイナーは、現代のデジタル製品をインタラクティブなプロトタイプを使ってアイデアをテストすることを求められます。なぜでしょうか？

• 開発には時間とコストがかかる。デザインプロセスで問題を解決することで、組織は膨大な時間とリソースを節約し、それによって無駄な支出が減る。
• UXは、製品の採用、エンゲージメント、リテンションにとって極めて重要。インタラクティブなプロトタイプにより、デザイナーはデザインプロセスでユーザビリティの問題を解決し、製品の UXを向上させることができる。

デザイナーはプロトタイプやユーザーテストにおいてイメージベースのツールを使うと、デザインプロセスでのユーザビリティの問題やビジネスチャンスを見逃してしまいます。これによって、製品が提供するUXとバックログに変更を加えなければならず、負債や、回避できるはずのコスト増加に繋がってしまいます。

インタラクティブなプロトタイプがUXの負債を減らすには

Merge は、より良いテストとスムーズなデザインオフにより、無駄で回避可能なユーザー体験と技術的負債を減らすことができます。デザインチームは、プロトタイプ構築のためにデザインシステムのレポジトリからインタラクティブコンポーネントをインポートし、Figmaのようなイメージベースのツールではつくることができない 最終製品の正確なレプリカを作成することができます。

また、ユーザーとステークホルダーは、Mergeのプロトタイプを最終製品と同じように操作することができ、デザインチームは反復と改善のための正確で有意義なインサイトを得ることができます。

さらに、デザイナーとエンジニアがまったく同じコンポーネントを使うため、デザインハンドオフに必要なドキュメントや説明が少なくて済みます。デベロッパーは、同じレポジトリから同じUIライブラリをインポートし、UXPinからJSXの変更を適用して、最終製品を納品できます。

「UXPin Mergeによって、当社のエンジニアリング時間は約５０%短縮されました。数十人のデザイナーと数百人のエンジニアを抱える企業レベルの組織全体で、これがどれだけのコスト削減になるか想像してみてください。」  – UXリードデザイナー, Larry Page

より速い プロトタイプとイテレーション

Mergeは、ノーコード、ドラッグ＆ドロップのプロトタイピング環境をデザイナーのために効果的に作成します。Anthony氏のケーススタディからわかるように、Mergeに切り替えることで、同じUIライブラリを使って、Figmaよりも 8 倍速くUXPinでプロトタイプを作成することができました。

UXPinのプロパティパネルを使って、コンポーネントやプロトタイプの変更は早く効率的になります。それでも、デザイナーは単一の UI 要素に対して複数のバリエーションやステートを作成し、それを UXPinのパターンに保存することで効率を上げることができます。そしてデザイナーは、プロパティパネルで調整する代わりにコンポーネントを入れ替えるだけで、テスト中に即座にフィードバックを得ることができます。

「UXPinを使って、忠実度の高いプロトタイプを作成することができ、とても助かっています。忠実度の高いプロトタイプをより速く作成し、セッション後にすぐにフィードバックを得ることができます。修正箇所があれば、次のユーザビリティテスト参加者にはその変更を適用させ、今までよりもずっと早くフィードバックを獲得することができます。」プロダクト、UX、DesignOpsソートリーダー,  Erica Rider

UXPinのMergeテクノロジーを使ったインタラクティブコンポーネントで、プロトタイプレベルアップしませんか。詳細およびアクセスリクエスト方法については、こちらのページをぜひご覧ください。