Figma是什麼？為什麼UI設計師都愛用它？本文將會告訴你設計師對figma欲罷不能的原因以及Figma入門所需：界面操作、常用工具、收費方案比較、超強外掛推薦，絕對不能錯過的Figma教學！
Figma是什麼？
最夯的UIUX設計軟體
Figma是現時在UI UX最受設計師歡迎的設計工具。不過由於它暫時沒有提供中文辦版本，所以在台灣使用Figma的人數暫時還不多。不過根據一項國外平台2022年度的UI設計工具調查報告，Figma已經超越了Sketch成為業界的第一名。
根據維基百科Figma是一個向量圖形編輯器和原型設計工具，主要用於網頁進行工作，通過macOS或Windows的桌面應用程式可啟用離線編輯功能。
我們來看看在Youtube Figma的自我介紹：
其實Figma早在2016年已經發佈，為什麼最近越來越夯呢？連美國軟體公司Adobe也在2022年以200億美元收購Figma？
設計師都愛用的原因
即時同步協作功能
對於設計師而言，這個功能簡直是從無限溝通無限修改的輪迴中解救了他們。設計師們可以通過這個功能與團隊成員進行溝通，對作品的反饋 ，節省了溝通成本，從此很少再出現版本1.0,版本1.1,版本1.2,版本1.3,版本2.0……等尷尬的局面。
Figma以網頁版為主，從設計到規格交付這個流程都可以直接在同一個工具內處理，不用在不同的工具中切換最後迷失自我，極大地提高了工作效率。雲端技術的應用也能保證在何時何地都能處理到檔案，亦能夠以連結的方式分享。
對比其他的工具如Sketch與Adobe XD，Figma除了是介面設計軟體，也是一款設計協作軟體。
界面操作友善
既然是專業的UI設計軟體，Figma在操作界面上也是花盡了心思。Figma心知對象是設計師，所以在設計上會以方便設計師使用為出發點，本身是UIUX做到極致的成功案例。
快速檢視效果
要讓使用者有良好體驗，設計師需要真實地檢視效果。而Figma內建的動態轉場功能就可以允許設計師實時地檢視所做的設計是否有達到讓使用者有良好體驗的效果，這樣才能讓每次檢視中修改，提升使用者最終的體驗感受。
Figma收費方案
Figma有提供免費版本和3個付費版本，不過暫時Figma並未推出中文版本，暫時只有英文、日本及法語。大家可以先到免費版本使用了解其基本功能。詳情可以到Figma官網了解方案。
免費版
轉用設計軟體，最讓人糾結的是需要重新適應，即是知道它的功能多麼好。Figma有提供免費版本，對於新手來說功能已經足夠，而且好處是終身免費的，包括：
- 有3Figma設計檔案和3個FigJam線上白板使用權
- 無限的個人文件
- 無限的雲端容量
- 無限的合作者
- 外掛及範本
- Figma APP
不過免費還是存在限制，例如只提供30天的版本歷史記錄、無原型共享權限、無語音對話功能等等。
Figma的付費版本提供3種收費方案，年繳的話會有優惠：
專業版12美元/月
除了免費版的功能，主要是：
- 無限的項目
- 無限版本歷史記錄
- 無限編輯者
- 設計系統：4個模式選擇
- 可設定變數、條件邏輯、多個動作等
- 允許設定私人項目等。
組織版45美元/月
組織版相對於專業版主要新增了以下功能:
- 在組織範圍內的設計系統
- 字體共享
- 設計系統分析
- 私人外掛及Widgets
- 以及在管理和安全性上更為完善
企業版75美元/月
企業版是最高的版本，新增的功能包括：
- 可分享工作平台給外部客戶，讓客戶了解進度（Custom Workspaces）
- 設計系統：多達40個模式選擇
- 按工作區劃分預設圖庫
- REST API可變
- 以及更多高級系統控制及隱私設置。
教育版
Figma與Canva相似，亦有提供教育版，功能與專業版相似，不過只提供給學生及教育者使用。不過在需要先經過Figma的驗證通過，才能使用教育版。申請資格包括：有兩大類：
教師及13歲以上學生，可以通過註冊申請；
13歲以下的學生則通過學校與Figma聯繫並申請。
Figma功能
Figma Plugin
Figma的設計更從設計師出發，所以在界面的設計時會捨棄一些複雜的功能。如果在使用時需要其他額外的功能，就可以通過外掛Pludig來補充了。以下是一些常用的人氣高的外掛推薦：
Autoflow
這個絕對不能少，因為這個外僱可以讓你輕鬆設計界面流程，重點是它可以節省你很多的時間，因為你只需要使用這個外掛，按著Shift，然後選取兩個畫框就能完成流程線，會在元素間自動生成箭頭。免費版可以提供一個檔案建立50條流程線，真心推薦！
推薦指數：★★★★★
WebGradients
如果對於配色沒有概念，安裝這個外掛就最好了，因為連Disney、Apple都是使用WebGradients進行配色。你可通過更改預設的平行線性漸層來更改模式或是自由調整角度。
推薦指數：★★★☆☆
Phsphor Icons
這是有知名的Icons網站Lconduck推出的Icons外掛，提供超過30萬中Icons可供免費下載。而且不少Icons還能提供個性化的修改如改變顏色、更改線條粗細等等。
推薦指數：★★★☆☆
Blobs
如果要設計不規則的SVG圓形，建議你使用這款。因為有超過40萬人都在使用，操作簡單，因為它只有Complexity（邊角曲線）與Uniqueness（形狀）兩個選項去調整，就算不熟悉鋼筆工具設計曲線也能輕鬆完成！
推薦指數：★★★☆☆
Icons8 Background Remover
怎麼可能少了去背的工具，這是由Icons8推出的AI去背外掛。選擇Remove Background一鍵去背，輕鬆，效果還很讚！
推薦指數：★★★★★
Mockup
平面圖轉為3D圖，效率再提升。選擇你喜歡的模板，透過這款AI就能完成一個精美的3D設計。任何圖形甚至文字都可以，不過有些模板是需要付費的。
推薦指數：★★★☆☆
html.to.design
可以直接講HTML網站直接轉入Figma設計，你只需要複製網站的連結，就能快速生成與這個網站一模一的設計，而且並會在Figma左上方的列表中看到網站的各個元素的圖層，這個時候就就可以針對每個圖層等元素進行設計。不過每次只能轉一個網址，不然付費升級就可以解決這個問題。
推薦指數：★★★★☆
Figma to HTML
如果要輸出HTML語法的話，安裝這個外掛就能自動生成HTML代碼了。
推薦指數：★★★★☆
Google Sheets Sync
當有大量的文案需要對應設計稿時，這個外僱就能直接同步Google表單中的資料。表格文字直接置換成文案的同步神奇！
推薦指數：★★★☆☆
HyperCrop Batch Image Resizer
批量處理是提升效率的方法，而這個外掛就可以協助批量裁剪圖片或是調整尺寸，當然你要單個剪裁肯定沒有問題。它還可以使用自動辨識檢測，現在你終於知道隔壁組的設計師為什麼那麼快完成？安裝了它你也可以！
推薦指數：★★★☆☆
Figma模板
與Cavna一樣，如果毫無靈感頭緒，不妨可以參考模板。Figma本身在Community中有提供很多官方資源分享，不妨可以多加利用來激發設計靈感。另外上文提供的外掛Mockup也能提供很多不錯的模板。
Figma 教學（入門版）
註冊Figma
要使用Figma第一步當然要先註冊，可以按這裡進入Figma的官網，然後按Get Start便可透過Google 賬戶或是指定的電郵來輕鬆註冊了。
創建設計檔案
我們就會進入Figma的界面，按右上角的+Design file就可以創建一個新的檔案。
界面介紹
Figma界面很簡單，編輯器有三大的板塊，分別是左邊圖層Layers Panel；中間的畫布Canvas以及右邊的屬性（Properties Panel）。
圖層，與Photoshop的原理一樣，即是用階層列表的方式來顯示所有的物件類型與名稱，我們就可以通過圖層來知道物件至今的關係以及選擇對制定圖層的物件進行編輯。
畫布，即是我們創作的地方，最主要的設計區域。
屬性，這個我們就可以通過選擇不同的屬性設計，例如顏色的設置、陰影效果、文字大小、字體、排版等等。
設計流程
我們在使用Figma之前需要先了解它的原理，才能知道每個步驟中有哪些工具我們是需要掌握的，基本上會經歷這三個步驟：
線框圖（Wireframe）
這可以理解為設計的初稿，可以指包含線條或是方塊，需要的是專注在佈局、功能和操作上。Wireframe都是靜態的，不會動也不能操作的。作用是確定最終產品的需求來安排功能。這個將會是之後步驟的導向，所以這個步驟請聚焦在功能區的規劃。在這個步驟中，最常用的工具包括：
- Frame（框架）：創建框架是畫面設計的第一步，系統有提供一列預設的框架尺寸適合各種裝置，如Iphone、Anroid、電腦、智能手錶等。當然，你也可以自訂尺寸。
- Constraints（約束條件）：用於設定元素在不同框架大小下的自動調整方式，確保佈局的彈性。
- Components（組件）：通過設定組件可以在Wireframe中多次重複使用，以提高設計的一致性。
視覺稿（Mockup）
當確定好框線圖後，UI設計師就會在這個步驟進行視覺化的設計，即是例如加上顏色、動畫、版面排至等，來增加使用者最後的體驗效果。這個時候還沒有串接後台資料，所以也它是靜態的，不會動也不能操作。常用的元件工具包括：
- Icon（圖標）：豐富畫面的設計，增強使用者的體驗。
- Auto Layout（自動佈局）：這個可以確保元素在不同尺寸上的排列方式。
原型（Prototype）
這是最後一個步驟，在Prototype是會動的也可以直接操作的。雖然還沒有發佈上線，但由於已經能操作，設計師就能真實的知道效果。常用的元件工具包括：
- Connections（連接）：連接不通框架之間的轉換和互動工具。
- Interaction Settings（互動設定）：在特定時間發生時之要執行的動作。
- Present（預覽）：用於檢視整體互動設定的效果。
- Shareing（分享）：通過連結的形式把原形讓團隊成員或使用者直接在瀏覽器上執行。
- Version History（歷史記錄）：這個功能絕對讓設計師們有共鳴，因為客戶選擇的並非是最後一個版本。系統會自動記錄和儲存，這樣就不怕善變的客戶改變主意挑選其他版本了。
輸出
Figma的檔案輸出類型可以有PNF、SVG、JPG及PNG格式。如果網頁設計的步驟還需要經過工程師的協助，則可能有需要以HTML語法或是網頁的形式輸出，這個時候就可以安裝我們在上文介紹的Figma to HTML外掛協助了。
總結
同步協作軟體可以讓團隊的溝通效率更高，不妨現在就開始使用Figma，感受當中的威力吧！如果企業有不同的項目，亦可參考Monday.com這款CRM同步協作軟體，亦可提升各部門之間的溝通效率！
延伸閱讀：
《2024年行銷人必備行銷軟體名單，超過70款實用數位行銷工具推薦（附使用心得）》
《2024年最新SEO教學指南，技術、工具、步驟看這篇就夠》
《2024 Google Ads之終極指南：全面拆解關鍵字廣告及優化技巧》
想知道您的網站健康程度嗎？請填寫以下表單，一分鐘立即領取網站健檢報告！
希望獲得搜尋引擎行銷的服務嗎？請立即聯繫萬智匯行銷顧問，我們將致力為您提供全面的Google Ads與SEO方案，秒速提升您的網站流量促成更多轉化！
