为什么要从 Figma 转向 ProtoPie 进行高级原型设计

在深入了解 ProtoPie 之前，我们先简单聊聊 Figma。这个工具在我们大多数设计需求中都非常出色：设计用户界面、在 FigJam 中头脑风暴，以及用 Figma Slides 创建演示文稿。此外，它的 AI 集成进一步提升了 Figma 的多功能性。

但是，Figma 也有局限。复杂交互可能会比较棘手，即使它拥有强大的 UI3 界面和逻辑驱动功能。像实时校验或多步骤逻辑这类任务，在 ProtoPie 中只需简单公式和最少配置即可完成，但在 Figma 中可能会变得繁琐。因此，这也凸显了针对高保真交互使用专用原型工具的必要性。

你将学到：

• Figma 原型设计的限制

• 用于高级原型设计的 ProtoPie

• ProtoPie 快速入门

• 文件设置：从 Figma 导入画板

• 原生输入与键盘交互

• 条件、变量与公式简介

• 创建高级交互并添加动画

• 用条件与公式实现动态消息

• 反馈与消息格式化

• 用 Lottie 添加轻量 JSON 动画

在本教程结束时，你将能够从零构建一个像这样的“转账应用（Money Transfer App）”：

最终原型预览

Figma 的原型设计限制

现在，让我们来看看 Figma 的短板 —— 至少目前是这样。

• 实时校验与反馈能力受限

• 大规模变量管理

• 原生输入/键盘交互

• 为了简单输出却需要复杂定制

例如，想象你正在构建一个转账应用，输入金额必须与用户账户余额进行校验。用户发送的金额必须大于 0 且小于等于总余额。在 Figma 中，这需要大量变量：

• 3 个数字变量（用于余额和金额）

• 2 个字符串变量（用于消息）

• 1 个颜色变量（用于错误消息）

• 2 个布尔变量（用于显示/隐藏消息）

• 以及用于控制消息长度、按钮透明度等 UI 元素的额外变量

单个键盘交互的本地变量表

但请注意，Figma 原生并不支持多位数输入框或键盘交互。你可以使用数字和字符串，但无法输入超过一位数的内容。因此，你不得不从零开始创建一个高度定制且交互复杂的键盘，如下所示：

*Figma 中的自定义键盘交互*

现在，想象一下每个按键都要套上这套复杂校验。如果你还需要它在真实键盘上工作，复杂度还要翻倍。

即使采用一些变通方案并进行大量定制，请看下面的输出：我们仍然必须把余额自定义为 8，才能在单个数字可输入的最大值 9*.* 时触发错误消息。

Figma 的多位数输入限制

在 Figma 中需要大量设置（很多变量和自定义输入）才能实现的功能，在 ProtoPie 里只需 **一个公式和两个 **变量——让整个过程更快、更直观。

**体验这个 Figma 文件 **点这里。

用于高级原型设计的 ProtoPie

ProtoPie 是用于动态与多模态交互的头号高级原型工具。它非常强大，让设计师真正进行交互设计。你可以轻松添加图片、视频、音乐和通过 JSON 文件导入的Lottie 动画，并无缝导入来自 Figma、Adobe XD 和 Sketch 等工具的 UI 资产。不同于其他高保真原型工具（如 Framer 或 Proto.io），它几乎不需要任何编码技能。

ProtoPie Studio 的界面介绍：

ProtoPie Studio 界面

1. Scenes（场景）：每个场景都像一个 frame、画板或屏幕。你一次只能预览一个场景，这样在制作复杂交互时可以专注于单个屏幕。

2. Layers Panel（图层面板）：与 Figma 等工具中的图层面板类似，位于最左侧，按层级结构展示当前场景中的所有图层。

3. Variables Panel（变量面板）：如果你还没在 Figma 中做过高级原型，这个面板可能有点陌生，但本质上很相似。你可以添加局部或全局变量，类型可以是字符串、数字或颜色。

4. Scene Preview/Canvas（场景预览/画布）：在中间区域，你可以看到当前场景的预览。你还可以自定义画框尺寸、像素密度、设备方向以及系统状态栏等特定 UI 元素。

5. Interactions Panel（交互面板）：右侧是交互面板，可创建触发器（点击、单击、滑动）并绑定对象，触发如位置、缩放、颜色和播放等变化。你也可以在这里预览并调整交互时间线。

