Figma 免費版教學 2026：香港設計師入門 UI 設計完全指南

Figma 免費 Starter 版支援無限草稿文件同最多 3 個 Figma Design 項目，已足夠學習 UI 設計，Pro 版 $15 USD/月適合需要版本歷史同無限項目嘅專業設計師。

對於想入門 UI/UX 設計嘅香港人嚟講，Figma 係目前最多設計師用嘅工具，免費版已經夠用。唔需要安裝任何軟件，瀏覽器打開就用得，協作功能仲係業界頂級。本文帶你由零開始，逐步學識 Figma 免費版嘅所有核心功能。

Figma 係咩？點解設計師都用它？

Figma 係一個基於瀏覽器嘅向量設計工具，2016 年推出，依家係全球最多 UI/UX 設計師使用嘅設計軟件。相比舊式嘅 Sketch（Mac Only）或 Adobe XD（已停止開發），Figma 嘅最大優勢係：

跨平台：Windows、Mac、Linux、甚至 Chromebook 都用得，只要有瀏覽器就夠。香港好多公司用 Windows，Figma 完全冇問題。

即時協作：多人同時喺同一個檔案度工作，改動即時顯示，完全唔使 email 來回傳送檔案。設計師同開發者可以直接睇同一個 Figma 連結，開發者仲可以直接 inspect 每個元素嘅 CSS 值。

Components 系統：建立可重用嘅設計元件，一改全改，大大提升工作效率。

免費版已經好夠用：對於學習同個人項目，Figma Starter 版完全唔需要俾錢。

2022 年 Adobe 曾試圖以 200 億美元收購 Figma，但最終因反壟斷監管問題放棄，Figma 保持獨立，依家係 B2B 設計工具市場嘅龍頭。

免費版功能同限制（準確清單）

2026 年 Figma Starter 版包含：

免費包含：

• 無限草稿文件（Drafts）
• 最多 3 個 Figma Design 項目
• 每個項目最多 3 個共同編輯者
• 無限 FigJam 文件（白板工具）
• 基本 Prototype 功能
• 社區資源同插件使用

免費版限制：

• 版本歷史只保留 30 天（Pro 版無限）
• 每個項目最多 3 個協作者
• 最多 3 個 Design 項目（Drafts 唔計）
• 唔支援 Team Library 跨項目共享 Components

Pro 版 $15 USD/月提供：

• 無限項目同協作者
• 無限版本歷史
• Team Library（跨項目 Components 共享）
• 進階 Prototype 功能

對於初學者同自由職業者，免費版完全夠用。只有當你喺公司做多人協作設計，或者需要保留舊版本記錄，先需要升 Pro。

基本操作教學（Frame、Shape、Text、Auto Layout）

建立帳號後，進入 Figma 介面，左上角係工具列，以下係最常用嘅操作：

Frame（F 鍵）：Figma 用 Frame 代替普通設計工具嘅 Artboard。按 F 鍵後，右側面板可以選擇預設裝置尺寸，例如 iPhone 16（390×844px）或 Desktop（1440×1024px）。Frame 可以嵌套，係 Figma 最重要嘅概念。

Shape 工具：Rectangle（R）、Ellipse（O）、Line（L）係最基本嘅形狀工具。選中形狀後，右側 Fill 面板可改顏色，Stroke 加邊框，Corner Radius 加圓角。

Text（T 鍵）：按 T 鍵後點擊畫布，輸入文字。右側面板可設定字體、大小、行距、字距、對齊方式。香港設計師常用 Noto Sans TC 或 Inter 字體。

Auto Layout（Shift+A）：呢個係 Figma 最強大嘅功能之一。選中幾個元素，按 Shift+A，就會自動建立 Auto Layout 容器，類似 CSS Flexbox。設定好 Direction、Spacing、Padding 後，入面嘅元素會自動排列，增減元素時唔會變形。

建議由 Frame + Rectangle + Text + Auto Layout 呢四樣開始練習，做個簡單嘅 Button Component。

Components 同 Styles 使用技巧

Components 係 Figma 嘅核心，掌握咗就能大幅提升效率：

建立 Component：選中任何元素或群組，右鍵選「Create Component」（或 Ctrl+Alt+K）。Component 會變成紫色圖標，代表係「主 Component」。

Instance（複製使用）：將主 Component 拖拉到畫布其他位置，就會建立 Instance（副本）。修改主 Component，所有 Instance 同步更新。但喺 Instance 上做嘅覆蓋修改，更新主 Component 時唔會被覆蓋。

Variants：一個 Component 可以有多個狀態，例如 Button 有「Default」「Hover」「Disabled」三個 Variant。使用時可以喺右側面板直接切換狀態，方便做 Prototype。

Color Styles：喺右側面板，點擊「+」建立 Color Style，例如 Primary Blue、Text Dark 等。建立後，所有用呢個顏色嘅元素都會連結到 Style。改 Style 顏色，全部同步更新，係建立設計系統嘅基礎。

Text Styles：同樣原理，建立 Heading 1、Body Text 等 Text Style，統一全站字體規格。

Prototype 同 Share 功能

Figma 嘅 Prototype 功能可以直接喺設計工具裡做出可點擊嘅 Demo，唔需要 InVision 或其他工具：

建立互動：切換到右上角「Prototype」頁籤。選中一個元素（例如 Button），會出現藍色箭頭圖標，拖拉到目標 Frame，設定觸發方式（On Click）同動畫效果（Smart Animate 最好用，會自動補間動畫）。

Smart Animate：只要兩個 Frame 入面有相同名稱嘅元素，Smart Animate 就會自動製作流暢嘅過渡動畫，效果好似 iOS 原生 App 咁。

Preview 測試：按右上角▶鍵，可以喺瀏覽器度直接測試 Prototype，或者用 Figma Mirror App 喺手機上預覽。

分享連結：按右上角「Share」，可以建立查看連結、編輯連結或 Prototype 連結。將 Prototype 連結傳給客戶或開發者，唔需要對方有 Figma 帳號都可以直接睇。

Inspect 功能：開發者打開 Figma 連結後，選任何元素，右側會自動顯示 CSS、iOS 或 Android 對應嘅代碼同尺寸數值，大大減少設計師同開發者之間嘅溝通成本。

對於香港初學者，建議由臨摹一個現有 App 界面開始，例如 MTR App 或 OpenRice，練習用 Frame、Auto Layout、Components 重建出嚟，係最有效嘅學習方式。

常見問題

Figma 支唔支援廣東話字體輸入？ 支援。Figma 用瀏覽器渲染文字，香港用家可以直接輸入中文繁體，字體選擇 Noto Sans TC 或本地已安裝嘅中文字體，顯示完全正常。

免費版可唔可以同其他人協作？ 可以，免費版每個項目最多 3 個共同編輯者。如果只係想分享俾人睇（唔係編輯），分享 View Only 連結係無限制嘅。

Figma 同 Figma for Education 有咩分別？ Figma for Education 係免費嘅 Pro 功能，適用於教育機構嘅師生。香港大學生可以用學校電郵申請，有機會獲得完整 Pro 版功能，包括無限項目同版本歷史。

喺 Figma 設計完，點樣交俾開發者？ 最直接係分享 Figma 連結，開發者可以用 Inspect 模式直接睇 CSS 同尺寸，唔使 export 或轉格式。如果需要 export 圖片，選中元素後喺右側「Export」面板設定格式同倍數。

Figma 有無手機 App？ 有 Figma Mirror App（iOS/Android），主要用嚟預覽 Prototype 喺真實裝置上嘅效果，但唔係完整編輯器。正式編輯仍需要在瀏覽器或桌面 App 進行。