欢迎来到 ProtoPie！在本教程中，你将学习如何仅通过 3 个简单步骤开始将你的绝妙创意变为现实：
通过从 Figma、Sketch 或 Adobe XD 导入设计来添加素材
使用 ProtoPie 的 Trigger、Response & Object 模型添加交互
在你的设备上测试原型并将其上传到云端，以便与他人分享你的出色作品。
什么是 ProtoPie？ 在我们开始之前，先花一点时间进一步了解 ProtoPie。ProtoPie 让你能够创建像真实数字产品一样运行的交互式、逼真的原型——而且完全无需编写任何代码。虽然其他原型工具非常适合快速制作点击跳转的页面原型，但当你需要更多功能时——比如可用性测试——ProtoPie 的 Trigger、Response & Object 模型可让你的原型在外观和体验上都尽可能接近真实产品。
ProtoPie School
ProtoPie 一开始可能看起来有些难，但别担心！我们会把所有内容拆分为易于消化的小模块，让你在进入更高级主题前可以快速掌握。ProtoPie School 系列文章从基础开始，最终会覆盖 ProtoPie 最强大的功能。
准备好了吗？我们开始吧！
第 1 步：从你的设计程序中添加素材
ProtoPie 支持原生创建矩形、椭圆等形状，不过将设计导入 ProtoPie 的更简单方式是从 Figma、Sketch 和 Adobe XD 等工具导入你的作品。查看下方可用插件，并按照说明进行安装。
为了跟随本教程操作，请先安装 Figma 插件，并在下方获取适用于 Figma 的 ProtoPie UI 入门包。
如果你还没有 Figma 账号，可以免费创建一个以便跟着练习。安装后，打开 ProtoPie Studio 并点击 New Pie。
“Pie” 是 ProtoPie 创建的文件类型。
现在切换到你的设计工具，并从设计工具中启动插件。在 Figma 中选择 Plugins → ProtoPie。
接下来，选择你想要导入的内容。如果你在 Figma 中导入整个画板，它们会在 ProtoPie 中作为场景导入。如果你选择单独图层，它们会被导入到 ProtoPie 的当前场景中。
试着导入这两个画板：Welcome Page 和 Home_Todo List。
点击 Export 后，你的 Pie 中会创建两个新场景。
场景中的所有图层都已整理并命名，以匹配它们在 Figma 中的状态。
第 2 步：使用 ProtoPie 的 Trigger、Response & Object 模型添加交互
ProtoPie 的 Trigger、Response & Object (TRO) 模型是 ProtoPie 工作方式的核心。理解 TRO 后，你在 ProtoPie 中的创作几乎没有上限。A** Trigger** 是某种事件，通常是用户直接输入，但并不总是如此。Trigger 的一个例子是当用户点击设备上的按钮时触发的 Tap。A** Response **是 Trigger 触发后要执行的后续动作。例如，与按钮关联的 Tap 触发器可以包含一个 Jump 响应，用于导航到其他场景。最后，**Objects **是参与 Triggers 和 Responses 的图层。
ProtoPie 中的“Triggers”
ProtoPie 中的“Responses”
下面是一个可运行示例。我希望当用户点击 Next 按钮时，能够导航到第二个场景：
在 UI 右侧的交互面板中点击 Add Trigger。
下拉菜单会提供所有可用 Trigger 的列表。选择 Tap。
选择要被点击的 Object。在此示例中，它是名为
Btn / Next的图层。现在我们需要为该触发器添加一个 Response。点击 Tap 触发器下方的
+图标。会出现下拉菜单，显示所有可用响应。选择** Jump** 响应。配置 Response。选择你希望跳转到的场景——
Home_Todo List。此外你还可以配置过渡效果。本示例使用 **Slide In **，方向为 Right to Left。
这个基础示例在该 Trigger 下只展示了一个 Response，但你可以通过点击 Trigger 底部的 + 图标添加任意多个，并且每个 Response 都可以作用于不同的 Object。此外，我们的交互也可以是有条件的，比如仅当 Your Name 字段已填写时才导航到第二个 Scene。你将在这种方式下创建 ProtoPie 中的所有交互。
很快，你就能创建包含多个 Triggers 和 Responses 的交互，像这样：
如果这张图看起来很复杂，也不用担心。我们会在后续文章中讲到。现在先来测试一下交互，确保它按预期工作。
第 3 步：测试与分享
现在你已经创建了第一个交互，是时候测试它了。点击右上角的 Preview 图标。这将打开一个新窗口，以预览模式显示你的 Pie。点击场景中的 Next 按钮。你应该会看到使用你所选过渡效果导航到 Home_Todo List 场景。你可以随时点击预览窗口左下角的 Reset 图标，将预览重置为初始状态。
现在它已经可以工作了，最好的体验是能直接在设备上与原型交互。为此，你需要在设备上安装 ProtoPie Player 应用。请按照这里的说明操作。
要在设备上预览 Pie，设备要么需要与电脑连接同一 WiFi 网络，要么需要通过 USB 线连接到电脑。
在电脑上的 ProtoPie Studio 中，点击右上角的 Device，会显示一个二维码。
在你的设备上启动 ProtoPie Player 应用。点击 Scan QR Code。 扫描上一步显示的二维码，你的 Pie 应该就会加载到设备上。
现在你应该能够与 Pie 交互了。在场景中点击 Next 按钮，导航到 Home_Todo List Scene。
若要在设备上将 Pie 重置为初始状态，请在屏幕任意位置用两根手指双击。这将显示 Pie 的选项，其中包括 Reset 选项。
恭喜！你已经创建了第一个可运行的 Pie。
现在是时候与他人分享你的作品了，比如将要为你的创作编写代码的工程师。你可以通过将 Pie 上传到云端来与他人分享。其他人无需安装 ProtoPie Studio 也能访问并预览你的作品。
要上传 Pie，请点击右上角的 Upload 图标。如果你拥有 Team 或 Enterprise 许可证，系统会询问你要上传到哪个空间：团队项目或个人空间。如果你使用的是** Individual plan**，则会跳过此步骤。Pie 上传完成后，会显示一个可与他人分享的链接。如果你之后还需要该链接，可以点击紧挨在 Upload 图标左侧的 Cloud 图标来找回。
任何点击该链接的人都可以在浏览器中打开 Pie，并使用内置预览进行交互。
此外，如果他们安装了** ProtoPie Player app 并扫描 QR Code**（该二维码可通过 Pie 描述下方的链接显示），也可以在设备上进行预览。
作为 Pie 的作者，你可以自定义一些分享选项。点击三点图标可显示一些附加菜单项：
例如，你可以通过选择 Access Settings。 来设置密码保护，并限制谁可以查看或下载你的 Pie。
给自己鼓个掌吧！
在本教程中，你已经学习了如何从设计工具导入作品，使用 ProtoPie 的** Trigger、Response & Object **模型添加交互，并在 ProtoPie Cloud 中测试和分享你的作品。我们下节课见。
