複数のアクションおよび条件付きアクション
はじめに
この機能を使用できるユーザー
すべての有料プランで利用できます。
ファイルへの編集可のアクセス権があれば、誰でもプロトタイプを作成できます。
ファイルへの閲覧のみまたはプロトタイプの閲覧のみのアクセス権があれば、誰でもプロトタイプを表示できます。
プロトタイプが深くなりすぎたり複雑になりすぎたときは、複数のアクションおよび条件付きアクションを使用して、同じインタラクション内で複数の結果または異なる結果を処理できます。
- 複数のアクション: 同じトリガーでアクションを無制限にスタック
- 条件付きアクション: if/else条件付きステートメントを使用して、アクションを実行する前に条件が満たされているかどうかを確認
複数のアクション
すべてのプロトタイプインタラクションには、トリガーと1つ以上のアクションがあります。トリガーはインタラクション開始のきっかけであり、アクションは応答です。
複数のアクションを使用すると、1つのトリガーでアクションを無制限に追加できます。
- プロトタイプインタラクションを作成します。
- [インタラクション詳細]パネルの[アクション]ドロップダウンメニューで、任意のアクションを選択します。
- 別のアクションを追加するには、 [アクションを追加]をクリックします。
ヒント: アクション名の左側にあるV字型の模様をクリックして、各アクションの詳細を折りたたんだり、展開したりします。
アクションを並べ替え
アクションはリスト順に(上から下に)実行されます。
アクションを並べ替えるには:
- [インタラクションの詳細]パネルを開きます。
- アクションの詳細を折りたたむには、アクション名の左側にあるV字型の模様をクリックします。
- 順序を変更するには、アクションをクリックしてドラッグします。
ヒント : 任意のアクションを条件付きアクションにドラッグ&ドロップできます。
アクションの順序を変更すると、プロトタイプの結果が変わることがあります。
たとえば、2つのサンプルプロトタイプアクションが、次のようにリストされているとします。numberVarの開始値は1とします。
最初のアクションで、数値バリアブルの値が2に設定されます。この場合、条件付きステートメント(numberVar == 2)がtrueに評価されるため、アクション(フレーム2に移動)が実行されます。
今度は、次のようにアクションの順序を替えます。
最初のアクションで、条件ステートメント(numberVar == 2)がfalseに評価されるため、アクションは実行されず、プロトタイプが現在のフレームに留まります。次に、numberVarが2に変更されます。
アニメーションの順序
プロトタイプアニメーションは、ページ間のトランジションを作成して、[次に移動]、[次にスクロール]、[オーバーレイを開く]などのアクションの動作を定義するために使用します。
トリガーに複数のアニメーションがある場合は、それらのアニメーションが連続して実行されます。
条件付きアクション
プロトタイプ作成では、条件付きアクションはアクションをトリガーする必要があるかどうかを定義する規則です。条件付きアクションは、if/elseロジックで指定します。
たとえば、チェックアウトフローを作成するとします。カート合計がある金額より高い場合(If)はユーザーに無料配送が適用され、そうでない場合(else)はユーザーに正規の配送価格が表示されます。
Figmaでは、条件付きプロトタイプアクションを使用して、条件付きロジックのあるプロトタイプを作成できます。
- プロトタイプインタラクションを作成します。
- [インタラクション詳細]パネルのドロップダウンメニューで任意のトリガーを選択します。
- [アクション]ドロップダウンメニューで[条件付きアクション]を選択します。
- [If]条件には、次のように入力します。
- [If]フィールドに、満足しなければならない条件を示すブール式を指定します。
- ドロップダウンメニューで、1つ(または複数)のアクションを選択します。このアクションは[If]ステートメントが満足されるとトリガーされます。
- [Else]条件には、次のように入力します。
- ドロップダウンメニューで、1つ(または複数)のアクションを選択します。このアクションは、[If]ステートメントが満足されなかった場合にトリガーされます。[Else]アクションは空白のままでもかまいません。
サポートされている操作および形式で指定された条件付きアクションのみが機能します。無効な条件付きステートメントは赤色でアウトラインされます。
条件ステートメントを評価
条件付きステートメントはブール式と同一です。つまり、ステートメントが、trueまたはfalse値を持つように評価されます。ステートメントの値がtrueの場合、ifアクションがトリガーされます。ステートメントの値がfalseの場合、elseアクションがトリガーされます。