6. Properties Panel（属性面板）：位于最右侧。可自定义交互属性，如宽高、位置、颜色、文本样式和动画参数。

7. Preview Window（预览窗口）：使用预览窗口查看交互实际效果，并在分享原型前发现并修复错误。

8. Device（设备）：可通过移动端或平板上的 ProtoPie Player 应用实时测试原型。

9. Cloud（云端）：将原型上传到 ProtoPie Cloud，并与团队和利益相关者分享 Pie 链接。

10. Handoff（交付）：使用 Handoff 按钮创建交互录制 ，展示用户流程、元素行为以及原型中的整体交互整合。

ProtoPie 还提供 组件库、变量、条件 和 开发交付 等高级功能。若想深入挖掘其全部潜力，可以探索 ProtoPie School 课程。

ProtoPie 快速入门

ProtoPie 能突破 Figma 在复杂交互和校验方面的限制。让我们再次创建这个转账应用，这次用 ProtoPie 来实现。

第 1 步：文件设置。从 Figma 导入画板

第一步是把 Figma 文件导入 ProtoPie。在 Figma 中运行 ProtoPie 插件。

使用 ProtoPie 插件将 Figma 设计文件导入 ProtoPie

选择需要的 Figma 画板并点击 Export 按钮。稍等片刻，让 ProtoPie 自动处理。加载完设计元素后，你将被重定向到 ProtoPie。

选择画板并导出

画板会以 Scene 的形式出现在 ProtoPie 中。根据需要重排图层，并设置自定义的 Status Bar 与 Device（我使用的是 iPhone 15 Pro 的屏幕比例）。

下面是最终设置。现在，你已经准备好超越 Figma 的高级原型能力了。继续前进，像专家一样打造真正的交互设计。

ProtoPie 中的最终设置

第 2 步：配置原生输入与键盘交互

现在，让我们添加真正的 输入和键盘交互。新建一个输入图层。你可以通过原生键盘直接向该图层输入内容。

添加输入工具

定义输入框尺寸和属性，例如占位文本、空状态与填充状态的字体样式。然后设置点击输入框时显示的键盘类型。本例中我们使用数字键盘。

输入工具属性面板

当 ProtoPie 中的输入框样式设置正确后，删除从 Figma 导入的原始占位文本/输入框。然后在图层面板中调整它的最终位置，并使用 Live Preview 测试实时输入。无需创建自定义键盘即可自由输入。请给该输入框设置合适名称，例如“MoneyTransfer”。

在对应父图层下添加输入图层

现在，为了启用计算，我们需要在变量面板中创建 **两个变量 **：

• Balance：数值型，设置固定值（比如 20,000），这样就能减去输入金额。

• Amount：同样是数值型，但不是固定值，而是捕获 “MoneyTransfer” 输入框的实时输入。勾选 “Use formula” 复选框，然后添加这个公式。

创建 "Balance" 变量

创建 "Amount" 变量

点击每个变量旁边变量面板中的小虫图标启用 Debug mode，即可通过绿色标记查看实时更新。按需调整它们的位置，然后使用预览窗口确认“amount”变量会在你实时输入时捕获数值。

第 3 步：使用条件、变量和公式创建错误消息

下一步是输出消息。我们可根据以下场景输出 3 类不同消息：

1. 默认状态。当 Balance 变量 = 20,000

2. 余额不足错误消息。当 amount 变量 > balance 变量。

3. 最终余额提示消息。当 0 > amount 变量 < balance 变量

初始校验先添加一个 Start Trigger。它允许场景加载时立即激活交互。然后为该触发器添加条件：当 balance 为 20,000 时触发。

添加触发器>Start

为 Start 触发器添加条件

定义 Start 触发器的条件属性

现在把“Balance:”文本对象重命名为“Dynamic message”。先选中“Balance:”文本对象并设为可编辑。

💡注意：从 Figma 导入画板时，ProtoPie 默认会把所有文本转换成图片。

将文本对象设为可编辑

重命名为“Dynamic message”。我们将根据条件，在每次触发时动态更改这个文本对象的内容。

将 "Balance Text:" 重命名为 "Dynamic Message:"

回到你的 Start Trigger，添加一个 Text response，并选择“Dynamic message”对象。

为确保场景以默认状态打开，我们将用 balance 变量的值替换 dynamic message 对象内容。

