Figma一款真正好用的UI設計軟體，你從未想過只需要用瀏覽器就能進行設計的工具。
當我認識Figma這款線上協作設計工具後，便愛上了它。沒想到今年Fimga在國內也火得不要不要的，不過作為互動設計師，我對設計工具的要求可不僅限於視覺設計，交互原型部分也是我關注的一部分。今天來分享一下我最近才發現但是真的是超級強大的交互原型工具-ProtoPie
為什麼不用Figma自帶的原型功能，卻要找一個新的工具？
Figma自帶的原型功能其實也很直觀，通過連線的方式就能作出交互動作。不過很可惜，現在的Figma只能作出簡單的頁面跳轉。
而我們公司的用戶測試也好，領導/客戶展示也好，必須要用高保真的交互原型。執著於製作高保真原型的原因主要有以下幾個方面：
- 可以測試我自己的交互想法：當然這意味著我更願意在真實設備上測試
- 更容易說服領導/客戶：越真實，越高保真，你的設計就越有說服力（尤其是對付那種異 想天開的金主爸爸，你懂的）
- 用戶測試結果更準確：測試環境越真實，你得到的反饋也更真實。
- 方便和開發對接：說一萬句比不上一個高還原的交互原型，所有細節讓開發自己親測比花一天時間寫說明文檔更有效率。
那我說的高保真要保真到什麼程度呢？
這個根據項目要求每次都不一樣，但既然要選一個工具，我肯定希望這個工具既能製作簡單的跳轉也能製作下面這種帶有邏輯判斷的原型
△轉自dribbble作品
你用Figma嗎？那一定試試ProtoPie的Figma插件
我發現ProtoPie的契機很偶然，月初Figma推特帳號上介紹了一款交互原型工具插件叫ProtoPie。看英文大致意思是說使用這款插件可以直接將Figma的素材導入至ProtoPie，還能做出高保真的原型。既然是Figma強力推薦的，那我肯定要試試。
... ...
於是我安裝了插件，還免費試用了ProtoPie。
ProtoPie打開了我對交互的新世界！！
平復一下激動的心情，下面詳細說一下我如此激動的原因
- 支持Windows、Man雙平臺
- 支持中文界面，使用完全無障礙！
- 上手容易，界面清晰
- 交互效果多（居然還有語音交互）
- ProtoPie插件真的是太人性了（一會兒重點介紹）
01上手容易，界面清晰
我最最最喜歡ProtoPie的地方就是他的交互製作原理，真的是一下點到了交互本質。
交互= 對象+觸發動作+反應動作
ProtoPie很好地利用了這個原理，他提供了很多觸發動作和反應動作模塊，然後通過拼接就可以製作一個個的微交互。
02交互效果多，保真度高
根據上面的原理，ProtoPie提供了很多可供選擇的觸發動作和反應動作。
最讓我吃驚是他們不僅支持常用的手勢，還支持多點觸摸、傳感器、語音交互，軟硬體交互。而且用起來真的是超級簡單，插入個圖層就搞定了。具體的使用方法我這裡就不一一說了，大家有需要我再單製作教程。這裡我就放幾個官方Demo，自己感受一下這個讓人淚目的保真度把。
△銀行應用原型（3D旋轉）
△智能電視交互原型（語音交互，軟硬體交互）
△車載交互原型（語音交互，軟硬體交互，跨設備交互）
03ProtoPie插件：最人性的插件
最重要的東西一定要壓軸來說。作為互動設計師，我最關注的還是UI設計師的Figma素材能不能快速且準確的導入進ProtoPie，這樣才能讓工作流程沒有縫隙，所以我著重對Figma的ProtoPie插件做了以下幾點測試：
1. 導入速度
2. 導入自由度，我能不能自由選取要導入的圖層
3. 我能不能在ProtoPie裡編輯導入的素材
4. 如果在Figma上修改後再次導入的話，之前製作的交互會不會有影響（這是我最關注的點）
--測試結果--
1. 導入速度根據導入的素材量有偏差，總體來看算比較快。我導入了4個畫板，花了大概30秒。
2. 導入自由度高！可以自由選取一個或多個畫板，導入後成為ProtoPie的場景。也可以自由選取一個或多個圖層導入，想怎麼導就怎麼導。
△使用素材轉自Figma
3. 做交互時會遇到修改設計的情況，我不想每次有修改都去Figma裡改了再導入。測試結果證明，我可以在ProtoPie中先把導入的圖層轉化為矢量圖後進行編輯，還能將文本轉化為文本圖層後進行修改。（非常不錯👏）
但是，當我導入漸變色圖層，把漸變色轉化為矢量圖時出現不能識別的情況，ProtoPie似乎還不支持編輯漸變色圖層。希望在之後的版本裡能得到改善。
△使用素材轉自Figma
4. 在Figma上修改了一個圖層後再次導入，ProtoPie之前製作好的交互不會被改變！
△使用素材轉自Figma
對Figma素材導入做了測試之後，我發現用Figma做設計+用ProtoPie製作交互原型的流程非常棒！使用時間不長，先做了一個比較簡單的登錄頁給大家秀秀。
△使用素材轉自Figma
怎麼樣？是不是覺得交互又變成如此簡單了呢！
大家可以先下載ProtoPie，然後在Fimga上安裝插件，就可以將Figma的設計稿做成交互原型啦！
註冊&下載ProtoPie：https://www.protopie.io/
安裝Figma插件：https://www.figma.com/community/plugin/908870217222043020/ProtoPie
小編收集素材不容易
「贊」+「在看」+「轉發」