プロトタイプのコネクション

はじめに

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

すべてのプランで利用可能です。

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

プロトタイプとは、ユーザーによるインタラクションが可能なデザインです。

Figmaでは、すべてのプロトタイプは1つのインタラクションから始まります。どのインタラクションも、トリガー(インタラクションを開始する要因)とアクション(トリガーの結果)の2つの部分で構成されます。

一部のインタラクションは1つのオブジェクトに対して行われます。例えば、オブジェクトをクリックして外部URLを開く、またはビデオをクリックして再生・停止する場合が該当します。

その他のインタラクションは2つのオブジェクトまたはフレーム間で行われます。例えば、ボタンをクリックして次のフレームに移動する、またはアイコンをクリックしてオーバーレイを開くなどです。これらのインタラクションはコネクションと見なされます。コネクションは次の3つの部分で構成されます。

1. ホットスポット: ホットスポットはインタラクションが行われる場所です。フレーム自体でもフレーム内のオブジェクトでもかまいません。ボタン、アイコン、見出しなど、何にでもホットスポットを作成できます。
2. コネクション: コネクションは、ホットスポットと移動先をつなぐ矢印(通称「ヌードル」)です。コネクションで、インタラクションのトリガーやアクションの定義、アニメーション設定の調整を行います。
3. 移動先: 移動先はコネクションの終点です。ほとんどの場合、移動先は最上位フレームでなければなりません。同じ最上位フレーム内で移動先に設定できるのは、次にスクロールアクションを使用するコネクションだけです。

インタラクションを追加

インタラクションは、ホットスポット、すなわち始点を選択して作成します。

1. 右のサイドバーの[プロトタイプ]タブに進みます。
2. インタラクションのホットスポットとなるレイヤーまたはオブジェクトを選択します。
3. 次のいずれかの操作を行って、インタラクションを作成します。
   • オブジェクトにマウスカーソルを合わせて、プラスアイコンを移動先フレームにドラッグする。
   • [プロトタイプ]パネルの[インタラクション]セクションで[追加]をクリックする。
4. インタラクションが作成されたら、[インタラクションの詳細]パネルでインタラクションのトリガー、アクション、移動先を設定します。

インタラクションの一括作成

複数のオブジェクトから同時にインタラクションを作成できます。こうすると、同じ移動先に複数のコネクションを作成する場合に時間を短縮できます。

1. 開始オブジェクト、すなわちインタラクションを開始するホットスポットを選択します。次のいずれかの方法で、複数のオブジェクトを選択できます。
   • 最初のオブジェクトを選択し、Shiftを押しながら追加するオブジェクトを順次クリックする
   • 選択するすべてのオブジェクトをカーソルでドラッグする
2. 次のいずれかの操作を行って、インタラクションを作成します。
   • 選択したオブジェクトの1つにマウスカーソルを合わせ、プラスアイコンをクリックして移動先フレームまでドラッグする
   • [プロトタイプ]パネルの[インタラクション]セクションにあるプラスアイコンをクリックし、インタラクションの詳細パネルでトリガー、アクション、アニメーションの詳細を設定する

インタラクションの詳細

インタラクションを作成したら、[インタラクションの詳細]モーダルで次の設定を行います。

1. トリガー: マウスクリックまたはタッチジェスチャーなど、どのようなタイプのインタラクションでプロトタイプを前に進めるのかを定義します。
2. アクション: 他のフレームへの移動やオーバーレイのエンゲージなど、ユーザーがホットスポットとやり取りするときに発生するイベントのタイプを定義します。
3. 移動先: インタラクションの終点を定義します。プロトタイプの別の画面や現在の画面に表示されるオーバーレイの場合もあります。すべてのインタラクションに移動先があるとは限りません。例えば、[戻る]トリガーは自動的に前のフレームへ戻ります。
4. アニメーション設定：フレームからフレームへのプロトタイプの移動の仕方を定義します。
5. 状態管理: クリックすると、フレーム内およびフレーム間を移動する際にオブジェクトのプロパティと状態がリセットされます。
6. アクションを追加: 同じトリガーに別のアクションを追加します。
7. [インタラクションの詳細]モーダルを閉じます。

1つのオブジェクトに、それぞれ独自のトリガーを持つ複数のインタラクションを作成できます。例えば、動画の塗りのオブジェクトに、クリックすると動画を再生するインタラクションと、動画が終了するとオーバーレイを開くインタラクションを作成できます。

1つのオブジェクトに作成できるトリガーは以下のとおりです。

• 次のトリガーはいくつでも作成できます。
  • キー/ゲームパッド
  • ドラッグ時
  • 動画到達時
• 次のトリガーは1つずつ作成できます。
  • クリック時/タップ時
  • マウスオーバー
  • 押下中
  • マウスエンター
  • マウスリーブ
  • マウスダウン/タッチプレス
  • マウスアップ/タッチリリース
  • アフターディレイ
  • 動画終了時

アニメーションの調整

アニメーション設定は、プロトタイプのフレームからフレームへの移動の仕方を定義します。

1. アニメーション: アニメーションとは、プッシュ、スライド、ディゾルブなど、フレームから次のフレームへのプロトタイプのトランジション方法です。
2. 方向: 特定のアニメーションタイプ(ムーブインまたはプッシュなど)では、トランジションがムーブインする方向を設定し、制御できます。上下左右のいずれかを選択できます。
3. マッチングレイヤーをアニメーション化: このボックスにチェックを入れると、スマートアニメートトランジションがすべてのマッチングレイヤーに適用されます。
4. アニメーションのイージングとスプリング: イージングで、開始フレームから移動先までのアクセレーションが決まります。
5. 所要時間: トランジションの終了までにかかる時間をミリ秒単位で制御します。1 msから10000ms (10秒)の間で選択します。
6. アニメーションのプレビュー。

インタラクションの選択と編集

次のツールを使用すると、プロトタイプ編集作業が向上し、スピードアップします。

一致するインタラクションの選択

一致するインタラクションとは、他のフレームの一致するオブジェクトから開始される同一のインタラクションです。

• 同一のインタラクションとは、アクションと移動先が同じインストラクションです。
• 一致するオブジェクトとは、異なるフレームにある、一致する階層レベルの同一の名前のオブジェクトです。

一致するインタラクションの選択は、次のように行います。

1. インタラクションを選択します。
2. [インタラクションの詳細]モーダルで、[一致するインタラクションを選択]をクリックします。

[インタラクションの詳細]を編集し、選択したすべてのインタラクションを同時に更新します。

コネクションの移動先の一括更新

複数のコネクションがある場合に、コネクションの移動先を同時に変更できます。

1. 編集するコネクションを選択します。次の手順で複数のコネクションを選択します。
   • 最初のコネクションを選択し、Shiftを押しながら追加するコネクションをクリックします。
   • 選択するすべてのコネクションにカーソルをドラッグします。選択したコネクションの周囲に青いボックスが表示されます。
2. コネクションをそのまま新しい移動先のフレームまでドラッグします。右のサイドバーでインタラクションを選択し、[インタラクションの詳細]パネルで移動先のフレームを変更することもできます。

インタラクションの詳細のコピーとペースト

インタラクションの詳細をコピーして他のオブジェクトにペーストすると、プロトタイピングをすばやく行うことができます。

1. キャンバス上のプロトタイプインタラクションを選択します。
2. インタラクションの詳細を、⌘ Command / Control + Cを押してコピー、または⌘ Command / Control + Xを押して切り取ります。
3. キャンバス上の別のオブジェクトを選択します。
4. ⌘ Command / Control + Vを押して、新しいオブジェクトにインタラクションの詳細を貼り付けます。