Figmaのプロトタイプ機能の基本｜作成したデザインに実際に画面遷移を設定する

今回は作ったデザインを元にして、画面遷移やマイクロインタラクションを再現できるプロトタイプ機能についてまとめておきます。

プロトタイプ機能

Adobe XDやSketchにもある機能で、最近のデザインツールにはあって当然の機能です。
作ったデザインを元に画面遷移やマイクロインタラクションを再現できます。

デザインデータをそれだけ見せられてもお客さんが実感が沸かなかったり、デザインの判断をするときに実際にスマホに表示してタップしながら遷移していった方が分かりやすいです。

それらを実現できるのがプロトタイプ機能です。

プロトタイプ機能への切り替え

右上にある「Prototype」というタブを押すとプロトタイプモードに切り替わります。

普段はデザインモードにしてデザインを作りつつ、できたらプロトタイプモードに切り替えて設定していきます。

画面遷移の矢印を引く

まずはどのフレームからどのフレームに遷移するのか、矢印を引きます。

方法はプロトタイプモードで起点となるフレームをクリックして「＋」ボタンから遷移先のフレームにドラッグするだけです（サイドバーの［Interactions］から追加して1つ1つ設定することも可能）。

ちなみに、この起点のことを「HotSpot」といい、遷移先を「Destination」でその2つを繋ぐ線を「Connection」といいます。

画面遷移の設定

プロトタイプの基本は「トリガー（何をしたら）」と「アクション（どうなるか）」そして「アニメーション（どのような動きで）」の3つを設定することです。

Trigger（なにをしたら）

まずはトリガーを指定します。
クリックやホバー、ドラッグなどの実際にユーザーが行うアクションがひと通り用意されているのと、指定時間経過したら自動で発火するようなトリガーも用意されています。

Action（どうなるか）

次にアクションを指定します。

Animation（どのような動きで）

最後はアニメーションです。
動きをよりイメージさせるためにも便利な設定ですが、妥協や仮で「まあとりあえずこれを設定しておくか」と設定して進めてしまうと、かえって混乱をまねいてしまうので注意が必要です。

プレビュー

実際のプレビューはFigma右上の再生アイコンをクリックすると、別タブでプレビューが表示されます。

実際に設定した「画面遷移ボタン」をクリックすると、画面が切り替わって画面遷移の確認ができます。