利用Figma製作Prototype
Figma除了是方便的UIUX設計工具之外，也能進行Prototype的製作，無須外掛其他軟體，讓設計師能夠更快速地進行畫面的演示，並同步調整相關設計。
以下將介紹製作Prototype的基本操作以及相關應用功能，讓Prototpye更趨近於真實產品。
1. 如何製作Prototype
step1 : 將右上方的模式切換至Prototype
step2 : 點選觸發元件
step3 : 連接至觸發後畫面，也可設定觸發方式與動效
step4 : 在右方面板設定Prototype顯示裝置尺寸
step5 : 點擊右上方播放鍵即可操作Prototype
2.溢出行為(Overflow behavior)
溢出Overflow，指的就是內容超出框架的範圍，使用者必須左右或上下滾動才能看見更多內容，以下介紹較常用的3種溢出行為:
水平滾動Horizontal scrolling
內容的寬度超過顯示裝置的寬度，需要讓使用者能夠左右滾動看更多資訊
step1 : 將要能夠進行左右滑動的元件選取並轉換為Frame ( 右鍵 > Frame selection )
step2 : 調整Frame的大小，並在右邊面板勾選Clip content，意即超出Frame的內容不會顯示
step3 : 切換至Prototype模式，在Overflow scrolling下選擇Horizontal scrolling
step4 : 選取該Frame，點擊右上方播放鍵，剛設置的區塊即可左右滾動
垂直滾動Vertical scrolling
超出裝置長度的內容通常不用設置Vertical scrolling，Figma會自動設置為可以上下滾動，除非欲顯示的內容是固定在某個區塊內，這時候才需要設置Vertical scrolling，操作步驟與水平滾動相同，差別在於step3選擇Vertical scrolling
step1 : 將要能夠進行上下滾動的元件選取並轉換為Frame ( 右鍵 > Frame selection )
step2 : 調整Frame的大小，並在右邊面板勾選Clip content，意即超出Frame的內容不會顯示
step3 : 切換至Prototype模式，在Overflow scrolling下選擇Vertical scrolling
step4 : 選取該Frame，點擊右上方播放鍵，剛設置的區塊即可上下滾動
水平和垂直滾動Horizontal and vertical scrolling
即為能夠上下與左右滾動，常見例子為地圖的使用
step1 : 框出一個地圖顯示範圍的Frame，勾選Clip content
step2 : 將地圖的圖片移至Frame裡面( 圖片一定要比Frame大才能夠滾動)
step3 : 切換至Prototype模式，在Overflow scrolling下選擇Horizontal and vertical scrolling
step4 : 選擇該Frame，點擊右上方播放鍵，剛設置的區塊即可上下左右滾動
3.設置錨點
除了能夠連接不同頁面之外，Figma也支援在同個頁面不同元件之間的連接來達到錨點設置的效果
step1 : 若要連接的內容超出Frame框架，則先取消勾選右方面板的Clip content，讓內容顯示
step2 : 切換至Prototype模式，將觸發前後元件相互連接
step3 : 選取該Frame，點擊右上方播放鍵，剛設置的區塊即有錨點的效果
設定錨點時可能會有位置偏移的問題，這時可以修正水平與垂直方向的位置，以下方地圖定位為例，點擊定位後，預計位置將顯示在畫面中央
修正前:
雖設置錨點，但位置不顯示於中央，會移置地圖框架座標(0,0)位置
修正方式:
step1 : 將定位位置移至地圖Frame中央，並記下x,y軸位置(按住Alt/option會顯示該元件與其他元件之距離，右方面板也可查看座標)
step2 : 調整地圖位置，使之為原本定位位置
step3 : 切換至Prototype模式，連接元件
step4 : 輸入x,y軸偏移修正數據(偏移不是正就是負)
step5 : 選取該Frame，點擊右上方播放鍵，先移動地圖至看不見定位位置，再點擊定位，即可顯示修正效果
4.固定元件
將元件固定在畫面上，不受滾動影響，以下以地圖定位icon為例
固定前:
移動地圖的話icon會跟著移動
固定方式:
step1 : 選取該元件，並在右方面板選取約束位置(右方與下方)且勾選Fix position when scrolling
step2 : 選取該Frame，點擊右上方播放鍵，移動地圖但定位icon不會跟著移動
5.分享Prototype
Figma可以簡單的利用網址的方式將Prototype提供給他人，他人只要點擊網址即可看到Prototype，也無須下載其他軟體，對於測試或是分享來說十分便利。
step1 : 點擊右上方播放鍵，進入Prototype頁面
step2 : 點選右上方Share Prototype按鈕
step3 : 可輸入對方的email或是點擊左下方的Copy link即可將網址分享給他人
除了繪製UIUX，Figma對於製作Prototype也是非常方便，基本的點擊切換頁面之外，也有許多其他應用功能，讓設計師可以產出高擬真的Prototype，幫助使用者在產品開發出來前就先了解產品的操作，也能盡早進行改善。
參考資料:
入門FIGMA必看！最詳盡教學（下）如何開始你的設計
https://deerdiary.blog/start-designing-with-figma/
Figma Scroll to Playground (中文版)
https://www.figma.com/community/file/918358489144907161
使用滾動溢出製作高級原型
https://figmachina.com/guide/prototyping/advanced-prototyping-with-scrolling-overflow.htm
