プロトタイプを作成するFigmaではプロトタイピング機能を使用することで、リンクや画面遷移をつけたプロトタイプを作ることができます。このレッスンではプロトタイプを作成する方法を解説していきます。プロトタイププロトタイプは、制作したUIを実際に近い形でデザインを確認することができるものです。実装前に問題点の洗い出しや、さまざまな概念をテストしたりと、作業の後戻りを防ぐことができます。このレッスンでは、プロトタイピングの設定や使い方について説明していきます。2.画面をプロトタイプモードに切り替えるプロトタイプを作るには、プロパティパネル上部の図2赤枠の「Prototype」を押しプロパティモードを変更します。Settings」の3つの項目があります。Triggerクリック・タップ・ホバー、または別のマウス/タッチ操作など、どんなアクションをきっかけにページが切り替わるか選択できます。Action使用することで、アクションを行ったときの、次のフレームを選択することができます。Settingsシミュレーションのデバイスや、背景色など、プロトタイプをどのように表示するかの設定を行うことができます。プロパティ3.リンク先を選択するリンク先は、フレーム内の(子)オブジェクトから接続するこができます。これにより、プロトタイプ内のそのオブジェクトに接続線が作成されます。リンク先を選択するには、図4のように接続するオブジェクトを選択し、選択オブジェクトにある青丸をドラッグし、リンク先のフレームへドロップします。接続また、プロパティパネル「Aciton」セクションからも次の遷移先を選択することができます。遷移先の選択4.トリガーを設定する(タップ・ホバーなど)画面遷移のきっかけのアクションを「Trigger」で設定することができます。通常のクリック(タップ)だけではなく、PCのWebサイトであるようなホバーや、タップを押したとき・離したときなど、様々な種類が用意されています。遷移先の選択Ontapこれは最も一般的に使用されるトリガーであり、オブジェクトがクリックまたはタップされた後にのみアクションが実行されます。Hoverringこのトリガーは、カーソルが触れているときにのみ、実行され、カーソルを外すともとに戻ります。HoverringはOntapに自動的に変換されます。Triggerは、マウスまたはトラックパッドでクリックしているときにのみ実行されます。クリックを離すと、元のフレームが再び表示されます。Enterマウスがボタン領域に入ったときと、Enterキーを押したときに画面が遷移します。ホバリングと似ていますが、こちらは、マウスを戻しても元のフレーム戻ることはありません。Leaveこのトリガーは、ユーザーのマウスが領域から出たときに次の画面を遷移します。Destinationフレームをトリガーします。フレムーがトリガーされます。5.アクションを設定するアクションは、トリガーを介して、プロトタイプをどこでどのように進行させるかを決定できます。アクションセクションのプルダウンメニューには、画面先を選択する以外にも、以下の4つのアクションがあります。Noneアクションが必要ない場合に使用します。Back前の画面に戻ることができます。これは、プロトタイプの戻るボタンのシミュレーションに適しています。Overlay元のフレームの上に表示されたオーバーレイを閉じたり閉じたりできます。これは、画面上のプロンプトや警告が消えるのを複製するのに最適です。OpenURLプロトタイプの外部のURLにユーザーを誘導できます。選択したら、次のフィールドにURLを入力できます。フレーム画面遷移先を選択すると、いくつかの追加設定が使用可能となります。これがどのタイプのアクションになるかを図8から選択する事ができます。左から順に説明していきます。Navigation2つのフレーム間の単純な遷移です。ナビゲートオプションと同様に動作します。Overlay現在のフレームの上にフレームが表示されます。これは、デザイン内のボタンまたは他のオブジェクトから、モーダルやアラートを表示する際に役立ちます。オーバーレイオプションは全部で8つあります。アクション設定6.トランジションを選択するトランジションとは画面と画面が切り替わるときに起こるアニメーションのことです。スライドインしたり、ふわっと切り替わったりと様々な効果を選ぶことができます。これにより、実際の設定でデザインがどのように表示され、どのように反応するかをシミュレートできます。選択を行うには、プロトタイププロパティから「Transtion」セクションのプルダウンメニューから選択することができます。アクションが行われてたときにフレームをすぐに表示します。InstantDissolveDissolveトランジションは、次のフレームへフェードインします。inトランジションは、フレームの上に次のフレームの上に表示します。inの逆の動きをします。OutPushプッシュトランジションは、次のフレームへスライドされます。次のフレームへ移動します。フレームは、2つの動作間で異なる方法で処理されます。inと逆の動きをします。outフレームの移行動作に加えて、次の設定もプロトタイププロパティから調整できます。Direvtion次のフレームが入る方向を選択できます。Bottomから選択できます。Duration移行が完了するまでにかかる時間を決定します。Easing開始時、終了時、または開始時と終了時の両方で遷移の一部を遅くすることができます。positonにチェックを入れると、2つのフレーム間を移動するときに同じスクロール位置を維持できます。