インタラクションの作成

はじめに

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

すべてのチームまたはプランのユーザーがプロトタイプを作成できます。

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

プロトタイプはインタラクティブデザインです。

すべてのプロトタイプは1つのインタラクションから始まります。各インタラクションに、トリガー(インタラクションを開始する)とアクション(トリガーの結果)があります。

次のように、1つのオブジェクトで行われるインタラクションもあります。

• 外部のURLを開くためのオブジェクトのクリック
• 再生または一時停止のための動画のクリック

その他のインタラクションは、2つのオブジェクトまたはフレーム間で行われます。次のようなこうしたインタラクションは、コネクションとみなされます。

• 次のフレームへ移動するためのボタンのクリック
• オーバーレイを開くためのオブジェクトのクリック

プロトタイプコネクションは、次の3つのパーツで構成されます。

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

インタラクションの作成

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

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

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

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

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

インタラクションの詳細

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

1. トリガー: マウスクリックまたはタッチジェスチャーなど、どのようなタイプのインタラクションでプロトタイプを前に進めるのかを定義します。
   Figmaプロトタイプ作成トリガーについての詳細はこちら →
2. アクション: 他のフレームへの移動やオーバーレイのエンゲージなど、ユーザーがホットスポットとやり取りするときに発生するイベントのタイプを定義します。
   Figmaプロトタイプ作成アクションについての詳細はこちら →
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を押して、新しいオブジェクトにインタラクションの詳細を貼り付けます。