プロトタイプのバリアブルモード

はじめに

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

すべての有料プランで、プロトタイプでバリアブルを使用できます。使用するプランによって、1つのコレクションで利用可能なバリアブルモードの数が異なります。

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

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

コレクションにある各バリアブルは、複数のモードを使用することができます。プロトタイプ作成のアクションと式で、特定のモードの値を選択したり使用したりできます。

バリアブルモードを使用して、プロトタイプ作成のエクスペリエンスを強化するには、次の複数の方法があります:

• コンテキストに基づいてモードの値を設定: デザインで同じバリアブルの複数モードの値を使用し、同じインタラクションでその値を個別に変更します
• 式でモードの値を使用: 特定のモード定義の値を使用し、インタラクションを構築して計算を実行します

コンテキストに基づいてモードの値を設定

バリアブルに複数のモード定義がある場合は、[バリアブルを設定]アクションとモードコンテキストを使用し、特定のモード定義の値を変更します。

これは、バリアブルの1つのモード定義だけを変更する際に役立ちます。1つのデザインで同じバリアブルの複数モードを表示したり使用したりする場合に、互いに独立した値を調整します。

たとえば、以下のデザインをご覧ください。

各生産アイテムにはカウンターがあり、カートに追加したアイテムの数を調整します。

単一のモードのみが含まれる数のバリアブルが、アイテム数、一意のバリアブル、およびインタラクションを示すために使用されている場合、各製品リスト作成に必要になります。

代わりに、2つのモードを含む数のバリアブル(それぞれに一意な生産アイテムの1つ)を使用できます。

複数のモードを使用することで、各アイテム数を個別に更新できます。

1. 親レイヤーまたはオブジェクトで、モードを設定します。
1. 適用済みのバリアブルを含むレイヤー、グループ、またはオブジェクトを選択します。(たとえば、メロンのプロダクト画像と情報を含むフレームを選択します。)
2. 右サイドバーの[レイヤー]セクションで、[バリアブルモードを変更]をクリックします。
3. 1つのバリアブルコレクションにマウスカーソルを合わせ、モードを選択します。(「メロン」モードを選択します。)
4. 特定のモードを適用する他のオブジェクトやレイヤーについて手順を繰り返します。(しいたけのプロダクト画像と情報を含むフレームに「しいたけ」モードを適用します。)
2. [バリアブルを設定]プロトタイプアクションで、適用したバリアブルの値を変更します。(たとえば、各プロダクトカウンターの + アイコンに[バリアブルを設定]インタラクションを作成します。itemCountバリアブルをitemCount + 1に設定します。)

設定モードがあるレイヤー内に含まれているすべてのバリアブルは、特定のモード定義の値を更新するだけです。

式でモードの値を使用

プロトタイプアクションのモード定義を選択する

プロトタイプで特定のバリアブルモードを選択するには:

1. プロトタイプコネクションを作成するか、既存のプロトタイプコネクションをクリックし、インタラクションの詳細モーダルを開きます。
2. インタラクションで使用していたバリアブル名をクリックします。
3. [モード]ドロップダウンメニューから、そのバリアブルの特定モードを選択します。

モードを選択すると、バリアブルにバリアブル名とモード名の両方が示されます:

variableName:modeName

モードの値で式を構築

バリアブルモードを含む式を使用し、単一のバリアブル全体の値を計算します。

これは、1つのバリアブルの複数モードの定義を使用する式を書く際に役立ちます。

たとえば、上記の同じデザインで考えてみましょう。今回、各生産アイテムのアイテム小計と全体の合計を計算するフィールドがあり、注文全体の合計金額を計算します。

それでは、バリアブルコレクションを見てみましょう:

式を使用する際に、各バリアブルモードに個別の値が必要になる場合があります。たとえば、各生産タイプのitemSubtotalを計算するには、モードのitemPriceをそのitemCountで乗じる式を使用します。

それ以外には、異なるモードの合計を示すバリアブル値が1つ必要になります。たとえば、注文合計を計算するためには、1つのモードのみを含むcartTotalバリアブルの新しいバリアブルコレクションを作成します。