Figmaのプロトタイピングのガイド

はじめに

この機能を使用できるユーザー

すべてのチームまたはプランでサポートされます。

編集可のアクセス権があれば、だれでもプロトタイプを作成できます。

閲覧のみのアクセス権があれば、だれでもプレゼンテーションビューでプロトタイプを再生できます。

Figmaのプロトタイピング機能では、ユーザーの操作や行動を検証するためのインタラクティブなフローを作成できます。

プロトタイプは、次の用途に最適です:

• インタラクションとユーザーフローのプレビュー
• アイデアの共有と検証
• コラボレーターからフィードバックをもらう
• ユーザーによるインタラクションのテスト
• 関係者へのデザインのプレゼンテーション

以下のプロトタイピングのビデオをご覧ください。または、YouTubeでプロトタイプとコラボレーションのプレイリストをご確認ください。

フローと開始点

Figmaのプロトタイピングでは、1つのページにプロトタイプの複数のフローを作成し、あなたのデザインを使ってユーザーの行動と体験を最初から最後までプレビューできます。

フローは、1ページ内の複数のフレームとコネクションのネットワークです。プロトタイプによって、アプリやWebサイト全体の操作の流れを設計できます。また、特定のセグメントのフローに焦点を当てることも可能です。例: プロトタイプで、eコマースサイトのあらゆるインタラクションを網羅します。アカウントの作成、カートへの商品の追加、商品の購入などのフローを設定します。

2つのフレームの間に最初のコネクションを追加すると、フローの開始点が作成されます。プロトタイプにフローの開始点を追加するには、他にもいくつかの方法があります:

• 開始フレームを選択して、右サイドバーにある[フローの開始点]セクションのをクリックします。
• フレームを右クリックして、[開始点の追加]をクリックします。
• 既存の開始点を使用してフレームを複製する

デザインのテスト時には、プロトタイプをすべて共有するか、フローの開始点へのリンクをコピーすることができます。

開始点とフローの詳細はこちら→

コネクションの作成

1. コネクションのホットスポットを選択します。
2. をクリックして、コネクションを作成します。
3. それを移動先にドラッグします。
4. 既存のコネクションがない場合は、最初のフレームが開始点になります。

インタラクションとアニメーションの作成

1. 右サイドバーにある[プロトタイプ]タブを開きます
2. インタラクションを追加します
3. インタラクションの詳細を設定します
4. アニメーションを適用します
5. アニメーションをプレビューします

プロトタイプ設定の調整

1. [デバイス]と[モデル]を選択する
2. プロトタイプの[プレビュー]を表示する
3. [背景色]を選択する
4. プロトタイプの開始フレームを設定します

プロトタイピングについて

始める

• プロトタイプのインタラクションとアニメーションの作成
• プロトタイプの開始点の選択
• プロトタイプデバイスのカスタマイズ
• プロトタイプのアクション、トリガー、アニメーション

高度なインタラクション

• プロトタイプでオーバーレイを作成する
• スマートアニメートを使った高度なアニメーションの作成
• オーバーフロー挙動を使ったスクロールインタラクションのプロトタイプ
• プロトタイプに動画を追加
• プロトタイプへのアニメーションGIFの追加
• プロトタイプでバリアブルを使用する
• プロトタイプで式を使用する
• 複数のアクションおよび条件付きアクション
• プロトタイプのバリアブルモード

共有とコラボレート

• プロトタイプのコネクションの表示
• プロトタイプのプレゼンテーションビューオプションの設定
• プロトタイプの共有
• モバイルデバイスでのプロトタイプの表示
• コメントでプロトタイプのフィードバックを送る

用語

• ホットスポットは、インタラクションが発生する場所です。リンク、ボタン、画像、アイコンなど、元のフレーム内の任意のオブジェクトです。
• コネクションは、ホットスポットを移動先に接続する青い矢印(通称"ヌードル")です。コネクションを使用してインタラクションとアニメーションの設定を適用します。
• フローは、プロトタイプの流れを構成する接続されたフレームのネットワークです。フローごとに独自の開始点があります。プロトタイプには、複数のフローを設定できます。
• 開始点はフローの最初のフレームです。プレゼンテーションビューでプロトタイプの複数のフローを表示するには、複数の開始点を設定します。
• トリガーでは、プロトタイプを進めるためのホットスポットとのインタラクションの種類を指定します。タップ、ドラッグ、クリック、ホバーなど、マウスやタッチによるインタラクションです。
• 移動先は、トランジションの終点です。これは最上位フレーム(直接キャンバスに追加されたフレーム)であり、フレーム内のオブジェクトではありません。AからBに移動する場合は、Aがホットスポットであり、Bが移動先です。
• アクションは、プロトタイプでの処理の種類を定義します。たとえば、他のフレームへの移動や、外部のURLを開くなどです。
• アニメーション設定では、プロトタイプがフレーム間をどのように移動するかを決定します。アニメーションの種類、速度、方向を制御できます。
• トランジションはアニメーションの種類です。アクションによって、どのように移動先に到達するかを定義します。
• 方向はトランジションが発生する方向を制御します。上下左右から選択します。
• 所要時間はアニメーションが終了するまでの時間を制御します。短いほどトランジションが速くなります。1～10000ミリ秒(10秒)の範囲で選択します。
• イージングは、アニメーションの加速度—動き始めが速いか遅いかを指定します。イージングを使用すると、より自然なアニメーションを作ることができます。
• オーバーレイは、現在の画面やフレームの上に表示されるフレームです。オーバーレイを使用して、ツールチップ、インタラクティブメニュー、警告、確認を作成できます。
• オーバーフロー挙動では、プロトタイプがどのようにスクロールに反応するかを定義します。カルーセル、ギャラリー、インタラクティブマップなどの高度なユーザーインタラクションを作成できます。
• プロトタイプをどのデバイスに表示するかを選択します。デバイスとモデルの両方を設定します。
• 背景色では、プロトタイプの背景の色を設定できます。
• 向きは、プロトタイプに縦と横のフレームが含まれている場合に選択できます。向きはプロトタイプ全体に設定されます。プロトタイプ内で縦と横のビューを切り替えることはできません。
• プレビューには、プロトタイプ内の要素の見え方や動き方が表示されます。プレビューは、アニメーションとプロトタイプのデバイス設定の両方に表示されます。