Figma教學｜Figma網頁設計UI/UX工具比較＆Figma費用介紹！

大公司都在用！Figma究竟是何方神聖？

近幾年協作軟體崛起，設計領域也不例外，這次要介紹的就是短短幾年以黑馬之姿出現的設計協作軟體Figma，是什麼魅力讓Airbnb、Google、Spotify這些大企業都在用它？甚至讓Adobe心甘情願以翻倍的價值收購？接下來將為你揭開Figma的面紗。

（一）Figma是什麼？為何能迅速擄獲設計師的心？

雖然在台灣應用仍不算普遍，但現在可以看到網路上出現許多Figma UI設計的搜尋結果、Figma作品集，或是利用Figma網頁設計的相關資訊。所以Figma到底是什麼呢？

Figma是一個向量圖形編輯器和原型設計（Software prototyping）工具，主要於網頁進行，透過macOS或Windows的桌面應用程式可啟用離線編輯功能，檔案待連上網路後上傳雲端；用於手機Android和iOS的配套程式則同為Figma，其中 Mirror功能可以在行動裝置上檢視Figma原型。

使用Figma下載桌機版雖然並非必要選項，在瀏覽器上也可以輕鬆操作，但是為了避免網路連線不穩等突發狀況，許多使用者仍然選擇將Figma軟體下載下來，載點在Figma官網的Downloads處都能輕鬆找到：

可以看到桌機版及手機APP程式都有提供，而最右方的Font Installers主要是讓網頁版也能使用本機的字型，若是較常使用桌機板則不一定需要下載。

（二）除了Figma軟體，FigJam又是什麼？

看完本體Figma介紹，接下來看到另一項產品FigJam。FigJam與我們常用的像是Miro、Jamboard等線上白板軟體相似，以更單純的方式呈現並貼上便利貼，能夠進一步匯入Figma檔案做使用，讓非設計人員就算沒接觸過Figma的元件也可以透過其他設計師上傳共享，而在FigJam上的討論結果也能再複製回到Figma上且仍保有動態更新。

在FigJam之前，原先許多設計師運用Figma進行Figma流程圖的繪製，後續推出的FigJam包攬了此前段流程以及其他像是Brainstorming的進行，並將相關功能優化，以及同樣保有即時溝通的特性，讓往後的初期討論能更直覺地在Figma匯入後直接進行產品設計，擴大非設計專業人員的使用。

Figma優點有哪些？與其他2個主流軟體比較給你看

回到今日主題，UI設計軟體Figma在2022年被選為設計師最常用及好用的第一名，又是什麼因素讓它從競爭者中勝出呢？本段將比較它與另外2種UI設計主流的系統，以及彙整Figma優點給你看！

（一）Figma XD比較

常看到UI設計師所謂與XD的比較，其實也就是指Figma Adobe XD比較的意思，以下就這2個軟體的特性介紹給你看：

1. Figma：

承前面所述，Figma一切動作都可以在網頁上進行，且檔案存於雲端無容量限制便是一個非常大的優勢，加上產品設計的過程常需要與PM、工程師等同仁合作，協作功能強大也是另一個吸引設計師使用的關鍵，若是不需要太多精緻畫面的產品互動導向的介面設計，Figma會是良好的選擇。

2. Adobe XD：

相較Figma檔案修改能夠即時上傳，XD設計檔仍需執行上傳雲端的動作，雲端容量有所限制，且使用上有部分Lag的問題，相較來說可能協作功能稍弱。但若是有動畫精細的需求，以視覺為導向的介面設計會很適合用XD，可以回到Adobe系列產品製作之後再回過頭使用XD，整合度較高。另外如果已經很熟悉Adobe系列產品的設計師，在使用上會更直覺，幾乎沒有入門的陣痛期。

（二）Figma Sketch比較

另一款UI設計主流軟體Sketch可以說是設計師們的愛用始祖，又是什麼讓年輕的Figma能夠與它並駕齊驅呢？

1. Figma：

