Figma教學大補帖：介面、工具、外掛到原型製作，一次全看懂

Figma教學必讀這一篇！本文從Figma是什麼、有何優勢談起，提供Figma從註冊、建檔、設計、外掛、原型製作到輸出成果的完整教學，並說明費用資訊以及和其他軟體的比較。想深入掌握Figma和UI技術，首選赫綵課程！

一、Figma 是什麼？一起來認識 UI 設計師最愛的工具！

對設計行業動態比較關注的人，或多或少都曾聽過 Figma 這個近年相當流行的設計工具。Figma 目前較常用於 UI 和平面設計，因為有著雲端操作、設計資源豐富、介面直覺並支援多人即時協作等優勢，深受設計師族群歡迎，下面就讓我們一起看看更深入的介紹吧！

 

（一）Figma 是什麼？主要功能有哪些？

Figma 是一款專業的向量圖形設計工具，也是目前 UI 領域最通用的軟體之一，只需要打開瀏覽器，就能開始畫畫！它結合了介面設計、元件系統、原型製作和協作功能於一身，操作簡單直覺，不管你是設計師、工程師，還是產品經理，都能一起在線上同步編輯、留言、討論，不再需要來回傳檔案，稱得上是「設計界的 Google Docs」！

 

（二）Figma 有哪些特色？
為何從設計小白到專業設計師都愛用 Figma 設計？

Figma 的特色和優勢大致有以下 6 點：
 

1. 雲端操作免安裝

只要打開瀏覽器就能開始設計，無須下載軟體，而且跨平台支援 Windows 和 Mac，甚至在平板上也能瀏覽。當然，如果你有頻繁使用 Figma 的需求，也可以選擇下載應用程式版本，方便隨時使用。
 

2. 介面直覺易上手

Figma 的操作邏輯清楚，大多是利用拖拉元件、調整參數來進行創作，連圖層功能都很簡單好用，新手用來練習原型或是介面設計也完全無壓力。
 

3. 多人即時協作，權限系統周全

只需要註冊並登入帳號，就能讓多人團隊同時編輯同一個檔案，還能留言、標註、即時討論，遠距也不怕溝通斷線，非常適合現代的上班模式，跨部門協作也更方便。而針對多人團隊的使用情境，也能設定個別權限與變更管理，讓設計流程更有系統。
 

4. 設計系統完善

Figma 不僅有著豐富的設計資源，更可建立共用的 Design System，包括字體、顏色、按鈕等元件庫，讓整體風格一致、跨專案重用更有效率。如果品牌有慣用的色系和其他 VI 設定，這個系統能幫助新人更快上手，並降低出錯機會。
 

5. 原型串接與動畫展示

Figma 內置原型功能，讓你在提案和溝通時不需要使用額外工具，就能直接建立互動流程與點擊動線，讓企劃、工程師一眼看懂設計邏輯。
 

6. 支援第三方外掛

只需一鍵安裝，即可使用各種實用外掛，例如圖片素材、圖示庫、假文產生器、色彩轉換器、可協作的白板工具等等，幫助你省去重複操作、設計事半功倍！

正因為 Figma 有著以上種種特色，使得它不僅對新手友善，對老手來說一樣能滿足各種進階需求，因此在 UI 和其他平面設計領域都能占有一席之地。假如有意投身這些行業，非常建議你盡早掌握 Figma 技能，才不會在職場競爭中落後於人！

你還沒學會用 Figma 嗎？立即報讀赫綵課程，跟上設計風潮！
馬上報名試聽
 

二、Figma 教學懶人包｜跟著新手指南，踏出 Figma 自學第一步

Figma 的介面簡單，操作直覺，就算完全沒有基礎也很容易上手。以下將從註冊登錄和認識介面開始，逐一介紹設計工具、外掛、原型和輸出等課題，讓你輕鬆完成 Figma 自學！
 

Figma 第 1 課｜認識基本操作，馬上開始作圖

事不宜遲，現在就進入 Figma 開始創作吧！首先，我們需要到 figma.com 註冊帳號，你可以使用 Google 直接登入，1 分鐘就能搞定！登入後會看到自己的檔案總覽，在這個頁面中也能完成建立專案、瀏覽歷史紀錄、加入團隊等操作。此時點選「＋」或「Drafts」下方的「New Design File」，就能建立新的設計檔，來到設計畫面。

