承昨天的Figma介紹，你試著靠自己的力量完成了一個設計稿，滿心期待的拿給客戶看......

客戶：「你這個設計得滿讚的欸，但是我想要的是App欸，這樣要怎麼操作阿？」

：「欸.....上面有手機的模板啦，你就想像在手機上操作就好啦」

客戶：「想像在手機上操作喔.....」

(客戶用手指戳電腦螢幕)

客戶：「阿怎麼沒有反應阿？」

：「.....」

客戶：「不管啦我就是要看到他可以使用的樣子，可以滑可以點啦，這樣才有使用的感覺嘛」

：「......」

：「沒問題，有Prototype可以處理！！」

Prototype

Figma的prototype為你的專案提供了互動性，讓你在設計的過程中可以更方便的思考各元素間的互動性，點下這個按鈕會發生甚麼事呢？回到上一頁要點哪邊呢？這樣方便的功能可以讓專案的使用者體驗更好。

我們先進到專案裡面，右邊點選Prototype，就可以看到中間的設計會有一些不同

每個元件都可以被選取，被選取的元件旁邊會出現一個小圈圈，這個是可以拖拉的，也就是建立物件與物件之間的連結。

以左上角選單的按鈕為例，我們將他拉去右邊的畫面，目的是讓使用者點選按鈕之後，會切換成第二個畫面。

可以選擇要用甚麼動作觸發這個畫面，有拖拉跟點選之類的，這邊我用點擊按鈕，且會有慢慢滑出的動畫。

第二個畫面我們讓箭頭符號有動作，如果整個專案的畫面太多了(畫面很亂主辦單位管一下)，打開Option這個頁面的上一個畫面不一定會是Homepage，這時候就可以將prototype連到back，這樣點選之後就會回到上一個畫面啦~~

全部完成prototype的連結之後，點選右上角的：

就可以試著操作看看整體的效果如何囉，畫面有處理prototype的元件會反藍一下子，讓使用者知道哪邊是可以點擊的

都處理完了就可以開放權限，讓其他使用者透過網址連進來操作畫面啦！

結論

到目前為止都只是稍微介紹一下工具，下一篇就是我完整的wireframe跟UI設計啦，文章當中還會有第一個禮拜的總結，跟未來可能的走向，畢竟我也是第一次實際開發Android APP，會發生甚麼事情我也不知道！直接換主題也是有可能的。

下一篇件寫寫打家打家擺掰。