「第1部」では、再利用可能なラジオボタンコンポーネントを作成しました。便利ではあるものの、まだ多くのコードが必要で、少し変更するだけでもエラーが起きやすく、最大でも6個のボタンまでしか対応できませんでした。
今回は、アプローチを一段階レベルアップします。1つのラジオボタンから、どんな数でも組み立てられる高効率なコンポーネントを作成します。この方法はコード量を大幅に削減し、コンポーネントをより強力で柔軟なものにします。
チュートリアルに入る前に、進めるうえで理解しておくべきいくつかの重要な概念があります：
1. JSON構造
ProtoPie のメッセージは一度に1つの値しか送れません。そこで JSON を使って複数の値を1つのメッセージにまとめ、より複雑な情報を送れるようにします。
2. 上書き可能な変数
これらは、コンポーネントインスタンス用のカスタムプロパティだと考えてください。各ラジオボタンに固有の識別情報と機能を与えられるため、1つのコンポーネントを本当に再利用可能にできます。
3. ProtoPie と Figma のオーバーライド
Figma と ProtoPie の同期を保つには、何をオーバーライドするかに注意する必要があります。ProtoPie でのオーバーライドは、常に Figma からの変更より優先されます。原則として、ProtoPie ではグラフィック属性を変更しないようにしてください（形状、色、境界線、フォント、位置）。これらは Figma で管理するか、ProtoPie で 'Start' トリガーへのレスポンスを使って変更するほうがよいでしょう。テキスト値や不透明度は ProtoPie で変更できますが、それでもトリガー経由で行うほうがよいことが多いです。
4. 不透明度 vs. 非表示レイヤー
ProtoPie にはレイヤーを「hide」するレスポンスはありませんが、不透明度は変更できます。重要なのは、レイヤーが非表示かどうかを確認する方法はなく、不透明度を参照する方法しかないということです。レイヤーパネルでレイヤーが非表示になっていても（そのため見えなくても）、不透明度が100であることがあります。Figma から取り込んだレイヤーは、同期を壊さずに削除または非表示にできますが、これはインタラクションではなく ProtoPie Studio で行う必要があります。
より賢く、より拡張しやすいコンポーネントを作る準備はできましたか？ では始めましょう。
単一の汎用ラジオボタンを作成する
前提条件
チュートリアルを進めるには、ここから開始用の pie と Figma ファイルをダウンロードできます: 開始用 pie | Figma ファイル
終了用の pie もここからダウンロードできます: 終了用 pie
ステップ1: 初期設定
「Starting Pie.pie」ファイルを開きます。Figma にアクセスできない場合は、ステップ3まで飛ばしてください。
ステップ1: 初めて開いたときの Starting Pie
ステップ2: Figma アセットのインポートと準備（Figma にアクセスできる場合のみ可能）
「Starting Pie.pie」ファイルにあるローカルコンポーネントを削除し、「tutorial.fig」ファイルを Figma にインポートします。2つのラジオボタンデザインが表示されるはずです。1つは 'Tick'、もう1つは 'Dot' です。両方を選択して ProtoPie Figma Plugin を開きます。両方のオブジェクトを ProtoPie にエクスポートしてください（プラグインが 2つのオブジェクトをエクスポートしていることを確認してください）。
ProtoPie に戻ったら、Tick と Dot の位置を 0,0 に設定し、コンポーネント名を「Radio Buttons」に変更します。Tick と Dot のレイヤーを開き、すべて編集可能になっていることを確認してください（必要なら「Make Editable」をクリックします）。この時点で、ON レイヤーの不透明度を 0 にして、未選択のボタンだけが表示されるようにしておくのもよいでしょう。
ステップ2a: Figma から ProtoPie へエクスポートする準備
ステップ2b: インポートしたレイヤーが編集可能であることを確認する
ステップ3: コンポーネント変数を作成する
Radio Buttons コンポーネントのコンポーネントエディタを開きます。これから必要な変数を作成します：
上書き可能なテキスト変数『LABEL』を追加します。上書き可能な変数はすべて大文字で表します。
もう1つ、上書き可能なテキスト変数『SET』を追加します。
大文字を使わない、式で定義するテキスト変数『value』を追加し、式 regexreplace(LABEL," ","") を入れます。これにより、ラジオボタンのUI表示にはスペースを含められますが、内部値はスペースなしにできます（JSON を使う際に都合が悪くなるためです）。
テキスト変数『parameters』を追加し、式 {"Set":"+Set+", "Value":"+Value + "} で定義します。
最後に、『sender』というテキスト変数を追加します。これはメッセージ送信時に値を受け取るために使います。
ステップ3: トリガーとレスポンスのための編集可能なレイヤーと変数を準備する
ステップ4: Start 時にラベルを設定する
これでコンポーネントにコードを追加できます。まず、さまざまなテキストフィールドに適切なラベルを入れるための『Start』トリガーが必要です。ボタンのラベルを表示すべきコンポーネント内の各テキストフィールドには、変数『LABEL』を入れるためのテキストレスポンスを追加します。
ステップ4: 'Start' トリガーとそのレスポンス
ステップ5: 'Tap' トリガーを作成する
必要となる主なコードは、『Tap』トリガーへのレスポンスです。コンポーネントがタップされたら、必要な操作でボタンをオンにします。最も基本的には、任意の『ON』レイヤーの不透明度を100にし、『OFF』レイヤーの不透明度を0にします。
ボタンをオンにするだけでなく、『NEWVALUE』が選択されたことを示すメッセージをシーン全体に送信する必要もあります。このとき、変数 parameters をその値として渡します。
ステップ5: 重要な Tap トリガーとレスポンス
ステップ6: 受信する値を処理する
コンポーネントは『NEWVALUE』メッセージを受信する必要があります。別のボタンインスタンスが選択された場合、このインスタンスは自分自身をオフにする必要があります。そのために、『NEWVALUE』用の『receive』トリガーを追加し、付随する値を変数 sender に割り当てます。これで parseJson 関数を使って、sender が同じ SET に属しているが値が異なるかどうかを確認できます。該当する場合はオフにします（『Tap』トリガーの『ON』動作を逆にします）。
ステップ6: 'Receive' トリガーとそのレスポンス
ステップ7: シーンで値を割り当てる
これでシーンに戻って、新しいコンポーネントを使えます。シーン内で『NEWVALUE』メッセージ用の『receive』トリガーを作成し、付随する parameters を『sender』という変数に割り当てます。次に、考えられる各 SET について sender がその SET に含まれているかを確認し、該当する場合は適切な変数に値を保存します。このコードは、作成する各ラジオボタンセットごとに手動で更新する必要があります。
ステップ7: 結果をシーンの変数に割り当てるための 'Receive' トリガー
ステップ8: ボタンセットを構築する
pie を使うには、コンポーネントの複製インスタンスをシーンにドラッグし、それぞれに独自の LABEL と所属する SET を設定します。また、その SET の現在値を保存する変数も作成する必要があります。1つの SET に含めるボタンの数は自由ですが、各ボタンは異なる LABEL を持ち、同じ SET を共有しなければなりません。
各ラジオボタンには引き続き Tick と Dot の両方のバリアントが表示されるため、各 SET 内で Tick または Dot のどちらか一方をすべて非表示にする必要があります。
ステップ8: 各ボタンセットでいずれか一方のバリアントを非表示にし、各ボタンに LABEL と SET を割り当てる
ステップ9: デザイン変更を同期する
これで Figma に戻り、ラジオボタンの見た目をさらに洗練できます。色、フォント、余白、配置を調整してください。準備ができたら、更新したフレームを ProtoPie コンポーネントに再インポートするだけです。
それらのプロパティを ProtoPie で直接変更していない限り、Figma のデザインに合わせて自動的に更新されます。インタラクションは引き続き問題なく動作するはずです。
スタイルが更新されない場合は？ うっかり ProtoPie でプロパティ（たとえば「Tick」や「Dot」の色）を変更してしまうと、Figma と同期しなくなります。これを修正するには、コンポーネント内の変更したレイヤーを削除し、Figma からきれいなオブジェクトを再インポートしてから、それを使っていたレスポンスで新しいレイヤーを再リンクします。
プロのヒント: Figma とのリンクを壊さずに ProtoPie で変更を試すには、Start トリガーを使って適用します。このコードベースの方法は、プロトタイプ実行中のみ Figma のスタイルを上書きし、コンポーネント構造をきれいに保ちます。
今後
次のチュートリアルでは、Figma の話をさらに一歩進め、ProtoPie Team Library 内の Figma Design System から再利用可能なコンポーネントを作成する方法を説明します。そうすれば、チームメンバーの1人が Figma で変更を加え、ProtoPie ライブラリを更新すると、そのライブラリから作成されたすべての pie が新しいデザインシステムに自動で適応し、再コーディングは不要になります。
この詳細ガイドは、UX デザインの Director & Consultant である David Gilmore によって作成されました。
