去年，當我認識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

重點來了！

ProtoPie 本周特價活動，原價858元，現在五折促銷，僅需429元即可拿下 →?https://store.lizhi.io/site/products/id/393?cid=sz1q3pvl