除了桌機版，瀏覽器也能用，不受系統限制是Figma能夠勝過Sketch的原因之一，相較之下Figma收費親民，且Figma Protoype輸出展示相較之下較為完整。

2. Sketch：

Sketech最大的限制在於只能在MacOS使用，許多設計師在初期甚至為了使用Sketch的功能而購置Mac。Sketch在Figma及XD面世之前就已推出，所以在當時來說已經是非常足夠的系統。現今看來訂閱價格偏高，Prototype功能在競品出現後才增加所以相對較弱。儘管如此，對於設計師來說Sketch的入門門檻較低、外掛程式也較多的特點稍微勝出，且仍然有許多人是Sketch的鐵粉，目前來說還是有一定的使用者基數。

（三）Figma優勢特色總整理

看了這麼多比較，所以Figma的好處究竟有哪些呢？這邊4大優點一次統整給你看：

1. 功能元件操作友善：

Figma作為設計軟體，基礎功能如排版、素材更動等以節省設計師時間為出發點，發展出更多針對改善設計師痛點的智能工具：如Auto Layout、Smart Selection、Constraints等，後續段落將會詳細介紹。

雖然為了易於操作而需要捨去一些較繁雜的功能，但目前對於許多設計師來說仍是利大於弊，且一些欠缺的部分也能以外掛程式補足，整體工作的協作流程迅速許多。

2. 即時協作能力強大：

強大的協作功能也正是Figma快速攻占設計師心中地位的因素之一。雲端同步讓大家不需要再把無數個檔案來回傳送，版本若有更新即時檢視。留言反饋的功能也不再影響到設計原稿，還可以使用觀察模式，在同一份檔案中點擊其他使用者的頭像，就能跟著他的視角移動，不用再以分享畫面的方式進行，直接口語傳達即可，節省許多時間成本。

3. 原型輸出體驗良好：

UI及UX設計師其實最終都需要展示介面互動的過程，能夠將介面設計流暢地轉為Prototype也是Figma的優點之一。Figma Prototype內建的動態轉場功能可以快速輸出展示，用來檢視使用者是否能如預期中擁有很好的互動體驗。而Figma APP中的Mirror還可以接近真實呈現的方式觀看Figma原型。

4. 檔案連結分享方便：

同上述所說，除了檔案不用再持續更改檔名傳來傳去，若需要進一步共享檔案，可以直接點擊右上方的分享，就能夠將檔案以Email或是連結的形式提供給他人，讓相關者在網頁上就能做檢視，並管理檢視權限。也因此有許多人將Figma比喻成設計領域的Google docs。

除了優點以外，唯一能被稱作Figma缺點的就屬網路連線的問題，可能資源過大時載入時間會拉長，且無法即時編輯。但多數設計師認為這並非太大的問題，網路的布置現在已越來越普及，且Figma存檔在本機為檔案.fig仍能持續離線編輯，有網路時再讓它更新即可，整體來說瑕不掩瑜。

Figma教學快速入門，元件介紹到外掛程式一次看

看完以上介紹後，可以發現其實Figma不只對於設計師友善，產品經理以及前端工程師也能夠受益！如此好用的Figma究竟要如何操作？除了手把手教學，想知道好用外掛程式的也要看這裡！

（一）Figma使用從註冊到認識工作區域開始

Figma註冊與許多網站大同小異，點擊Sign up即可創建帳號，或是使用Google帳戶登入以及建立自己的團隊。

進入Figma之後，工作區域主要有3大板塊：

1. 最左方的圖層面板（Layers）：

所有的物件類型與名稱都會出現在此以便瀏覽物件之間的關係，圖層先後順序會影響顯示方式，可任意移動或將相關的物件組成群組；右方的Assets選項，先前若有儲存過使用的Components時才會出現可重複使用的物件。

2. 中間的畫布區域（Canvas）：

設計工作的區域，可以無限放大延伸縮放，所有的視覺呈現的設計內容都會在此顯示以及進行調整。

3. 最右方的屬性面板（Design）：

