在第 1 部分中，我们构建了一个可复用的单选按钮组件。虽然很实用，但它仍然需要大量代码，稍有改动就容易出错，并且最多只能支持六个按钮。
这一次，我们将升级方法。我们将从一个单选按钮创建一个高效组件，用它来构建任意大小的按钮组。此方法可显著减少代码量，并让你的组件更强大、更灵活。
在开始教程之前，先理解几个关键概念非常重要，这样你才能顺利跟上：
1. JSON 结构
ProtoPie 消息一次只能发送一个值。我们将使用 JSON 把多个值打包到一条消息中，从而发送更复杂的信息。
2. 可覆盖变量
可以把它们理解为组件实例的自定义属性。它们让我们能够给每个单选按钮赋予独特的身份和功能，使单个组件真正实现复用。
3. ProtoPie 与 Figma 中的覆盖（Overrides）
为了保持 Figma 与 ProtoPie 的同步，你必须谨慎处理覆盖内容。ProtoPie 中的覆盖始终会覆盖来自 Figma 的更改。一般来说，避免在 ProtoPie 中修改图形属性（形状、颜色、边框、字体、位置）。最好在 Figma 中管理这些属性，或通过在 ProtoPie 中响应“Start”触发器来修改。虽然文本值和不透明度可以在 ProtoPie 中更改，但通常仍建议通过触发器来实现。
4. 不透明度 vs. 隐藏图层
ProtoPie 没有“隐藏”图层的响应，但你可以更改其不透明度。关键是：无法检查图层是否被隐藏，只能访问其不透明度。请记住，即使图层不透明度是 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。你应该会看到两个单选按钮设计：一个名为“Tick”，另一个名为“Dot”。选中两者并打开 ProtoPie Figma 插件。将两个对象都导出到 ProtoPie（确保插件显示正在导出 2 个对象）。
回到 ProtoPie 后，将 Tick 和 Dot 的位置设为 0,0，并将组件重命名为“Radio Buttons”。展开 Tick 和 Dot 的图层，确保它们都可编辑（如果不可编辑，请点击“Make Editable”）。此时，也建议将 ON 图层的不透明度设为 0，这样只会显示未选中的按钮。
第 2a 步：准备从 Figma 导出到 ProtoPie
第 2b 步：确保导入的图层可编辑
第 3 步：创建组件变量
打开 Radio Buttons 组件的组件编辑器。现在我们将创建所需变量：
添加一个名为“LABEL”的可覆盖文本变量——我们使用全大写字母表示可覆盖变量。
再添加一个名为“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 是否在同一组中但值不同；若是，则将其关闭（反向执行“Tap”触发器中的“ON”操作）。
第 6 步：“Receive”触发器及其响应
第 7 步：在场景中分配值
现在你可以切回场景使用新组件。你需要在场景中为“NEWVALUE”消息创建一个“receive”触发器，它同样会将附带的 parameters 赋给名为“sender”的变量。然后，对于每个可能的组，检查 sender 是否属于该组；如果是，就把该值存入对应变量。你希望创建多少单选按钮组，就需要为每组手动更新这段代码。
第 7 步：用于将结果赋给场景变量的“Receive”触发器
第 8 步：构建按钮组
要使用该 pie，请将组件的重复实例拖入场景，并为每个实例设置各自的 LABEL 与所属的 SET。你还需要创建一个变量来存储该组的当前值。一个组可以包含任意数量的按钮，但每个按钮必须有不同的 LABEL，并且具有相同的 SET。
每个单选按钮仍会同时显示 Tick 和 Dot 两种变体，因此在每个 SET 中，你还需要隐藏所有 Tick 或 Dot 版本之一。
第 8 步：在每个按钮组中隐藏一种变体，并为每个按钮分配 LABEL 和 SET
第 9 步：同步设计更改
现在你可以回到 Figma，进一步优化单选按钮的视觉设计，调整颜色、字体、间距或对齐方式。准备好后，只需将更新后的画板重新导入到你的 ProtoPie 组件中。
只要你没有在 ProtoPie 中直接修改这些属性，它们就会自动更新以匹配你的 Figma 设计。你的交互应当仍能完美运行。
如果样式没有更新怎么办？ 如果你在 ProtoPie 中不小心改动了某个属性（例如“Tick”或“Dot”的颜色），它将不再与 Figma 同步。要修复此问题，请在组件内删除被修改的图层，从 Figma 重新导入干净对象，然后在所有使用该图层的响应中重新关联新图层。
专业提示： 若想在 ProtoPie 中试验更改而不破坏 Figma 链接，请使用 Start 触发器来应用这些更改。这种基于代码的方法只会在原型运行时覆盖 Figma 样式，从而保持组件结构整洁。
下一期预告
下一篇教程将把 Figma 相关内容再推进一步，讲解如何基于 Figma 设计系统在 ProtoPie 团队库中创建可复用组件。这样，团队中的一位成员可以在 Figma 中进行更改、更新 ProtoPie 库，然后所有基于该库构建的 pies 都能适配新的设计系统，而无需任何重新编码。
这份深度指南由 David Gilmore（UX 设计总监与顾问）创作。
