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-long-press-behavior-prototypes_image02.png

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

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

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

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

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

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

    create-long-press-behavior-prototypes_image03.png

    create-long-press-behavior-prototypes_image04.png

    4. 操作後の動作

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

    create-long-press-behavior-prototypes_image05.png

    【長押し操作の詳細設定】 長押し中のインタラクションはプレビュー時、長押しすると動作し、離すと元の状態に戻ります。 例えば、「オーバーレイを開く」を設定する時には、対になる「オーバーレイを閉じる」を設定しなくても動作します。 長押し中の動作は主に、以下を使用します。

    オーバーレイを開く

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

    create-long-press-behavior-prototypes_image06.png

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

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

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

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

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

    と言います。

    create-long-press-behavior-prototypes_image07.png

    create-long-press-behavior-prototypes_image08.png

    create-long-press-behavior-prototypes_image09.png

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

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

    create-long-press-behavior-prototypes_image10.png

    create-long-press-behavior-prototypes_image11.png

    押下中のインタラクションは、長押しすると動作し、離すと元の状態に戻るので、対になる「オーバーレイを閉じる」は設定しなくても閉じます。

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

    create-long-press-behavior-prototypes_image12.jpg

    create-long-press-behavior-prototypes_image13.png

    create-long-press-behavior-prototypes_image14.jpg

    author icon

    Designpedia Team

    2024年2月29日(木) 公開