編者按：30秒出交互原型，5分鐘搞定交互動畫！今天@Payshare?給大家安利一款超實用的交互原型制作神器，亮點有3：整體交互原型制作，與Sketch無縫配合，制作速度快快快到難以想象，內附一個教程，不到20秒效果就完成你敢信？來收！

Flinto的前身是一款在線制作原型的工具，通過上傳圖片，添加熱點配合相應的交互動作快速的生成整體原型通過網頁或者手機端展示給客戶觀看，與之前介紹的Briefs非常相似，但Flinto是在線應用。

隨著移動設備的普及，Flinto也不斷進化，團隊開發出了Flinto for mac 版本，截止到現在的版本是Flinto 1.12

任何工具的出現都是為了提高我們的效率。作為一款交互原型制作軟件首先要滿足：

1. 可以人機交互
2. 便于設計師與其他人員溝通
3. 減少開發成本

Flinto的一些效果

也許我們很難想象，以上的后面三個效果都是在極短的時間內完成的（極短<=5分鐘）

目前的Flinto除了擁有透明度變化，XYZ軸旋轉，XY軸位移，運動曲線調整，移動端保存預覽，等基礎功能之外，最大的優點有五個：

1. 整體交互原型的制作
2. 與sketch無縫配合
3. 制作速度快
4. 制作速度真快
5. 制作速度非常快

案例

下面我們要制作如上圖的效果：

首先在sketch中繪制靜態效果圖：

2. 利用Flinto插件一鍵導出到Flinto，點擊相應圖片添加觸發交互的行為，這里是Tap，即單擊，新建變化（New transition）

3. 把背景層透明度調整為0，調整整個圖層位置，鏈接放大圖片到小圖片，調節運動參數。

4. 保存動作，選擇四張圖片成組制作滾動Scroll，添加返回行為，預覽效果。

以上的效果我制作原型其實只用了不到20秒。

之所以那么短的時間得益于Flinto的connet layer（類似于Flash的補間動畫）的作用，使圖層之間的變化可以非常迅速的制作，并且Back link功能使我們可以一鍵制作原型的返回效果，這兩點無疑大大加快了制作速度，并且由New Transition制作的交互動作和connet layer的標簽還可以重復使用，總之，難以想象的快。

作者微信公眾號：

【優設近期超實用神器合集】

在線創建超贊圖表的酷站！
《缺少靈感？自動生成上千款熱門配色色板的COOLORS》

幫你補充配色靈感！
《缺少靈感？自動生成上千款熱門配色色板的COOLORS》

一次搜索21個圖庫的搜圖殺器！
《搜圖殺器！一次查找21個免費可商用圖庫網站的STOCK UP》

作者：@Payshare

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量103萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com