修改畫布區域選中的物件屬性，例如調整顏色、文字大小、設定效果、對齊方式等，會根據選取之元件不同有相異的選項；中間的Prototype可以選擇要呈現的原型尺寸，目前裡面含有不同機型的產品，也能夠自訂尺寸；右方Inspect一開始會有連接到FigJam的選項，可以快速檢視選取物件的屬性，CSS也會在此出現。

Figma中文版本目前並未推出，但設計內容支援中文字形，網路上也有許多Figma中文教學可以觀看，後面也將分享一些資源給大家參考。

（二）從Wireframe繪製到Prototype輸出的流程認識Figma功能

若想要了解Figma元件功能，就需要從產品設計流程說起。產品設計流程依序可從線框圖（Wireframe）、視覺稿（Mockup），到原型（Prototype）等作分類，而Figma幾乎可以完成全部。藉由這項流程，我們可以認識Figma具備的設計元件功能：

1. Figma Wireframe教學使用之元件工具

為最粗略的設計，主要是釐清此次產品需求，確認最終應該留在上面的主要功能。也因為這是以功能為導向的階段，必須先忽略所有視覺相關要素，聚焦在功能區的規劃，在Figma Wireframe的部分可運用到以下元件：

• 框架（Frame）：

設計的基礎元素也是第一步，創建大多數物件的最頂層容器。可以自訂尺寸、Figma也提供一系列適用在不同裝置的框架大小，也可以在一個大的框架裡面放更多的小框架。

• 約束條件（Constraints）：

只要選擇要對齊的位置，就算任意調整框架，元件也會自動移動到相對應位置。可以定在左或右、置中、左右兩端則類似RWD，從此不用在手動調整尺寸或是擔心物件跑位。

• 組件（Components）：

當設計某些經常重覆出現的元素時，需要確保它們的一致性，如果設計師需要一個一個修改這些分散各處的元素非常容易出錯且要花費很多時間，Figma Component就是為了解決這個問題誕生。首先需要先設計出Main Componet，在從它身上拉出所謂的分身（Instance），轉化成組件的物件也會保留在剛剛看見的Assets區，以便下次使用。一旦Main Component有變化，其餘分身也會隨之修改，如此一來更方便檢視一致性也提高設計效率。

詳細的Figma Component教學建議至Figma官網檢視或是以影片的方式參照。

2. Figma Mockup教學使用之元件工具

UI設計師會在此階段根據確定好的Wireframe介面使用繪圖軟體進行視覺上的設計，像是配色、動畫、版面配置等，加強使用者體驗產品功能的效果，基本上Mockup會和最終產品樣貌一樣，只是還無法操作功能。簡單來說，Mockup就是經過視覺設計的Wireframe。

• 圖標（Icon）：

圖標是Mockup很重要的第一步，用以豐富畫面設計。起初Figma Icon多數依賴外掛程式尋找，但也因為Figma布局與一般設計軟體很像，漸漸有許多設計師選擇在Figma自行繪製Icon，出現許多進階版的Figma Icon教學能夠參照。

• 樣式（Styles）：

Styles主要運用在顏色及文字的樣式儲存，以便在團隊設計中重複使用，像是固定的品牌配色或是慣用字型。若是在Styles中做更動，則使用這個屬性的所有物件也會隨之修改，與Component的作用有些相似，只是主要針對屬性可以做一次性的調整，以便維持一致性。

• 智能選擇（Smart Selection）：

這個功能可以一次性快速調整多個物件的間距或是點對點對調位置，不需重新手動調整排版。

• 自動排版（Auto Layout）：

針對每個物件的水平或垂直排列方向及間距做設定，如同真的網頁展示，當有大量的表格需要做設計，其中幾行需要改順序時，以滑鼠拖曳就可以換位置，一樣不用手動調整。表格的寬度修改時，其他欄位會自動隨著新寬度往旁邊移動，而不會像在Excel中操作其中一欄修改，全部版位都跑掉。

