Figmaのインタラクション設定についてもっと知る

インタラクション（Interaction）とは

インタラクションは inter（相互）とaction（作用）を合成して作られた言葉。 WebデザインやUI/UXデザインでは、ユーザーが行うアクション（操作や行動）に対して、サイトやアプリケーションなどが行う反応のことを指します。

例えば、ここまでで設定してきたページ遷移も、インタラクションの一つです。 ユーザー操作と反応を、以下のように考えると良いでしょう。

• ユーザー操作：リンクテキストをクリックする
• サイトの反応：別のページを表示する

ページ遷移以外にも、インタラクションは沢山あります。 前回のレッスンで「実際の動き」として挙げた、マウスを重ねた時に色を変えるなどもそうですね。

その他にも、クリック/タップで映像の再生/停止を切り替えたり、チェックを付け外ししたり。 撮影のためにボタンを押すと、シャッター音が鳴る…なんていうのもインタラクションです。

ユーザーの操作によって起こす変化・反応は、すべてインタラクションと言って間違いではないのです。

Figmaプロトタイプでインタラクションを設定しよう

Figmaのプロトタイプ機能では、ページ/画面遷移以外のインタラクションも設定できます。 （Webサイトやアプリケーションに設定したい“反応”すべてが設定できるわけではありません）

シンプルなアニメーションなどは、あっという間に設定できますよ。 Webデザインでもよく使う、いくつかの動きを実装してみましょう。

Figmaの『インタラクションの詳細』

ページ遷移を設定した、インタラクションをもう一度見てみましょう。 下図のようなモーダルウィンドウ、インタラクションの詳細（Interaction details）を開いて下さい。

インタラクションの詳細では、以下5つのな設定ができます。

• トリガー：変化を起こすきっかけ
• アクション：何をしたいか
• 表示するフレーム：どこに移動する・なにを表示するか
• アニメーション：アクション時のトランジション
• 状態管理：オブジェクトの状態をリセットするか否か

オーバーレイでモーダルを作る

アクションで移動ではなくオーバーレイを選択すると、今ある画面上の上に選択したフレームを表示できます。 モーダルウィンドウ、スマホ向け表示のメニューなどでよく見かける表示ですね。

簡単なフレームを作って実験してみましょう。 トップページのロゴから、コネクションの矢印を引っ張って、インタラクションの詳細を設定します。 せっかくなのでアニメーション（トランジション）も即時以外に変えます。

移動よりも必要な設定が多いので、インタラクションの詳細が伸びますね。 選択に合わせて必要な項目が表示されるので、出てきたものを設定していけば大丈夫です。

プレビュー表示を見てみましょう。 オレンジ色のフレームがオーバーレイで画面上部に、ディゾルプで徐々に表示されます。

上からシャッターのように降りてきてほしければ、ムーブインの上から下（↓）にします。

シンプルなトランジションであれば、簡単に設定できるのは良いですね。 アニメーションの速度を変えてみたりと、遊んでみて下さい。

ボタンコンポーネントにインタラクションを追加

トリガーをマウスオーバーに変えると「マウスを重ねた時」の表示、CSSでいう :hover の設定もできます。

Figmaのコンポーネント“バリアント”機能を知るで作ったボタンのコンポーネントをベースに、インタラクションを追加してみましょう。

step1. 変化前・変化後を作る

コンポーネントの学習では、バリアント機能を使って色とサイズを設定しました。 レッスンで作っていない、緑色の通常サイズ（下図4つめのボタン）も追加しています。

ここに、ボタンの状態を示すバリアントを追加します。

ボタンのコンポーネントグループを選択し、デザインタブからプロパティを追加。 バリアントを選択して、名前を状態（State）・値をデフォルト（default）など分かりやすいように設定してください。

マウスオーバー時のスタイル設定するために、それぞれのボタンを複製します。 複製したボタンは状態プロパティの値を「hover」に変えてください。

マウスオーバー時のスタイルを設定します。 今回は簡単に、ドロップシャドウだけ追加してみます。

以下のように、通常時とマウスオーバー時のデザインが並んだら準備完了です。

step2. インタラクションを設定

プロトタイプタブに切り替えて、インタラクションを設定します。

以下の流れで、インタラクションを追加して下さい。

1. 通常表示（default）のボタンを、すべて選択状態にする。
2. インタラクションのプラスアイコンで、インタラクションを追加
3. トリガーを「マウスオーバー」にする
4. アクションを「次に変更」にする
5. プロパティの中から、ホバー状態のデザインを選ぶ

下図のように、通常とhoverデザインが、コネクションの矢印で繋がっていたら成功です。

青線で囲ったアニメーションの設定は、スマートアニメートを選ぶと良いでしょう。

step3. プレビューの確認　

メインコンポーネントを変更したので、デザインに使っているインスタンスに反映されているか確認してみましょう。

トップページのファーストビューにある、ボタンのインスタンスを選択します。 デザインタブで見ると、プロパティ追加の反映が確認できます。

そして、プロトタイプタブ。 バリアントインタラクションとして、メインコンポーネントで設定したマウスオーバー時の設定が反映されています。

プレビューで動きを確認します。 マウスオーバーすると、徐々にドロップシャドウが表示されていれば成功です。

もちろん、ドロップシャドウだけではなく色を変えたりすることも出来ます。 変更先に設定するデザインの設定次第ですので、他のパターンも試してみましょう。

アイテムの位置を固定表示

プロトタイプタブでは、インタラクションに加え、スクロールの動作という項目もあります。

こちらは、名称通り、スクロールしたときの表示をどうするかを設定します。

例えば、ヘッダーを上部に固定したかったら、ここを固定もしくは追従に切り替えればOK。 今回のようにページを示す役割のフレーム（top_pc）直下に、上部固定したいヘッダーのフレームがある場合は、追従で良いですね。

固定と追従には、以下のような違いがあります。

• 固定：最初に指定された位置で、ずっと留まる
  （position: absolute; + 位置指定をしたような状態）
• 追従：オブジェクトの上端を、親フレームが表示されている限り、最上部に留める
  （position: sticky; + top: 0; を指定した状態）

Figma Learnでは、それぞれの違いを詳しく解説されています。 position: sticky でピンとこなかった方は、下記ページにある見本アニメーションをご確認いただくと、イメージがしやすいと思います。