新UI設計神器Figma到底有何亮點?

作者：李啟宏   精誠資訊恆逸教育訓練中心 資深講師

異軍突起的專業UI設計整合工具-Figma，不但是免費使用，而且是只要連上網就可以隨時設計UI的工具。

Figma以瀏覽器為載體，依靠網路，全程在網頁瀏覽器線上操作，並且Figma 可將所有設計檔案儲存在雲端隨開隨用，透過 Figma 的線上協作功能，隨時皆可讓團隊成員都能參與設計流程，在國內外已是非常熱門的介面設計工具，許多大公司的設計團隊皆已正式採用 Figma 為主力設計工具。

請至Figma首頁（https://www.figma.com/）按下右上角的Sign up註冊按鈕。可以選擇google帳戶登入，或填寫E-mail，接著填入暱稱及選擇常使用類別，建立Figma帳戶，即可開始免費使用。

那在具體功能使用上，Figma到底有何亮點? 

n   快速上手的設計繪圖工具

為了要讓所有使用者均可完成UI設計，因此在繪圖工具與編排功能上，均以直覺方式操作，絕對可以讓非設計相關使用者也可以輕鬆開始繪圖與設計，而對於專業設計師更可以與其他設計軟體完整整合。

n   超有效率的編排工具

Figma在編排上，提供了【對齊Align】、【編排框架Frame】、【群組Group】、【遮罩Mask】、【樣式style】，善用這些編排功能就更能仔細做好UI設計的精準對齊與編排設計。

而進一步的響應式約束（Constraints）內容定位、自動佈局（Auto layout）物件編排，各個都是讓你眼睛為之一亮的功能，讓繁瑣的UI畫面設計編排超有效率快速完成。

響應式約束功能以建立編排框架Frame為前提，即當設計師將編排框架Frame尺寸進行變更時，編排框架Frame內的元素會自動按照預先設定的規則固定位置，另外還可同時進行拉伸與縮放物件。

自動化佈局工具是製作複雜元件的核心技巧，可隨時由物件、群組、畫框建立自動佈局，即可構建出高自由度，且能夠根據真實填充資料自動佈局的超級元件，這樣構建的元件一方面還原了真實場景下的設計效果，一方面大大減少了設計師重複性工作。

自動佈局按照常規佈局空隙規則劃分為三個屬性，分別是【元素間空隙】、【左右空隙】、【上下空隙】。調整大小包括【適應內容Hug Contents】【填充容器Fill Container】【固定寬度Fixed Width】等。

n   全域性組件管理

設計組件化的概念是從程式的開發模式中演變而來，是將介面拆分成更小部分組件使之易於管理的方式，是為【組件（Components）】。原始定義的組件是【父組件】，複製出來的組件是【子組件】。以父子關係比喻是因為，在組件邏輯中，【父組件】有變化，【子組件】們會繼承，同步變化，這絕對是在設計UI時必須要的設計內容物件管理方式。

組件（Components）是Figma在UI編排提供的進階功能，可以重複利用設計中的現有部分，從而節省了其他重複而繁瑣的工作。

n   高保真可互動原型設計

開發者對於產品一定有各式各樣的想法，並盡力讓使用者覺得產品「好用」。但開發者該如何確定目前產品設計走向能讓使用者覺得好用？ 我們可以透過【可互動原型設計 Prototype】測試使用者想透過產品完成某項任務時，需經過哪些頁面的切換流程；觀察使用者在操作過程中是否有感到任何不順或遲疑的地方等等。透過實際操作介面給其他人具體了解你的想法。跟工程師溝通時可以展示轉場效果細節、操作邏輯，有了實際討論的素材，工程師可以在可行性評估上做出更好的判斷。

Figma可製作高保真的互動原型，無縫完成從設計到原型演示的切換。包括【互動操控方式】、【畫面切換方式】、【動畫類型】、【滾動時固定位置】、【區域內容捲動】、【智能動畫切換】、【滑上與疊加】，均能輕鬆完成，完成最完整專業的UI設計與可互動原型。

✅建議學習推薦

📌Figma專業UI設計實作
📌Photoshop與Illustrator專業App UI介面視覺設計
📌前端網頁與UI設計師轉職就業養成班