我們先來創建畫布（Frame）和區塊（Section）：Frame 是 Figma 中的畫布框架，等同於「頁面」或「畫面區塊」的概念；Section 可將多個 Frame 分組整理，適合做畫面規劃或簡報用圖排版。簡單來說，Frame 是具體的畫畫範圍，而 Section 就像放滿一張張圖畫的桌面，方便你隨時整理。

在這段的最後，為你介紹 Figma 的工作介面和基本功能：介面工具共有 3 大區塊，分別為工具列（下方）、圖層面板（左側）、屬性設定區（右側），除了直接拖拉元件外，幾乎所有的操作都是在這些區塊中完成，基功功能像是調整尺寸、變更顏色、輸入文字、匯出圖片等也不例外。

Figma 第 2 課｜設計工具這樣用，輕鬆產出好設計

接下來，我們進入到工具列的介紹，設計工具從左到右的功能分別是：

● 移動工具（Move Tools）：默認工具，當選擇這個工具時可直接透過點擊、拖拉來選取和移動元件。
● 區域工具（Region Tools）：新增畫布和區塊的位置。
● 圖形工具（Shape Tools）：包括矩形、圓形、線條、多邊形、星星等圖形，點一下即可插入，用來做按鈕、背景、版面架構最實用。
​​​​​​​● 鋼筆＆鉛筆工具（Creation Tools）：自由畫線與自訂圖形的好幫手。鋼筆可精準畫出直線與曲線路徑，鉛筆則適合快速手繪草圖。
​​​​​​​● 文字工具（Text Tool）：點一下輸入標題或段落文字，並支援字體、大小、行距、對齊等細部排版調整。

除了工具列之外，針對設計工具最常用到的是右邊的屬性設定區，在這裡你可以調整位置（X／Y）、尺寸、邊框、陰影、透明度、對齊、排列順序等所有 Figma 元素的細節。

 

Figma 第 3 課｜裝載好用外掛，工作效率 UP

想讓設計速度提升一倍？一定要學會用 Figma 外掛（Plugin）！從自動產生假文、快速套用圖片，到一鍵整理圖層或產生設計規格，通通只需幾秒搞定。Figma 外掛教學如下：只要在 Figma 介面點選「右鍵→Plugins→Development」，就能開啟 Figma 社群，下載成千上百款免費外掛，一用就回不去了！
​​​​​​​

下面我們整理了一些新手推薦外掛，馬上看看哪一款適合你：

● Unsplash：一鍵插入高質感免費圖片，內建關鍵字搜尋功能，幫你快速找到適合的情境照、背景圖，不用另開網站下載再拖進 Figma，超方便！
● Iconify：超過 10 萬個圖示即搜即用，整合 Material Icons、Feather、Font Awesome 等多個圖示庫，設計中常用的 Icon 幾乎都找得到，支援直接插入與樣式調整。
● Autoflow：自動繪製流程連線箭頭，非常適合做使用流程圖、介面導覽圖等，一鍵選取 2 個元件，就會自動生成連線箭頭，不用手動畫線，整齊又省事。
● Content Reel：一鍵填入假資料（姓名、電話、圖片等），讓你的設計畫面更接近真實情境，方便呈現 UI 效果。你也可以客製化生成的類型與內容，並支援多語系。
● Blush：提供多種風格插畫，涵蓋不同的人物與場景，可自由變換顏色與元素，適合為你的圖畫增添活潑感。
 

Figma 第 4 課｜掌握 Prototype 製作功能，模擬使用流程

想讓靜態畫面動起來、呈現真實使用情境嗎？Prototype 原型功能就是你的好幫手！Figma 不只是畫圖工具，還照顧到 UI／UX 實作的需求，讓使用者非常方便地將不同畫面串連起來，模擬點擊、滑動、彈跳視窗等互動效果，不再需要寫程式碼來做展示，也能讓客戶與工程師一看就懂！完整的教學如下：

Figma 的 Prototype 原型製作流程分為 5 步：

