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-after-delay-behavior-prototypes_image01.png

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

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

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

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

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

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

    create-mouse-leave-behavior-prototypes_image03.png

    create-after-delay-behavior-prototypes_image03.png

    4. 操作後の動作

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

    create-mouse-leave-behavior-prototypes_image05.png

    【アフターディレイの詳細設定】 アフターディレイには、動作の発火までにかかる時間を設定する項目があります。 単位msは 1 / 1000 秒で、1秒なら「1000ms」と設定します。 一定時間経過後の動作は主に、以下を使用します。

    ① 次に移動 ② オーバーレイを開く

    create-after-delay-behavior-prototypes_image05.png

    ① 次に移動

    ページ遷移の時に使います。 一定時間経過したら動作するオブジェクトを選び、操作=アフターディレイ 操作後の動作=次に移動 を選択し、動作までの時間を入力します。

    create-after-delay-behavior-prototypes_image06.png

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

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

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

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

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

    と言います。

    create-after-delay-behavior-prototypes_image07.png

    create-after-delay-behavior-prototypes_image08.png

    create-after-delay-behavior-prototypes_image09.png

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

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

    create-after-delay-behavior-prototypes_image10.png

    create-after-delay-behavior-prototypes_image11.png

    上記のように繋いだら、遷移前のデザインをプレビューします。 プレビュー画面で 画像が切り替わることを確認することができます。

    create-after-delay-behavior-prototypes_image12.png

    create-after-delay-behavior-prototypes_image13.png

    create-after-delay-behavior-prototypes_image14.png

    ② オーバーレイを開く

    アラートの表示や、モーダルウィンドウを開く時に使います。 一定時間経過で動作するオブジェクトを選び、操作=アフターディレイ 操作後の動作=オーバーレイを開く を選択し、動作までの時間を入力します。

    create-after-delay-behavior-prototypes_image15.png

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

    create-after-delay-behavior-prototypes_image16.png

    create-after-delay-behavior-prototypes_image17.png

    create-after-delay-behavior-prototypes_image18.png

    author icon

    Designpedia Team

    2024年2月29日(木) 公開