在公式选项中输入你的“balance”变量的精确名称

在预览窗口运行原型。如果设置正确，“Dynamic message”文本值会变成“20000”。

接下来进入第二阶段校验：基于 3 种场景显示自定义消息。先添加新的 “Detect” Trigger。

选择“amount”变量。这样每次原型满足特定条件时，都会检查 "amount" 的值。接着为 3 个场景分别添加 3 条条件。

在“Detect”触发器中，当图层属性或变量发生变化时会触发响应。

场景 1：当 balance = 20000 或 amount = 0

第一条条件与 Start trigger 的条件和文本响应相同。这可确保当用户在“Money Transfer”输入框中输入错误值后，余额重置为初始值 20000。

自定义 detect trigger：当 balance 为 20000 时

场景 2：当 amount 变量 > balance 变量

在该场景中，应用应显示错误消息。设置另一条条件：amount > balance。

设置条件：Amount > Balance

选择“Dynamic message”对象的文本响应，并通过在“”中输入错误文本来添加字符串公式。

当 Amount > Balance 时添加错误响应

测试原型：输入大于 20,000 的金额。再回到 0，检查第一条校验是否正确运行，以及 Dynamic message 文本是否回到 20000。

包含 2 条校验的实时预览

场景 3：当 0 >amount< 20000

你可以复制上一场景的条件设置，并添加 2 条条件：amount < balance 且 amount > 0。

使用加号图标添加多个条件

这次显示的将是转账后的余额消息。我们再添加一个 Text response，并按如下方式设置公式：

运行你的原型。你会看到只用一个简单公式和 2 个变量，就在Dynamic message文本对象中实现了 3 种不同自定义消息，绕过了 Figma 的单数字与最大 9 限制。

Figma vs ProtoPie

创建高级交互与动画

目前我们已经搭建好基础逻辑，接下来该通过高级字符串公式、数据驱动的动态定制，以及软萌独角兽动画来增强交互体验。

我们将先用高级字符串公式和条件来定制帮助与错误消息。然后展示 ProtoPie 的高度灵活性。最后，把同样逻辑应用到 Lottie 的可生产 JSON 文件中，接入自定义独角兽动画。

第 1 步：使用公式、条件和格式创建高级交互

现在我们来格式化 Dynamic message 文本对象中的 3 类消息。我们将使用自定义公式，在 Detect Trigger 的 3 种条件事件中分别输出不同文本。

场景 1：默认状态或 amount = 0 时

先给第一条消息加一点格式化。

• 加入千分位逗号 (,) 和小数点 (.)。要实现该格式，需要用这个公式包裹 balance 变量：

• 复制并粘贴到你的 Start Trigger 和 Detect Trigger 的第一条条件事件中。效果大致如下。

• 添加普通文本字符串，在金额前输出“Balance”和“$”

更新 Start 和 Detect Triggers 中的公式并运行原型。若设置正确，每次原型启动时，Dynamic message 都会显示：“Balance: $20,000.00”。

默认状态或 amount 为 0 时的实时预览

场景 2：余额不足错误消息。

• 删除通用错误消息，在 Detect Trigger 第二条条件响应中设置格式化后的 balance 变量。

• 再添加一段普通文本字符串：先输出用户当前余额，再跟上错误提示文本。

注意 ProtoPie 会用颜色高亮公式中的字符串、数字和运算符，便于识别。

再次更新错误消息并运行原型。

场景 3：最终余额帮助消息。

• 基础格式将包裹我们的核心减法运算。复制并粘贴到 Detect Trigger 的第三条条件事件中。

• 再添加第一段字符串，用于说明下方显示的是交易完成后的余额。将自定义消息用引号包起来，并加上加号 (+) 运算符。

更新公式并运行原型。现在每次输入金额时，Detect Trigger 都会输出消息，告知用户交易完成后账户剩余金额。

最终预览：显示剩余余额

第 2 步：自定义反馈与错误消息

现在我们将自定义错误消息，并实现按钮的启用/禁用交互。

自定义错误消息文本颜色

• 在 Detect Trigger 的第 2 条条件中添加一个 Color event。选择 Dynamic message 文本对象，将填充色设为 #FF0000。实时运行原型后，当命中错误条件会变红，但不会自动恢复粉色。

💡注意**：顺序可能会因你在触发器面板中排列 detect 条件的方式不同而不同