1. 切換到 Prototype 模式：點選右上角的「Prototype」標籤，就能開始設定互動連結。
2. 建立畫面跳轉連線：選取一個按鈕或區塊，拖曳藍色小圓點連到下一個畫面，選擇「On click → Navigate to」，就完成簡單點擊跳轉。
3. 設定動畫效果：可選擇淡入淡出、滑入滑出、即時切換等轉場方式，讓體驗更順暢。
4. 加入浮層與疊加效果：想做彈窗、下拉選單嗎？可使用「Open Overlay」功能，製作浮動層級的互動效果。
5. 即時預覽＆分享：點右上角的播放鍵即可預覽，也能產生連結，分享給團隊和客戶觀看互動流程。
 

Figma 第 5 課｜輸出成果、分享作品，大方展示設計力

辛苦完成的設計，當然要好好展示！Figma 支援多種輸出方式，不論是要交付給工程師、展示給客戶，或製作成作品集，都能輕鬆完成。以下是幾個實用操作，幫助你把作品順利亮相。

● 匯出圖片（PNG／JPG／SVG／PDF）：選取畫面或元件 → 右側屬性欄選擇「Export」→ 選格式與倍率，點一下就能下載高解析圖片或向量圖。
● 產出 Prototype 分享連結：點右上角「Share」→ 設定檢視權限，即可產出可點擊預覽的 Prototype 網址，可用於向客戶展示互動流程。
● 輸出 App 預覽：下載 Figma Mirror（iOS／Android）App，登入同帳號即可即時同步預覽手機畫面與 Prototype，模擬真實使用情境，針對設計 mobile UI 最為適用。
● 輸出 HTML／CSS：如有將 Figma 輸出為網頁形式的需求，可用以下方式實現：

使用第三方外掛	利用「Figmify」、「HTML to Figma」、「TeleportHQ」等工具，將設計轉換為 HTML／CSS 結構，自動產出前端框架。
導出 CSS／開發用資料	在 Dev Mode 下，工程師可直接複製屬性（如色碼、尺寸、字體、邊框）並轉為程式碼。
嵌入Figma 設計	點選「Share → Embed」，可將設計畫面直接嵌入網頁中作為互動展示。

想學會更多 Figma 心法，就選赫綵課程！
馬上報名試聽
 

三、Figma、Sketch、Adobe XD、Penpot ：4 大向量繪圖軟體比較！

除了 Figma，業界中還有另外 3 種較常見的向量繪圖軟體，同時也是 UI 設計領域中常見的工具。下面將分別介紹它們的特色、是否需要下載、是否需要付費以及適合族群等資訊，方便你進行比較，從中挑選最適用的一款。
 

📍Figma

如果你在找一款不用下載、又能多人一起線上編輯的設計工具，那 Figma 絕對是首選。不但打開瀏覽器就能開始設計，而且支援多種裝置，無論你用的是 Windows、Mac，還是平板都能無痛使用！

它最強的地方在於協作功能，不管你是設計師、PM 還是工程師，大家都能即時留言、同步修改，節省溝通時間，不僅免費，也是最容易上手的工具。
 

📍Sketch

Sketch 是 UI 浪潮早期便推出市場的工具，專門為 Mac 打造，操作起來順手又穩定，也是不少專業設計師的愛用工具，主要原因在於它資源多、外掛多、自由度也高。
然而由於 Sketch 只支援 macOS，而且需要付費使用，如果你的團隊有用 Windows 的人，或者部分夥伴只需短期合作，特意購買軟體便顯得不太划算，可能便需要另外想協作的辦法，相對不方便。
 

📍Adobe XD

XD 是 Adobe 家推出的 UI 工具，介面對 Photoshop 或 Illustrator 的用戶來說非常友好，不僅更易上手，也可與 Adobe 的其他工具與檔案相容。除了繪圖，也能做互動動畫和簡單原型，對於需要展示流程的設計極為方便。

如果你和團隊本來就是 Adobe 的忠實用家，不妨考慮使用 XD 作為主要的 UI 設計工具；但如果你並不常用 Adobe 系列軟體，考慮到 XD 近年已取消免費方案，建議還是優先選擇其他工具。
 

📍Penpot

