複数のアクションおよび条件付きアクション – Figma Learn - ヘルプセンター

🚧 バリアブルは現在、オープンベータ版です。この期間中、さらに機能を追加し、エクスペリエンスに磨きをかけていきます。次に何が登場するかはこちら →

はじめに

この機能を使用できるユーザー

すべての有料プランで利用可能。

ファイルへの編集可のアクセス権があれば、誰でもプロトタイプを作成できます。

ファイルへの閲覧のみまたはプロトタイプの閲覧のみのアクセス権があれば、誰でもプロトタイプを表示できます。

プロトタイプが深くなりすぎたり複雑になりすぎたときは、複数のアクションおよび条件付きアクションを使用して、同じインタラクション内で複数の結果または異なる結果を処理できます。

複数のアクション: 同じトリガーでアクションを無制限にスタック
条件付きアクション: if/else条件付きステートメントを使用して、アクションを実行する前に条件が満たされているかどうかを確認

バリアブルの詳細はこちら:

もっと多くのハンズオン練習を受けたいですか?

高度なプロトタイプ作成のプレイグラウンドファイル →を確認

複数のアクション

すべてのプロトタイプインタラクションには、トリガーと1つ以上のアクションがあります。トリガーはインタラクション開始のきっかけであり、アクションは応答です。

複数のアクションを使用すると、1つのトリガーでアクションを無制限に追加できます。

プロトタイプインタラクションを作成します。
[インタラクション詳細]パネルの[アクション]ドロップダウンメニューで、任意のアクションを選択します。
別のアクションを追加するには、 [アクションを追加]をクリックします。

An prototype Interaction Details modal. There are two actions listed, and the mouse is hovering over the plus icon at the top of the modal.

ヒント: アクション名の左側にあるV字型の模様をクリックして、各アクションの詳細を折りたたんだり、展開したりします。

アクションを並べ替え

アクションはリスト順に(上から下に)実行されます。

アクションを並べ替えるには:

[インタラクションの詳細]パネルを開きます。
アクションの詳細を折りたたむには、アクション名の左側にあるV字型の模様をクリックします。
順序を変更するには、アクションをクリックしてドラッグします。

An interaction details modal with two actions. The user clicks to collapse the details of the second action, then clicks and drags it to the top of the modal so it becomes the first listed action.

ヒント : 任意のアクションを条件付きアクションにドラッグ&ドロップできます。

アクションの順序を変更すると、プロトタイプの結果が変わることがあります。

たとえば、2つのサンプルプロトタイプアクションが、次のようにリストされているとします。numberVarの開始値は1とします。

1. バリアブルnumberVarを2に設定
2. 条件付きロジック: numberVar == 2の場合(If)、フレーム2に移動

最初のアクションで、数値バリアブルの値が2に設定されます。この場合、条件付きステートメント(numberVar == 2)がtrueに評価されるため、アクション(フレーム2に移動)が実行されます。

今度は、次のようにアクションの順序を替えます。

1. 条件付きアクション: numberVar == 2の場合(If)、フレーム2に移動
2. numberVarを2に設定

最初のアクションで、条件ステートメント(numberVar == 2)がfalseに評価されるため、アクションは実行されず、プロトタイプが現在のフレームに留まります。次に、numberVarが2に変更されます。

アニメーションの順序

プロトタイプアニメーションは、ページ間のトランジションを作成して、[次に移動]、[次にスクロール]、[オーバーレイを開く]などのアクションの動作を定義するために使用します。

トリガーに複数のアニメーションがある場合は、それらのアニメーションが連続して実行されます。

An interaction with two actions. The first action navigates to frame 2 and has a slide in animation, the second action opens an overlay with a move in animation.

The prototype from the previous image plays. First, it navigates to the next frame with a slide in animation. Then, an overlay opens on the second frame with a move in animation.

条件付きアクション

プロトタイプ作成では、条件付きアクションはアクションをトリガーする必要があるかどうかを定義する規則です。条件付きアクションは、if/elseロジックで指定します。

たとえば、チェックアウトフローを作成するとします。カート合計がある金額より高い場合(If)はユーザーに無料配送が適用され、そうでない場合(else)はユーザーに正規の配送価格が表示されます。

Figmaでは、条件付きプロトタイプアクションを使用して、条件付きロジックのあるプロトタイプを作成できます。

プロトタイプインタラクションを作成します。
[インタラクション詳細]パネルのドロップダウンメニューで任意のトリガーを選択します。
[アクション]ドロップダウンメニューで[条件付きアクション]を選択します。
[If]条件には、次のように入力します。

[If]フィールドに、満足しなければならない条件を示すブール式を指定します。
ドロップダウンメニューで、1つ(または複数)のアクションを選択します。このアクションは[If]ステートメントが満足されるとトリガーされます。

[Else]条件には、次のように入力します。

ドロップダウンメニューで、1つ(または複数)のアクションを選択します。このアクションは、[If]ステートメントが満足されなかった場合にトリガーされます。[Else]アクションは空白のままでもかまいません。

A checkout cart design with a prototype interaction on the checkout button. The conditional states: if cartTotal > 30, set freeShipping to true. Else, set freeShipping to false.

サポートされている操作および形式で指定された条件付きアクションのみが機能します。無効な条件付きステートメントは赤色でアウトラインされます。

条件ステートメントを評価

条件付きステートメントはブール式と同一です。つまり、ステートメントが、trueまたはfalse値を持つように評価されます。ステートメントの値がtrueの場合、ifアクションがトリガーされます。ステートメントの値がfalseの場合、elseアクションがトリガーされます。

ブール式の書式設定および評価方法の詳細はこちら →

試してみよう

例: クリックカウンターを作成

複数のアクションと条件付きアクションを使用する練習しましょう。オブジェクトを5回クリックすると、成功メッセージが表示されるという簡単な動作をするプロトタイプを作成します。

次のような2つのローカルバリアブルを追加します。

clickCountという名前の数値バリアブル(開始値0)
clickCompleteという名前のブーリアンバリアブル(開始値false)

長方形オブジェクトをフレームに追加します。

長方形オブジェクトにクリック時/タップ時トリガーのあるプロトタイプインタラクションを追加します。2つのアクションを次の順序で追加します。

バリアブルの設定: clickCountをclickCount + 1に設定
条件付きアクション: clickCount == 5の場合(If)、バリアブルclickCompleteをtrueに設定

次のような2つのテキストレイヤーをフレームに追加します。

最初のテキストレイヤーは、シンプルな指示(「正方形を5回押してください。」)をリストするようにします。
2番目のテキストレイヤーは、成功メッセージ(「やったね!」)にします。

バリアブルclickCompleteを2番目のテキストレイヤーのレイヤー表示に適用します。

テキストレイヤーを選択します。
右サイドバーの[レイヤー]セクションに進み、表示・非表示アイコンを右クリックします。
バリアブル選択パネルのバリアブルclickCompleteをクリックします。バリアブルclickCompleteの値がtrueの場合にのみレイヤーが表示されるようになります。

プロトタイプを再生して、インタラクションをテストします。