Figma 是一款用于快速原型设计的优秀工具。当你想向客户展示设计、与用户测试最重要的流程，或将微交互交接给开发者时，它非常好用。不过，目前在 Figma 中仍无法使用变量或创建可在演示视图中运行的关键帧动画。
这正是 ProtoPie 发挥作用的地方。它让你能够将 Figma 设计转换为高保真原型，并支持条件交互、多点触控手势、摄像头和设备传感器访问、媒体播放、语音控制等等。今天我将向你展示如何在 ProtoPie 中使用输入框。
从 Figma 开始
1. 创建设计
首先，我们需要有一些可操作的设计。假设你要设计一个带有输入框的页面，让用户可以在自己的账户中添加新档案。为了让它更精致一些，我们会添加一个简单插画并为其制作动画。记得给所有图层规范命名，以保持整洁，并让后续工作更轻松。
Figma 中的图层命名。
2. 导出到 ProtoPie
你需要先从 Figma 导出设计。首先，安装 ProtoPie 插件。
当插件准备就绪且 ProtoPie 应用在后台运行时，只需选中你要处理的画板并点击导出按钮，即可直接发送到 ProtoPie。你的顶层画板会作为场景导入，并保持与 Figma 中完全一致的图层层级、命名和位置。
将设计从 Figma 导出到 ProtoPie。
在 ProtoPie 中继续
3. 添加交互式输入图层
现在有趣的部分开始了！切换到 ProtoPie 窗口后，你会注意到它的界面与 Figma 很相似。左侧面板包含所有图层，顶部工具栏可向原型添加不同类型的对象，右侧面板包含属性、时间线和交互。甚至预览按钮的位置也很类似，因此对任何有 UI 设计软件经验的人来说，在这个应用中导航都非常轻松。
首先，用交互式输入图层替换占位元素。它位于左上方工具栏的 Text 下方。之后，你可以在右侧的属性面板中修改其属性。你可以隐藏占位文本、设置圆角、修改背景填充和边框，最后调整字体和文字颜色以匹配你的设计。
在 ProtoPie 中添加交互式输入。
4. 添加触发器和响应以创建交互
创建一个交互需要三个组件：对象、触发器和响应。我们的对象是输入框。触发器会导致一个或多个响应被执行。响应是对象中被激活的一种修改。
我们将使用 focus 触发器。当输入图层获得焦点时，默认会显示闪烁光标和手机原生键盘。此外，我们还希望为输入框添加绿色边框。Focus out 触发器则会产生相反效果。
要添加触发器，请选中交互式输入图层，进入 Interaction 面板，点击 “Add Trigger” 按钮展开所有选项并选择 “Focus”。然后，在 Focus 触发器下点击加号创建响应。选择 “Border” 并将宽度改为 2px。
你还需要再添加一个 focus 触发器，以定义输入框不再激活时应发生什么。同样，选中输入框并点击 “Add Trigger” → “Focus”。然后，在 Properties 面板中将 “Focus In” 切换为 “Focus Out”。之后，添加 “Border” 响应并将宽度改为 0。
添加 focus 触发器。
5. 预览原型
你可以在预览窗口中查看原型。它可从工具栏右上角打开。如果任何交互失效，你都能在预览面板测试时发现。默认情况下，当你修改图层或交互时，原型会自动刷新。
预览交互效果。
6. 为插画制作动画
让我们锦上添花，根据输入框中的状态为插画添加动画，好吗？ :) 比如我们希望头像的眼睛能跟随输入框内光标的位置。
选中眼睛图层后，你可以在 focus 触发器中添加 Move 响应。这样你就能将该图层移动到预定义坐标。当输入框获得焦点时，你希望眼睛盯住光标。你可以通过统计输入文本的字符数来近似其位置。可将输入文本作为参数传给 length() 公式。选中 x 位置并点击公式符号。在我的插画中，x 使用公式 53+length(‘input-text’.text)/4，y 为 83。然后，在 focus out 事件中添加 Move 响应以重置眼睛位置（我的示例中 x:55，y:80）。
添加 Move 响应。
最后，为了让打字时眼睛也能跟随光标，添加 Detect 触发器。然后，把 focus in 触发器中的 Move 响应粘贴过来。
添加带有 Move 响应的 Detect 触发器。
最终效果
现在来预览你完成的微交互吧 :)
文本输入微交互。
结论
微交互原型设计是讨论和测试设计决策的非常有效方式。ProtoPie 与 Figma 的工作流几乎无缝衔接。所有草图都可以在 Figma 中完成。在 ProtoPie 中，设计师可以使用公式、变量和条件逻辑轻松制作交互式原型。这样开发者在代码中实现效果也更容易，因为交互录制消除了重建 After Effects 动画时所需的各种猜测。
ProtoPie 帮助设计师将创意以高保真交互原型的形式变为现实。现在就开始构建你自己的超高保真原型，而且无需编写任何一行代码。
