讓Figma變成交互原型神器！ProtoPie這個插件官方都推薦過！

去年，當(dāng)我認(rèn)識Figma這款線上協(xié)作設(shè)計工具后，便愛上了它。沒想到今年Fimga在國內(nèi)也火得一塌糊涂，不過作為交互設(shè)計師，我對設(shè)計工具的要求可不僅限于視覺設(shè)計，交互原型更是我最關(guān)心的部分。

為什么不用Figma自帶的原型功能，卻要找一個新的工具？

Figma自帶的原型功能其實(shí)也很直觀，通過連線的方式就能作出交互動作。不過Figma里只能做出比較交單的動效，而我們公司的用戶測試也好，領(lǐng)導(dǎo)/客戶展示也好，必須要用高保真的交互原型。執(zhí)著于制作高保真原型的原因主要有以下幾個方面：

• 可以測試我自己的交互想法：當(dāng)然這意味著我更愿意在真實(shí)設(shè)備上測試
• 更容易說服領(lǐng)導(dǎo)/客戶：越真實(shí)，越高保真，你的設(shè)計就越有說服力（尤其是面對那種異想天開的甲方客戶，你懂的）
• 用戶測試結(jié)果更準(zhǔn)確：測試環(huán)境越真實(shí)，你得到的反饋也更真實(shí)。
• 方便和開發(fā)對接：說一萬句比不上一個高還原的交互原型，所有細(xì)節(jié)讓開發(fā)自己親測，比花一天時間寫說明文檔更有效率。

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

這個根據(jù)項(xiàng)目要求每次都不一樣，但既然要選一個工具，我肯定希望這個工具既能制作簡單的跳轉(zhuǎn)也能制作下面這種帶有邏輯判斷的原型。

△ 轉(zhuǎn)自dribbble作品 https://dribbble.com/shots/10687809-Calendar-Animation

Figma 官方推薦的這款 ProtoPie 插件，完美解決了以上需求！

我發(fā)現(xiàn)ProtoPie的契機(jī)很偶然，月初Figma推特賬號上介紹了一款交互原型工具插件叫ProtoPie。看英文大致意思是說使用這款插件可以直接將Figma的素材導(dǎo)入至ProtoPie，還能做出高保真的原型。既然是Figma強(qiáng)力推薦的，那我肯定要試試。

于是我安裝了插件，還免費(fèi)試用了ProtoPie。

ProtoPie 滿足我對交互原型軟件的所有需求和想象！

下面詳細(xì)說一下我選擇ProtoPie的原因

• 支持Windows、Mac雙平臺
• 支持中文界面，使用完全無障礙
• 上手容易，0軟件學(xué)習(xí)成本，界面清晰
• 基本動效不說，還支持傳感器、語音交互、軟硬件等各種交互

1. 上手容易，界面清晰

我最最最喜歡ProtoPie的地方就是它的交互制作原理，這也是它的使用體驗(yàn)遠(yuǎn)遠(yuǎn)好于其他軟件最重要的原因。

交互= 對象+觸發(fā)動作+反應(yīng)動作

ProtoPie很好地利用了這個原理，它提供了很多觸發(fā)動作和反應(yīng)動作模塊，然后通過拼接就可以制作一個個的微交互。

2. 交互效果多，保真度高

根據(jù)上面的原理，ProtoPie提供了很多可供選擇的觸發(fā)動作和反應(yīng)動作。

最讓我吃驚是他們不僅支持常用的手勢，還支持多點(diǎn)觸摸、傳感器、語音交互，軟硬件交互。而且用起來真的是超級簡單，插個圖層就搞定了。具體的使用方法我這里就不一一說了，大家有需要我再單獨(dú)制作教程。這里我就放幾個官方Demo，自己感受一下這個讓人淚目的保真度把。

△ 銀行應(yīng)用原型（3D旋轉(zhuǎn)）

△?智能電視交互原型（語音交互，軟硬件交互）

△?車載交互原型（語音交互，軟硬件交互，跨設(shè)備交互）

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

最重要的東西一定要壓軸來說。作為交互設(shè)計師，我最關(guān)注的還是UI設(shè)計師的 Figma 素材能不能快速且準(zhǔn)確的導(dǎo)入ProtoPie，如果能無縫對接，工作曉效率至少能提高80%，所以我著重對Figma的ProtoPie插件做了以下4點(diǎn)測試：

• 導(dǎo)入速度
• 導(dǎo)入自由度，我能不能自由選取要導(dǎo)入的圖層
• 我能不能在ProtoPie里編輯導(dǎo)入的素材
• 如果在Figma上修改后再次導(dǎo)入的話，之前制作的交互會不會有影響（這是我最關(guān)注的點(diǎn)）

測試結(jié)果：

導(dǎo)入速度根據(jù)導(dǎo)入的素材量有偏差，總體來看算比較快。我導(dǎo)入了4個畫板，花了大概30秒。

導(dǎo)入自由度高！可以自由選取一個或多個畫板，導(dǎo)入后成為ProtoPie的場景。也可以自由選取一個或多個圖層導(dǎo)入，想怎么導(dǎo)就怎么導(dǎo)。

△?使用素材轉(zhuǎn)自Figma

做交互時會遇到修改設(shè)計的情況，我不想每次有修改都去Figma里改了再導(dǎo)入。結(jié)果證明，我可以在ProtoPie中先把導(dǎo)入的圖層轉(zhuǎn)化為矢量圖后進(jìn)行編輯，還能將文本轉(zhuǎn)化為文本圖層后進(jìn)行修改。（非常不錯）

△?使用素材轉(zhuǎn)自Figma

但是，當(dāng)我導(dǎo)入漸變色圖層，把漸變色轉(zhuǎn)化為矢量圖時出現(xiàn)不能識別的情況，ProtoPie似乎還不支持編輯漸變色圖層。希望在之后的版本里能得到改善。

在Figma上修改了一個圖層后再次導(dǎo)入，ProtoPie之前制作好的交互不會被改變，這樣我就不用擔(dān)心再次導(dǎo)入時，需要在花時間來重新設(shè)置交互了。

△?使用素材轉(zhuǎn)自Figma

對Figma素材導(dǎo)入做了測試之后，我發(fā)現(xiàn)用Figma做設(shè)計+用ProtoPie制作交互原型的流程非常棒！使用時間不長，作為一個軟件新手，我只花了5分鐘就做出一個常見的登錄頁，給大家秀秀。

△?使用素材轉(zhuǎn)自Figma

大家可以先下載ProtoPie，然后在Fimga上安裝插件，就可以將Figma的設(shè)計稿做成交互原型啦！

• 注冊&下載ProtoPie：https://www.protopie.io/
• 安裝Figma插件：https://www.figma.com/community/plugin/908870217222043020/ProtoPie

重點(diǎn)來了！

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