Service logo

    ジョブボード

    有益なデザイン情報をメールでお届けします。

    お役立ちのデザイン情報のみをお送りします。メールは多くとも週に一回で、もちろんスパムメールはありません。

    ツール
    • Figma
    Figma
    • プラグイン
    • 機能
    インスピレーション
    • ポートフォリオ
    • デザイン記事
    • ジョブボード

    Designpedia © 2025 / Trademarks, names, terms and IPs are property of their respective owners unless otherwise stated

    Legal Information

    Figma プラグイン

    Figma 機能

    figma logo

    Figma クリック動作のプロトタイプを作る

    クリック動作のプロトタイプを作る

    1. Figma
    2. 機能
    3. プロトタイプパネル
    4. インタラクション
    eyecatch image

    概要

    ボタンなどのオブジェクトをクリックまたはタップしたときの動作を再現します。 作成した動作の確認はプレビューで行います。

    create-prototypes-of-click-behaviors_image01.png

    1. インタラクションの追加
    2. インタラクションの削除
    3. インタラクションの種類
    4. 操作後の動作

    create-prototypes-of-click-behaviors_image02.png

    1. インタラクションの追加

    操作（クリック）と、操作後の動きを追加します

    2. インタラクションの削除

    操作（クリック）と、操作後の動きを削除します

    3. インタラクションの種類

    操作時のインタラクションの種類を設定します。 クリックするとインタラクション詳細パネルが開きます。ドロップダウンで操作の種類を設定することができます。

    create-prototypes-of-click-behaviors_image03.png

    create-prototypes-of-click-behaviors_image04.png

    4. 操作後の動作

    操作後の動作を設定します。ドロップダウンで操作後の動作を設定することができます。

    create-prototypes-of-click-behaviors_image05.png

    【クリック操作の詳細設定】 クリック後の動作は主に、以下を使用します。

    ① 次に移動 ② 次に変更 ③ オーバーレイを開く ④ オーバーレイの入れ替え ⑤ オーバーレイを閉じる ⑥ 戻る ⑦ 次にスクロール ⑧ リンクを開く

    create-prototypes-of-click-behaviors_image06.png

    ① 次に移動

    ページ遷移の時に使います。 ボタンなどのクリックするオブジェクトを選び、操作＝クリック　操作後の動作＝次に移動　を選択します。

    create-prototypes-of-click-behaviors_image07.png

    移動先を指定します。 指定の方法は2通りあります。

    方法① ドラッグで矢印で繋ぐ 方法② プルダウンの選択肢から選ぶ

    方法① ドラッグで矢印で繋ぐ

    クリックするオブジェクトから、移動先のフレームに矢印を引っ張ります。 または移動先を選択する欄が追加表示されるので、その中から選択します。

    起点＝Hot Spot 遷移先＝Destination 両者をつなぐ線＝Connection

    と言います。

    create-prototypes-of-click-behaviors_image08.png

    create-prototypes-of-click-behaviors_image09.png

    create-prototypes-of-click-behaviors_image10.png

    方法② プルダウンの選択肢から選ぶ

    移動先を選択する欄が追加表示されるので、その中から選択します。

    create-prototypes-of-click-behaviors_image11.png

    create-prototypes-of-click-behaviors_image12.png

    上記のように繋いだら、遷移前のオブジェクト（ボタン）を選択しプレビューをします。 プレビュー画面で対象のオブジェクトをクリックすることで動作を確認することができます。

    create-prototypes-of-click-behaviors_image12-1.png

    create-prototypes-of-click-behaviors_image13.png

    ② 次に変更

    切り替えスイッチの再現などに使用します。 手順は「次に移動」と同様で 、操作後の動作＝次に変更 を選択し、変更後のデザインを指定します。 ※バリアント化した要素でないときは選択できません

    バリアントについてはこちらを参照してください。 関連記事：コンポーネントセット（バリアント）を作成する

    create-prototypes-of-click-behaviors_image14.png

    create-prototypes-of-click-behaviors_image15.png

    バリアントを複製してオブジェクトをフレームに入れ込みます。

    create-prototypes-of-click-behaviors_image16.png

    先ほどと同様に、プレビュー画面で対象のオブジェクトをクリックすることで動作を確認することができます。

    create-prototypes-of-click-behaviors_image17.png

    create-prototypes-of-click-behaviors_image18.png

    ③ オーバーレイを開く

    アラートの表示や、モーダルウィンドウを開く時に使います。 手順は「次に移動」と同様で 、操作後の動作＝オーバーレイ を開く を選択し、変更後のデザインを指定します。

    create-prototypes-of-click-behaviors_image19.png

    先ほどと同様に、プレビュー画面で対象のオブジェクトをクリックすることで動作を確認することができます。

    create-prototypes-of-click-behaviors_image20.png

    create-prototypes-of-click-behaviors_image21.png

    ④ オーバーレイの入れ替え

    開いているオーバーレイを別のオーバーレイに差し替えます。 手順は「次に移動」と同様で 、操作後の動作＝オーバーレイ の入れ替え　を選択し、変更後のデザインを指定します。

    create-prototypes-of-click-behaviors_image22.png

    先ほどと同様に、プレビュー画面で対象のオブジェクトをクリックすることで動作を確認することができます。

    create-prototypes-of-click-behaviors_image23.png

    create-prototypes-of-click-behaviors_image24.png

    ⑤ オーバーレイを閉じる

    アラートの表示や、モーダルウィンドウを閉じる時に使います。 閉じるオブジェクトを選び、操作＝クリック　操作後の動作＝オーバーレイを閉じる を選択します。

    create-prototypes-of-click-behaviors_image25.png

    先ほどと同様に、プレビュー画面でクリック対象のオブジェクトをクリックすることで動作を確認することができます。

    create-prototypes-of-click-behaviors_image26.png

    create-prototypes-of-click-behaviors_image27.png

    閉じる動作を指定したオブジェクトをクリックするとオーバーレイ指定したプロトタイプは終了します。

    create-prototypes-of-click-behaviors_image28.png

    ⑥ 戻る

    前のページに戻る時（戻るボタンなど）に使います。 クリックするオブジェクトを選び、操作＝クリック　操作後の動作＝戻る　を選択します。 「次に移動」でこのページに遷移する際にアニメーションなどを入れていた場合は、この「戻る」の設定だけでアニメーションの動きが反対になって適用されます。

    create-prototypes-of-click-behaviors_image29.png

    先ほどと同様に、プレビュー画面で対象のオブジェクトをクリックすることで動作を確認することができます。

    create-prototypes-of-click-behaviors_image30.png

    create-prototypes-of-click-behaviors_image31.png

    create-prototypes-of-click-behaviors_image32.jpg

    ⑦ 次にスクロール

    ページ内リンクでスクロールする時に使います。 クリックするオブジェクトを選び、操作＝クリック　操作後の動作＝次にスクロール　を選択します。 「次にスクロール」を選択すると、右にスクロール先を選択する欄が表示されるので、スクロール先のレイヤー名を選択します。

    create-prototypes-of-click-behaviors_image33.png

    先ほどと同様に、プレビュー画面でクリック対象のオブジェクトをクリックすることで動作を確認することができます。

    create-prototypes-of-click-behaviors_image34.png

    create-prototypes-of-click-behaviors_image35.png

    create-prototypes-of-click-behaviors_image36.png

    ⑧ リンクを開く

    外部リンクを開く時に使います。 クリックするオブジェクトを選び、操作＝クリック　操作後の動作＝リンクを開く　を選択します。 「リンクを開く」を選択すると、右にリンク先URLを入力する欄が表示されるので、URLを入力します。

    create-prototypes-of-click-behaviors_image37.png

    create-prototypes-of-click-behaviors_image38.png

    スクロール時に固定する

    create-prototypes-of-click-behaviors_image38-1.png

    「スクロール位置を保持する」にチェックを入れると、デザインのプレビューでスクロールしてもオブジェクトの位置が動かなくなります。

    create-prototypes-of-click-behaviors_image39.jpg

    create-prototypes-of-click-behaviors_image40.png

    create-prototypes-of-click-behaviors_image41.png

    author icon

    Designpedia Team

    2024年1月17日(水) 公開