让Figma变成交互原型神器！ProtoPie这个插件官方都推荐过！

去年，当我认识Figma款上协设计工具，便爱上它。没想到今年Fimga在国内也火得一塌糊涂，不为互设计师，我对设计工具的要求不仅视设计，互原型更是我最关心的部分。

为什么不用Figma自带的原型功能，却要找一个新的工具？

Figma自带的原型功能其也很直观，通连的方式就能出互动。不Figma里只能做出比单的动效，而我们司的用户测试也，领导/客户展示也，必须要用高的互原型。执着高原型的原因主要有以下几个方面：

• 可以测试我自己的交互法：当然这意我愿意真实设备测试
• 更容易说服领导/客户：越，越高，你的设计就越有说服力（尤其是面对种异想天开的甲方客户，你懂的）
• 用户测试结更准确：测试环境越真实，你到反馈也更真实。
• 方和开发对接：说一万句上一个还原的交互原，有细节开发自己亲测，一天时间写说明档更有效率。

那我说的高保真要保真到什么程度呢？

个根据项目要求每次不一样，但既要选一个工具，我肯定希望个工具既能简单的跳转也能下面种带有逻辑判断的原型。

△ 转自dribbble作品 https://dribbble.com/shots/10687809-Calendar-Animation

Figma 官方推荐的这款 ProtoPie 插件，美解决了上需求！

发现ProtoPie的契机偶然，月初Figma推账号上介绍了一款交互型工插件叫ProtoPie。英文大致思是说使用这款插件可以直将Figma的素材导入至ProtoPie，还能做出高保真的型。既然是Figma力推的，那肯定要。

于是安装了插件，还免费用了ProtoPie。

ProtoPie 满足我对交互原型软件的所需求象！

下面详细说一下我选择ProtoPie的原因

• 支持Windows、Mac双平台
• 支持中文界面，使用完全无障碍
• 手易，0软件学习本，界面清晰
• 基动效不说，还支持传感器、语音互、软硬件等各种互

1. 上容易，界面清晰

最最最喜欢ProtoPie的地方就是它的交互制作理，这也是它的使用体验远远好于其软件最重要的因。

交互= 对象+触发动作+反应动作

ProtoPie好地利用了这个理，它提供了多触发动作和反应动作模块，然后通过拼就可以制作一个个的交互。

2. 交互效果多，保真

根据上面的原，ProtoPie供了很多可供择的触发作和反应作。

最让我吃惊是他们不仅支持常用手势，支持多触摸、传感、语音交互，软硬件交互。而用起来真是级简单，插个图层搞定了。具体使用法我这里不说了，大家有需要我再单独制作教程。这里我放几个官Demo，自己感受下这个让泪目保真度把。

△ 行应原（3D旋转）

△ 智能视交互型（语音交互，软硬件交互）

△ 车载交互原型（语音交互，软硬件交互，跨设备交互）

3. ProtoPie插件：效率高的插件

重的东一压轴。作交互设师，我关注的还UI设师的 Figma 素能不能速且准确的导入ProtoPie，如果能无缝对接，作晓效率至少能提高80%，所以我重对Figma的ProtoPie插件了以下4点测试：

• 导入速度
• 导入自由度，我能不能自由选取导入的图层
• 我能不能在ProtoPie里编辑导的素材
• 如在Figma上改后再导入话，前制作交互会不会有影响（这是我最关注）

测试结果：

导入速度根据导入的素偏差，总体看算比较。我导入了4画板，花了概30秒。

导自由度高！以自由选取一个或个画板，导成为ProtoPie的场。也以自由选取一个或个图导，想怎么导就怎么导。

△ 使用素材转自Figma

做交互时会遇到修改设计的情况，我想每次有修改都Figma里改了再导入。结果证明，我可在ProtoPie中先把导入的图层转为矢量图后进行编辑，还将本转为本图层后进行修改。（非错）

△ 使用素材转Figma

但，当我导入渐变色图层，把渐变色转化矢图时出不能识别的况，ProtoPie似乎还不支持编辑渐变色图层。希望之后的版本里能得到改善。

在Figma上修改一个图次导，ProtoPie之前的互不被改变，样我就不用担心次导时，需要在花时间来重新设置互。

△ 使用素材转自Figma

对Figma素材导入做了测试之后，我发现Figma做设计+ProtoPie制作交互原的流程非棒！使时间长，作为一个软件手，我只了5分钟就做一个见的登录页，给大秀秀。

△ 使用素材转Figma

家可以先下载ProtoPie，然后Fimga安装插件，就可以将Figma的设稿交互原型啦！

• 注册&下载ProtoPie：https://www.protopie.io/
• 安装Figma插件：https://www.figma.com/community/plugin/908870217222043020/ProtoPie