複数のアクションおよび条件付きアクション
🚧 バリアブルは現在、オープンベータ版です。この期間中、さらに機能を追加し、エクスペリエンスに磨きをかけていきます。次に何が登場するかはこちら →
はじめに
この機能を使用できるユーザー
すべての有料プランで利用可能。
ファイルへの編集可
のアクセス権があれば、誰でもプロトタイプを作成できます。
ファイルへの閲覧のみ
またはプロトタイプの閲覧のみ
のアクセス権があれば、誰でもプロトタイプを表示できます。
プロトタイプが深くなりすぎたり複雑になりすぎたときは、複数のアクションおよび条件付きアクションを使用して、同じインタラクション内で複数の結果または異なる結果を処理できます。
- 複数のアクション: 同じトリガーでアクションを無制限にスタック
- 条件付きアクション: 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アクションがトリガーされます。
試してみよう
例: クリックカウンターを作成
複数のアクションと条件付きアクションを使用する練習しましょう。オブジェクトを5回クリックすると、成功メッセージが表示されるという簡単な動作をするプロトタイプを作成します。
- 次のような2つのローカルバリアブルを追加します。
-
clickCount
という名前の数値バリアブル(開始値0
) -
clickComplete
という名前のブーリアンバリアブル(開始値false
)
-
バリアブルの設定:
clickCount
をclickCount + 1
に設定 -
条件付きアクション:
clickCount == 5
の場合(If)、バリアブルclickComplete
をtrue
に設定
- 最初のテキストレイヤーは、シンプルな指示(「正方形を5回押してください。」)をリストするようにします。
- 2番目のテキストレイヤーは、成功メッセージ(「やったね!」)にします。
clickComplete
を2番目のテキストレイヤーのレイヤー表示に適用します。- テキストレイヤーを選択します。
- 右サイドバーの[レイヤー]セクションに進み、表示・非表示アイコンを右クリックします。
- バリアブル選択パネルのバリアブル
clickComplete
をクリックします。バリアブルclickComplete
の値がtrueの場合にのみレイヤーが表示されるようになります。