• 再在第 1 和第 3 条条件中添加一个 Color event 以恢复原色。这次填充色设为 #F46ADE。

💡注意**：顺序可能会因你在触发器面板中排列 detect 条件的方式不同而不同

运行实时原型，观察 Dynamic message 在命中第 2 条“错误”条件时变红；满足第 1 和第 3 条条件时又恢复粉色。

实时预览：自定义错误消息

“Submit” 按钮自定义

按钮启用/禁用交互本质上只需基于同样逻辑调整透明度。但在此之前我们还要先做几项设置。

• 选择 MoneyTransfer 输入框并添加一个 Focus Trigger。设置为 Focus In 并添加 Move response。

• 为该移动响应选择按钮对象，并设置为 Move To Y:490。这样当输入框获得焦点时按钮会上移，但当输入框失焦时不会自动回到原位。

• 要让按钮回到原位，再添加一个 Focus Trigger，这次选择 Focus Out。再给按钮添加一个 Move event，并设为 Move To Y:783。

• 在失焦时我们也可格式化金额。给上面的 Focus Trigger（Focus out）再添加一个 Text event。目标设为 MoneyTransfer 输入框对象，内容设为 Formula。添加该格式化公式以获得千分位逗号 (,) 和小数点(.)。

• 最后添加启用/禁用交互。在 Detect Trigger 中加入 3 个 Opacity 事件：第 1 和第 3 条条件把按钮设为100% 不透明度；第 2 条条件（错误状态）设为 40%。

在预览窗口运行，享受你完成的原型……嗯，几乎完成了。逻辑已完成。等等，我们还要加上 LottieFiles 的软萌独角兽魔法 🦄🌈

最终预览：高级自定义

第 3 步：用 LottieFiles 添加软萌独角兽动画

动画部分我们将使用以下 3 个独角兽 Lottie 文件，均可免费下载：

• Free Surprised Unicorn Animation by Nico Del Real | LottieFiles

• Free Sad Unicorn Animation by Nico Del Real | LottieFiles

• Free Unicorn Looking Up Animation by Nico Del Real | LottieFiles

现在我们开始吧。

• 将这 3 个独角兽下载为 JSON 文件，并拖拽到你的 ProtoPie 文件中。

• 将它们调整为 42x42px，并放入图层面板中的 unicorn group。删除我们从 Figma 导入的临时 GIF。现在要用真实 JSON 来制作。

• 将独角兽 2 和 3 的透明度设为 0%。回到 Start Trigger，添加一个带播放动作的 Playback event，以便看到第一个 Lottie 动起来。勾选 looping，让动画循环播放。

• 复制并粘贴 Detect Trigger。把新的重命名为 Unicorn animations，旧的重命名为 Print message***。***

• 删除 Unicorn animations Detect Trigger 的所有响应，我们只需要这个触发器指向 amount 变量，并保留3 条条件。``````

• 在每条条件中添加 3 个 Opacity 事件，分别指向一只独角兽。第 1 条条件：unicorn 1 设为 100%，其余为 0%。第 2 条条件：unicorn 3 设为 100%，其余为 0%。第 3 条条件：unicorn 2 设为 100%，其余为 0%。

• 再添加最后 3 个 Playback 事件。每个放在unicorn animation Detect Trigger内不同条件下，并全部设置为循环。

• 最后，到变量面板中关闭 "balance" 和 "amount" 变量的调试模式。我们不再需要它。大功告成！原型完成了 🔥。

最终原型

现在让我们最后再预览一次，享受你这个功能完整的原型：具备实时校验、动态错误消息、高级字符串公式、数据定制，甚至还有软萌独角兽动画。

实时预览：你的最终 Pie

**查看最终可点击交互原型 **点这里

总结！

恭喜你！🦄 你刚刚完成了第一个 Pie，涵盖了基础与高级原型功能。现在你已经用 ProtoPie 提升了原型能力，掌握了高级字符串公式、动态反馈，以及由 JSON 驱动的 LottieFiles 动画魔法。通过超越 Figma 的基础交互，你打造出了更鲜活、更响应式的原型——非常适合交付高保真设计，弥合创意与真实功能之间的鸿沟。

你可以探索更多技巧与窍门，为应用加入更多动态效果；也可以加入 ProtoPie 社区，与志同道合、同样热爱高保真原型的先行者连接、学习并共同成长。