Figma UIUX Prototype

利用Figma製作Prototype

陳思茹 Ruby Chen 2021/11/18 10:00:00
94

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 scrollingFigma會自動設置為可以上下滾動,除非欲顯示的內容是固定在某個區塊內,這時候才需要設置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即可將網址分享給他人

 

 

除了繪製UIUXFigma對於製作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

陳思茹 Ruby Chen