稍微進階設計中的網頁水平捲動效果便是靠這個功能設計。

3. Figma Prototype教學使用之元件工具

最後則是進入工程師的開發階段，同時間已具備了實際視覺設計與產品功能。簡單來說，Prototype就是已經具備動態互動功能的Mockup。

• 互動設定（Interaction Settings）：

當有了各自設計好的頁面以及它們之間的畫面互動流程，便可以在Figma中設定各自元件被觸發時應該執行什麼動作。舉例來說：當首頁的其中一個圖標被點擊時，就要顯示選單的頁面。此時可以選取上述所說的圖標，將出現的箭頭連接到指定出現的畫面，如此一來就設定好其中一項互動設定。

• 展示（Present）：

完成所有的互動設定，可以點選最右上方的Present，檢視整體互動設定是否依照預想中移動。

• 輸出（Export）：

Figma輸出支援PNG、JPG、SVG和PDF格式，儘管Figma許多功能都很強大，但仍屬於UI設計類工具，成品還需後續工程師的協助。因此不論是Figma輸出html語法又或是Figma輸出網頁，都需要借助外掛程式或是專業團隊的力量才能進行。

• 共享（Share）：

前面我們曾提及共享功能是Figma最大的優勢之一，只要點擊Present左邊的按鈕，就能夠選擇要將檔案寄給誰或是直接複製檔案連結，也能在此設定觀看權限。

• 歷史紀錄（Version Hostory）：

常常擔心老闆或客戶還是喜歡第一版的好幫手！只要點擊檔名，選擇Show Version History，上面都會記錄修改時間與修改的使用者，不用擔心有沒有存檔的問題，也沒有一堆的微調檔案佔據電腦容量，還可以命名修改紀錄，完成一個段落後做系統性的命名，更快找到所需檔案。

但要注意的是免費版只能回朔30天的版本紀錄，一旦過了期限一樣會不見喔！

（三）Figma Plugin好用推薦，設計流程更順暢

Figma本身功能就很強大以外，也提供許多外掛程式的應用讓設計流程能夠更加分也更順暢，接下來不藏私，10個好用且榜上有名的Figma Plugin推薦給你！

1. Autoflow：

雖然現在有FigJam支援繪製流程圖的功能，但若是習慣在Figma上進行所有事務，Autoflow會是一個好幫手，它可以在元素間自動生成流程箭頭，不用再進行手動標註。

2. Iconify：

集結了100個圖庫，超過100,000免費向量圖標可以使用，搜尋關鍵字找到喜歡的圖標即可代入使用，使用紀錄會進行儲存也很方便下次再運用，懶得自行製作圖標的設計師們也可以善用此外掛程式。

3. Unsplash：

全球最知名、許多設計師在用的免費高畫質商用圖庫之一，可以進行搜尋也可以插入隨機圖片。

4. Blobs：

一鍵快速生成各種不規則泡泡形狀的SVG向量色塊，可以設定複雜程度、色彩及節點。當設計風格中需要很多長得不同的斑點或泡泡時，Blobs能以最方便迅速的方式完成。

5. Lorem Ipsum：

當文案尚未產出，但又需要有文字填充檢視排版時，Lorem Ipsum是最佳利器！只要選擇字數以及是否需要標點符號並按下執行，馬上跑出假文字區塊。

6. Content Reel：

由Microsoft團隊製作，屬於內容填充的一種，不同的是Content Reel會生成包含姓名、電子郵件、公司名稱、網址、個人照片等虛擬使用者相關的一切內容填入設計中。

7. Vectary 3D：

與其他外掛程式功能較為不一樣，Vectary 3D可以將你的設計Mockup在3D模型上，除了可以調角度檢視，完成後還能輸出圖片，有書本封面、卡片、手機等產品的模擬。

8. Super Tidy：

強迫症的好朋友，輕鬆對齊整理畫布框架及重新命名，當有分散的框架或是許多圖片需要處理圖層關係時可以使用。

9. Image Palette：

