如何用 Figma 做 prototype? 介紹 Smart animate

要完成一個產品，可能會經過多次使用者測試。現在市面上有很多製作 Prototyping的工具，如何能快速、順暢的做出 Prototype 並順利完成測試、了解使用者想法，可能是設計師挑選工具的關鍵點。

這次我要介紹的工具是 Figma ，Figma 除了是繪製介面的軟體外，同時也能快速的製作Prototyping。

操作區域預覽：

Figma 的 Prototype 操作介面主要在右邊的區域，在一開始的時候可以選擇手機機型（Device)、背景色(Background)、要從哪個畫面開始(Starting Frame)

當元件、頁面開始連結時，會在跳出 Interaction details， 針對頁面的觸發方式、轉場可以做更詳細的設定。

詳細的 Figma Prototype 可以參考官網

今日範例影片：如何用 Smart animate 製作出 prototype?

開始製作

Step 1. 先將左圖的三個 icon 置右

Step 2. 縮小三個 icon 的大小

Step 3. 調整三個 icon 的透明度（調整完變成右圖的畫面）

Step 4. 將 “Wade Warren”列表置中

Step 5. 打開右側欄中的“Prototype”

Step 6.在畫布中選擇列表。將連接節點連向右圖

Step 7. 選擇 On drag

Step 8. 選擇 Smart animate

Step 9. 選擇 Ease in and out

Step 10. 時間設定300ms

Step 11. 點選 icon 連結右圖

Step 12. 設定 Touch down

Step 13. 點選 icon 連結右圖

Step 14. 設定 Touch up

Step 15. 設定 Smart animate

Step 16. 設定 Ease in

Step 17. 設定 300ms

Step 18. 點選 Frame 連結右圖

Step 19. 設定 After delay 300ms

Step 20. 設定 Smart animate

Step 21. 設定 Ease in

Step 22. 設定 300ms

Step 23. 點選 Frame 連結右圖

Step 24. 設定 After delay 300ms

Step 25. 設定 Smart animate

Step 26. 設定 Ease in And out

Step 27. 設定 300ms

就完成了！

今天的分享就到這啦，希望對於同樣也在摸索 Figma 的朋友有所幫助，若有任何問題也歡迎下方留言討論喔～ 感謝大家！