プロトタイプでバリアブルを使用する

「シェイプ」というタイトルのバリアブルのコレクションを作成しましょう。このコレクションには、シェイプの名前を表す1つの文字列バリアブルを含めます。

1. キャンバス上のすべてのアイテムを選択解除し、右サイドバーの[ローカルバリアブル]セクションの[バリアブルを開く]をクリックします。
2. [バリアブルを作成]をクリックし、[文字列]を選択します。
3. [名前]列に「shapeName」と入力します。
4. [値]列に「円」と入力します。

この段階でバリアブルshapeNameをデザインに適用できます。この例のために、2つのシェイプ(円と正方形)と2つのテキストレイヤーが配置されたフレームを含むシンプルなデザインが用意されています。ここで、バリアブルshapeNameを下のテキストレイヤーにバインドして、選択されたシェイプに基づいて値が変化するようにします。

1. 以下に示すように、デザインを作成し直します。楕円オブジェクト、長方形オブジェクト、および2つのテキストレイヤーをフレームに追加します。最初のテキストレイヤーのコンテンツとして、「You picked:」と入力します。
2. フレーム上の下のテキストレイヤーをクリックして選択します。
3. 右サイドバーの[デザイン]タブで、[テキスト]セクションの[バリアブルを適用]をクリックします。
4. バリアブル選択パネルからバリアブルshapeNameを選択し、テキストコンテンツに適用します。

次に、[バリアブルを設定]アクションを使用してインタラクションを追加しましょう。

1. 楕円オブジェクトを選択します。
2. 右サイドバーで、[プロトタイプ]タブに切り替えます。新しいインタラクションを追加するために、[インタラクション]セクションのプラス記号をクリックします。
3. [インタラクション]モーダルで、[タップ]/[クリック]トリガーと[バリアブルを設定]アクションを含むインタラクションを作成します。
4. [ターゲット]ドロップダウンメニューからバリアブルshapeNameを選択します。[値]フィールドで、新しい値を「circle」に設定します。
5. 長方形オブジェクトについて手順1～4を繰り返します。今回は、バリアブルshapeNameを「square」に設定します。

これで、プロトタイプを再生してテストする準備が整いました。各シェイプオブジェクトをクリックすると、テキストレイヤーが新しいバリアブル値に基づいて自動的に更新されます。

1. インタラクティブなコンポーネントセットを作成
   1. 「true」と「false」の値を持つバリアントプロパティ「クリック」を使用するボタンコンポーネントを作成します。
   2. 「false」バリアントで、クリック時トリガーと次に変更アクションを使用してプロトタイプのインタラクションを追加します。「false」バリアントがクリックされると、「true」バリアントに切り替わります。
2. インタラクティブコンポーネントセットのバリアントのインスタンスをフレームに配置します。
   1. フレームに「false」バリアントを追加します。
3. バリアブルをインタラクティブコンポーネントインスタンスに割り当てます。バリアブルの値はバリアントプロパティ値と一致している必要があります。
   1. デフォルトで「false」の値を持つブール型のcircleVisibilityバリアブルを作成します。
   2. ボタンのインスタンスを選択します。
   3. 右側のサイドバーから、クリックしたバリアントのプロパティにマウスカーソルを合わせます。
   4. [バリアブルを適用]を選択します。
   5. クリックしてcircleVisibilityバリアブルを選択し、プロパティにバインドします。
4. 同じバリアブルをデザイン内の別のレイヤーに割り当てます。
   1. 楕円オブジェクトをフレームに追加します。
   2. 右サイドバーの[外観]セクションから、[非表示]アイコンを右クリックします。
   3. circleVisibilityバリアブルを選択して、楕円レイヤーの表示にブールバリアブルを適用します。
5. プロトタイプを再生してインタラクションをテストします。インタラクションがトリガーされ、コンポーネントが変更されると、バリアブルの値も変更されます。これは、他の値にバインドされた同じバリアブルがある場合はそれらも更新されることを意味します。

1. 少なくとも2つのバリアントを使って、コンポーネントセットを作成します。
   1. 「円」と「四角」の値がある「シェイプ」のバリアントプロパティを持つコンポーネントセットを作成します。
2. バリアントのインスタンスをフレームに配置します。
3. インスタンスにバリアブルを割り当てます。バリアブルの値はバリアントプロパティ値と一致している必要があります。
   1. デフォルトで「円」の値に設定されたshapeTypeバリアブルを作成します。
   2. インスタンスをクリックして選択します。
   3. 右サイドバーで、バリアントプロパティの右側にマウスカーソルを合わせ、[バリアブルの割り当て]をクリックします。
   4. プロパティにバインドするバリアブルを選択します。
4. フレーム内の任意のオブジェクトに対し、[バリアブルを設定]アクションを使用するインタラクションを作成します。バリアブルの値を、未使用のバリアントプロパティの値と一致するように変更します。未使用のバリアントプロパティの値に合わせてバリアブルの値を変更します。
   1. オブジェクトにプロトタイプインタラクションを追加します。クリック/タップ時のトリガーとバリアブルを設定のアクションを使用します。shapeTypeバリアブルの値を「正方形」に設定します。
5. プロトタイプを再生してインタラクションをテストします。インタラクションがトリガーされ、バリアブルが変更されると、バリアントも更新されます。