從選用的圖片當中提取5個關鍵顏色的調色盤，適合需要讓整體風格顏色和諧，看起來一致時使用。

10. Figma to HTML：

前面曾說到，若是想要讓Figma輸出網頁或html語法需要依賴外掛程式，全選之後執行Figma to HTML後，會自動生成html代碼。

好用Figma模板哪裡找？4網站介紹給你

相信大家現在了解為何Figma是許多設計師的心頭好了，但是對於怎麼從空白的畫布中產出仍然一頭霧水嗎？別擔心，現在網路上可以找到很多Figma素材以及Figma免費模板，以下也介紹4個網站給你參考。

（一）Figma Community官方資源

官方資源分享，有提供基本模板及實用文章指導如何使用Figma，在這之中也有許多使用者製作的外掛程式讓大家分享交流。

（二）FigmaCrush

免費下載使用模板、圖示、插圖包及 Mockup等資源，號稱是最大的Figma免費資源平台。

（三）Figma Finder

一個免費共享Figma模板及套件的平台，雖然數量比起來相對較少，但品質高。

（四）Figma Resources

最後一個也是讓設計師共享Figma模板及套件資源的網站。選擇所需資源後，按下「 Copy to Figma」會在Figma中打開檔案，也可先預覽。

Figma費用怎麼算？免費版與付費版功能差異

相較於Figma的強大性，它的價格平易近人，Figma方案目前有4種可以選擇，以下是根據費用不同提供的功能及限制（圖中為美金計價）：

（一）Figma免費方案

免費版功能很適合新手開始Figma前先練習手感，基本上該有的功能都很足夠，只是當然也會有較多的限制：

• 無限雲端儲存空間
• 30天版本歷史記錄
• 3個項目
• 2個編輯者
• 團隊樣式庫（Styles）

（二）Figma專業版本

專業版提供功能如下：

• 無限雲端儲存空間
• 無限版本歷史記錄
• 無限項目
• 無限編輯者
• 團隊樣式庫（Styles）
• 團隊組件庫（Components）
• Slack集成（評論通知）
• 私人項目（團隊內可以建立私人項目，只有透過邀請才能加入）

（三）Figma企業專案

企業專案的價格分為兩種，為更大型的企業提供個人化的服務：

• 無限雲端儲存空間
• 無限版本歷史記錄
• 無限項目
• 無限編輯者
• 團隊樣式庫（Styles）
• 團隊組件庫（Components）
• Slack 集成（評論通知）
• 私人項目（團隊內可以建立私人項目，只有透過邀請才能加入）
• 24小時客服
• 無限團隊空間
• 無限團隊項目
• 文件所有權
• 團隊資源庫（設計系統）
• 共享字體
• 高級系統控制
• 高級隱私設置

更詳細的功能介紹及方案差異可以點擊Figma Price／Pricing檢視。 另外Figma也提供教育版本，只要是教職人員或學生，可以試試申請並免費使用Figma專業版的所有功能。

Figma課程及資源推薦：從初階到進階通通有

（一）好用社群資源

坊間也有許多與UI設計相關的社群都開始介紹Figma的相關資訊，當缺乏靈感時也很適合到以下資源尋找方向：

• Figma Community官方討論區
• Instagram：socialmorehk

（二）實作課程推薦

若想要跟著一步一步操作，也可以善加利用影音資源免費或是付費學習，像是：

• YouTube：Papaya電腦教室、六角學院
• Hahow：產品設計實戰：用Figma打造絕佳UI/UX
• Coursera：Figma系列課程

上述就是Figma的介紹及簡短教學，對於Figma軟體是否有更進一步的認識了呢？如果想要定期獲取數位行銷的最新知識，快快在下面留下聯絡資訊訂閱Welly電子報吧！

延伸閱讀：

SEO是什麼？2023 SEO 搜尋引擎優化入門指南！

2023 SEO公司推薦名單！ SEO排名價格及選擇SEO公司

內容行銷是什麼？4大經典內容行銷案例看內容行銷定義