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-drag-behaviors_image02.png

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

    再現したい操作と、操作後の動きを追加

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

    再現したい操作と、操作後の動きを削除

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

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

    create-prototypes-of-drag-behaviors_image03.png

    create-prototypes-of-drag-behaviors_image04.png

    4. 操作後の動作

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

    create-prototypes-of-click-behaviors_image05.png

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

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

    create-prototypes-of-drag-behaviors_image06.png

    ① 次に移動

    ページ遷移の時に使います。 ドラッグするオブジェクトを選び、操作＝ドラッグ　操作後の動作＝次に移動　を選択します。

    create-prototypes-of-drag-behaviors_image07.png

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

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

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

    ドラッグするオブジェクトから、移動先のフレームに矢印を引っ張ります。

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

    と言います。

    create-prototypes-of-drag-behaviors_image08.png

    create-prototypes-of-drag-behaviors_image09.png

    create-prototypes-of-drag-behaviors_image10.png

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

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

    create-prototypes-of-drag-behaviors_image11.png

    create-prototypes-of-drag-behaviors_image12.png

    上記のように繋いだら、遷移前のデザインをプレビューします。 プレビュー画面で対象のオブジェクトをドラッグすることで動作を確認することができます。

    create-prototypes-of-drag-behaviors_image13.png

    今回は、左から右へドラックすると切り替わるようにアニメーションをつけました。 他の方向もできるので試してみてください。

    create-prototypes-of-drag-behaviors_image14.png

    create-prototypes-of-drag-behaviors_image15.png

    ② オーバーレイを開く

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

    create-prototypes-of-drag-behaviors_image16.png

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

    create-prototypes-of-drag-behaviors_image17.png

    create-prototypes-of-drag-behaviors_image18.png

    create-prototypes-of-drag-behaviors_image19.png

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

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

    create-prototypes-of-drag-behaviors_image20.png

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

    create-prototypes-of-drag-behaviors_image21.png

    create-prototypes-of-drag-behaviors_image22.png

    create-prototypes-of-drag-behaviors_image23.png

    ④ オーバーレイを閉じる

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

    create-prototypes-of-drag-behaviors_image24.png

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

    create-prototypes-of-drag-behaviors_image25.png

    create-prototypes-of-drag-behaviors_image26.png

    create-prototypes-of-drag-behaviors_image27.png

    ⑤ 戻る

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

    create-prototypes-of-drag-behaviors_image28.png

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

    create-prototypes-of-drag-behaviors_image29.png

    create-prototypes-of-drag-behaviors_image30.png

    create-prototypes-of-drag-behaviors_image31.jpg

    ⑥ 次にスクロール　⑦ リンクを開く

    「次にスクロール（ページ内スクロール）」「リンクを開く（別URLへの遷移）」については、ドラッグ操作で実行することがないため、選択すると自動的に操作がホバー（エンター）からクリックに切り替わります。クリック操作におけるこれらのプロトタイプ作成については以下をご参照ください。

    関連記事：クリック動作のプロトタイプを作る

    author icon

    Designpedia Team

    2024年2月29日(木) 公開