Penpot 是一款開源、跨平台的免費 UI 設計工具，不用下載、打開瀏覽器就能用，Windows、Mac、Linux 都能支援。它最大特色是可私有部署，對重視資安的團隊非常友善。操作邏輯和 Figma 類似，也支援多人協作與原型設計。


不過由於是比較新的軟體，使用人數較少，因此資源和外掛也較少，對設計新手來說可能有一點學習門檻，適合技術力較高、喜歡掌握工具主控權的團隊使用。

UI 軟體	特色	是否需要下載	是否具有免費方案	適合族群
Figma	功能齊全，資源與外掛豐富，支援多人即時線上協作	否	有，另設付費版	單人到多人團隊、新手到老手都適用
Sketch	資源與外掛豐富，專為 Mac 打造	是	無	Mac 使用者
Adobe XD	與 Adobe 系列相容，方便跨軟體操作	是	無	Adobe 工具愛用者
Penpot	可私有部署，支援多人協作，但目前資源和外掛較有限	否	完全免費	技術力較高、講求主控權的團隊

四、Figma 免費版夠用嗎？費用資訊整理

看完 Figma 和其他 UI 軟體的比較，再一起了解更多費用相關資訊吧！目前，Figma 提供的免費個人版，便已含括無限檔案、一般製圖、原型製作、多人協作等實用的功能，對於一般的設計師以及小型團隊來說已經非常夠用。

而付費版能夠提供更多進階功能，如 Dev Mode、團隊權限、版本控制等，收費方面採用訂閱制，定價約 US$12～45／人／月（約 NT$390～1,460）。如果你的團隊人數眾多，或者具備高階的設計需求，則不妨考慮入手付費版。
 

五、Figma 課程哪裡找？赫綵設計學院助你培養實力，向 UI 設計師邁進

Figma 自學雖然相對簡單，但如果你的目標是做出專業級 UI 設計的話，在專業老師的帶領下，必定能進步更快！在赫綵的「UI 視覺介面設計課程」中，老師不僅會分享 Figma 從基礎到進階的操作，更會以 UI 業界實務流程為核心，培養學員全方位的能力，讓每個工作環節都盡在掌握。

在 60 小時的 UI 設計課程中，你可以學到：

● 入門與認知（6 小時）：了解 UI 領域概論，建立對於 UI 設計的理論認知。
● 建構設計基礎（12 小時）：學習如何進行產品前期研究，做出合理的功能架構，同時掌握 iOS 和 Android 2 大系統的設計要訣。
● 介面設計與工具應用（30 小時）：學習建立 Wireframe、Style Guide，實作主要畫面設計與互動細節。
● 設計呈現與作品集（12 小時）：學會如何向合作夥伴和客戶說明設計脈絡，進行有效提案，最終完成作品集製作與發表。

為什麼要選擇「赫綵設計學院」？

● OMO 線上線下整合課程：赫綵採用線上直播＋實體教學雙管齊下的課程模式，讓你的學習充滿彈性，同時保留了由老師即時解惑糾錯的實體課堂優勢。課程亦提供全程錄影服務，輕鬆重看複習，打好基礎。
● Adobe 官方認證訓練中心：赫綵為 Adobe AATC 認證的培訓中心，除了能為你提供專業的 Adobe 軟體教學，更保證你在課程結業後能取得證書，履歷更加分。
● 接案管道媒合：部分課程中將由赫綵協助你與業界媒合，讓你的好設計有更多曝光機會！目前赫綵學員在完成課程後就職率高達 97.9%，結業即就業！
● 課程免費試聽：擔心課程和你的預期不一樣嗎？你可先行免費預約試聽，體驗課程內容，再決定是否報名！
● 專業師資指導：聘請 200 位以上業界實務經驗豐富的設計師授課，不僅傳授專業知識，更能分享業界實戰經驗，幫助你快速銜接職場。
● 同儕討論與協同教學：創建班級學習群組，與班上同學＆助教在下課後也能互相交流，讓學習不再是件孤單的事！結業後也可回訓成為師資，透過輔導學弟妹來賺點數，換取其他課程！

趕上 UI／UX 轉職潮，報讀赫綵課程養成扎實能力！
馬上報名試聽