FD4B: プロトタイプのコネクションを追加する

プロジェクトカードボタンをケーススタディページに接続する

コネクションを追加する前に、ポートフォリオのデザインを確認して、各インタラクションの感触を計画しましょう。どの要素に対して操作できることを期待し、それがどんな動作をするのかを考えます。例えば、プロジェクトカードのボタンをユーザーがクリックした場合、ケーススタディページに移動するようにしたいです。まずはそのコネクションを追加しましょう。

右側のサイドバーにあるプロトタイプタブに切り替えます。ここから、プロトタイピング機能とプロパティにアクセスできます。ボタンを選択すると、キャンバス上に新しいオプションが表示されます。その端にある青い円です。それにカーソルを合わせると、青いプラスに変わり、新しいコネクションを追加できます。

ボタンへのコネクションを追加するには:

1. ボタンを選択します。
2. ボタンレイヤーの端の青い円の上にマウスを移動すると、青いプラスアイコンが表示されます。
3. 青い円からケーススタディフレームに向かってクリックしてドラッグします。
4. Figmaは、十分近づくとコネクションヌードルをケーススタディフレームにスナップさせます。
5. カーソルを放してコネクションを完了します。

フローとインタラクションメニュー

Figmaはホームページフレームに青い小さなラベルを追加し、それをフロー1と名付けました。ラベルはプロトタイプフローが始まる最上位フレームに付けられています。

インタラクションメニューも表示されました。ここで、トリガーやアニメーションなど、コネクションのプロパティを調整できます。

一部のプロパティはすでにFigmaに設定されています。トリガーはクリック時に設定され、アクションは次に移動に設定され、宛先はケーススタディフレームです。これは、ユーザーがプロジェクトカードのボタンをクリックすると、ケーススタディページに移動されることを意味します。

不要になったコネクションを作成した場合は、選択してDeleteキーを押すことで削除できます。または、接続をキャンバス上の空いているスペースにドラッグして離すことでも削除できます。

ナビゲーションバーのボタンに接続する

右サイドバーからもインタラクションを追加できます。それを使ってナビゲーションバー内のお問い合わせボタンを接続しましょう。

1. ナビゲーションバーのボタンを選択します。
2. インタラクションセクションでプラスをクリックします。
3. トリガーをクリック時に設定したままにします。
4. アクションをリンクを開くに設定します。これにより、ウェブブラウザがURLを開きます。
5. 任意のURLを入力します。たとえば、Figmaのヘルプセンターにリンクするhelp.figma.comや、mailto: の後にスペースなしでメールアドレスを入力したmailto:name@test.comなどです。これを使用すると、ユーザーのメールアプリが開き、宛先フィールドにそのアドレスが自動で入力されます。

プロトタイプコネクションをコピー&ペースト

このお問い合わせボタンは実際には両方のページに存在しており、ボタンの両方のインスタンスが同じ動作を持つようにしたいです。

時間を節約するために、コネクションをメインコンポーネントにコピーします。

1. 作成したコネクションを選択して、ショートカットを使用してコピーします:
   • Mac: Command C
   • Windows: Control C
2. コンポーネントページに移動して、ナビゲーションコンポーネントを見つけます。
3. ナビゲーションバー内のボタンを選択して、コネクションを貼り付けます:
   
   • Mac: Command V
   • Windows: Control V

メインコンポーネントにインタラクションを追加したので、新しいページがポートフォリオに追加されても、再度追加する必要はありません。

プロトタイプを再生することについて

コネクションをいくつか追加したので、プロトタイプビューアでプロトタイプをプレビューしてテストできます。

フローを再生または表示するには、プロトタイプタブを開き、フローの開始点の隣にあるプレビューアイコンをクリックします。何も選択していない場合、ページの右側のサイドバーで全てのフローを見つけることもできます。

各フローで、いくつかの異なるアクションができます:

• フレームを選択してキャンバスで開始フレームを選択します。これにより、サイドバーのインタラクションセクションで詳細を表示することもできます。
• リンクをコピーしてクリップボードにリンクをコピーします。
• プレビューを選択して、インラインプレビューでフローを開きます。このオプションを選択します。

インラインビューア

プレビューを選択すると、Figmaはプロトタイプを インラインプレビューと呼ばれるフローティングウィンドウで開きます。このウィンドウビューは、作業中にプロトタイプをチェックするのに役立ちます。キャンバス上のデザインが変更されると、Figmaはプレビューを自動的に更新します。

ウィンドウの上部で、次のことができます:

• 左右の矢印を使ってプロトタイプを前後に移動します。
• キャンバス上で最後に選択されたフレームからプロトタイプを再開します。Rを押して再開することもできます。
• プロトタイプのさまざまなスケーリングオプションを選択するには、オーバーフローメニューを開きます。
• プロトタイプを新しいタブでプレゼンテーションビューで開きます。
• インラインプレビューを閉じるにはXをクリックします。
• プレビューウィンドウの端をクリックしてドラッグすることで、プレビューのサイズを変更できます。⇧ Shiftを押しながら操作すると、比率を保ったまま拡大・縮小できます。

プロトタイプを再生する方法を詳しく学ぶ。

プレゼンテーションビュー

プレゼンテーションビューは、実際のサイトのようにプロトタイプを表示するために、自分のデバイス画面またはモニターを使用するより没入感のある体験です。右サイドバーで発表をクリックしてプレゼンテーションビューにアクセスすることもできます。

代わりにスマートフォンやタブレットのようなデバイスフレームで表示したい場合は、何も選択していない状態で右側のサイドバーからデバイスフレームを選択します。プロトタイプデバイスや自分のデバイスでプロトタイプをプレビューする方法について詳しく学ぶ。

また、プロトタイプの画面表示方法を変更したい場合は、Zキーを押して異なる表示オプションを切り替えることができます。画面全体に表示は、使用しているデバイスと解像度が異なる場合に便利です。拡大縮小オプションについて詳しく学ぶ。

プロトタイプをプレビューして、インタラクションをテストする

Figmaのプロトタイプビューアでプロトタイプをプレビューする方法を学んだので、これまでに作成したコネクションをテストしましょう:

1. プレビューをクリックして、インラインビューアでプロトタイプを開きます。
2. トラックパッドやマウスホイールでプロジェクトカードにスクロールします。
3. インタラクションを追加したボタンをクリックします。プロトタイプはケーススタディページに移動し、私たちが設定した通りに進みます。
4. ヘッダーのお問い合わせボタンをクリックしてmailto: リンクを開きます。
5. 警告ページが表示された場合、ボックスにチェックを入れます。外部リンクを初めて開くとき、Figmaは別のウェブサイトに移動しようとしていることを警告します。より没入感のある体験にするために、今後の通知を無効にすることができます。

プロトタイプのコネクションは私たちが設定した通りに動作しています。完璧ですね!次のレッスンでは、ページをスクロールしたときにレイヤーを固定して残す方法など、さまざまなスクロール動作を変更する方法を学びます。

知識を確認しましょう