figma教學：新手從介面操作到原型設計的兩週入門路線

Figma 是什麼？新手為什麼要學 Figma

Figma 是用來設計網站、App 介面、互動原型與協作設計稿的雲端 UI 設計工具。對新手來說，學 Figma 的重點不是背功能，而是學會把一個畫面拆成 Frame、文字、按鈕、輸入框和可點擊流程。

Figma 可以做網頁、App、Prototype 和設計系統

Figma 最常見的用途有五種：設計網站頁面、設計 App 畫面、製作 Prototype（互動原型）、整理 Component（元件），以及和 PM、工程師、行銷一起看同一份設計稿。新手可以先從一個登入頁開始，不需要一開始就碰大型 Design System。

Figma 跟 Photoshop、Illustrator 的差異

Photoshop 偏向影像處理，Illustrator 偏向向量插畫與平面設計，Figma 則偏向 UI 介面、畫面流程與多人協作。我的建議是：如果你的目標是做網站、App、後台或產品頁，不要先花太多時間學修圖軟體，先把 Figma 的 Frame、Layer、Auto Layout 學起來，進步會更直接。

Figma 不只給設計師，也適合 PM、工程師與網站負責人

PM 可以用 Figma 看使用者流程，工程師可以看尺寸、顏色與素材，網站負責人可以先畫首頁、商品頁或表單流程。即使你不打算成為設計師，只要需要和設計稿溝通，Figma 新手教學都值得先看一次。

Figma 要下載嗎？註冊、登入與建立第一個檔案

Figma 不一定要下載，瀏覽器就能使用。新手只要註冊帳號、建立 Design File（設計檔），就能進入畫布開始練習；桌面版適合長時間工作時再安裝。

用 Google 帳號或 Email 建立 Figma 帳號

進入 Figma 官網後，可以用 Google 帳號或 Email 註冊。新手不用急著研究團隊權限，先完成登入、進到個人工作區，再確認左側能看到 Drafts（草稿區）即可。第一次登入時若看到範本或教學提示，可以先略過，直接建立自己的練習檔比較快。

建立 Design File，進入第一個畫布

1. 在 Drafts 或工作區中點選 New design file。
2. 進入空白 Canvas（畫布）後，先按 F 選 Frame 工具。
3. 從右側預設尺寸選擇手機尺寸，例如 iPhone 版型。

這時你已經有第一個設計檔。接下來所有練習都放在這個 Frame 裡，不要把文字和按鈕散落在畫布外面。

免費版新手夠不夠用？

免費版足夠練習 Figma 入門操作，包括建立檔案、設計登入頁、做 Prototype、使用基本元件與分享連結。等到你需要更多團隊專案、進階協作或 Dev Mode 工作流程時，再評估付費方案就好。新手最常犯的錯，是還沒做出一個完整畫面就開始比較方案。

瀏覽器版與桌面版怎麼選

如果只是跟著 figma教學練習，瀏覽器版已足夠。若你會長時間開檔案、常拖拉大型圖片、需要比較穩定的快捷鍵體驗，可以安裝桌面版。我的習慣是新手先用瀏覽器版上手，等到每天都會打開 Figma，再安裝桌面版。

Figma 介面導覽：左側圖層、中央畫布、右側屬性面板

Figma 介面可以先記成四個區塊：上方工具列負責建立物件，左側 Layers 管理圖層，中央 Canvas 放設計稿，右側面板調整尺寸、顏色、文字、Prototype 與交付資訊。

介面區塊	看哪裡	新手要做什麼
Toolbar	畫面上方	選取、建立 Frame、畫圖形、輸入文字
Layers	左側面板	確認物件有沒有放在正確 Frame 裡
Canvas	中央畫布	編輯網站或 App 的設計畫面
Properties	右側面板	調整尺寸、顏色、字體、間距與互動

上方工具列：選取、Frame、形狀、文字、鋼筆

上方工具列是建立物件的地方。按 V 是選取工具，按 F 建立 Frame，按 R 建立矩形，按 T 輸入文字。新手先練這四個就夠了，鋼筆工具可以晚一點再碰。練習指令是：建立一個手機 Frame，再放一個標題、一個矩形按鈕和一段說明文字。

左側 Layers：管理畫面、Frame 與物件層級

Layers（圖層）會顯示檔案裡所有 Frame、文字、圖形和元件。你選到某個物件時，左側會同步反白。新手要養成一個習慣：每做完一個區塊，就看左側圖層是否被收在正確的 Frame 裡。很多版面跑掉，問題都不是工具壞掉，而是物件放錯層級。

中央 Canvas：放置與編輯設計稿

Canvas（畫布）是你實際設計的地方，可以同時放手機版、桌機版、彈窗、流程圖。不要把 Canvas 當成最後畫面，真正的畫面是 Frame。操作時先用 Frame 定義一個畫面範圍，再把所有 UI 元件放進去，這樣後面做 Prototype 和匯出才不會混亂。

右側 Design 面板：尺寸、顏色、字體、間距

右側 Design 面板會依照你選取的物件變化。選到文字時可以調字體、大小、行高；選到矩形時可以調 Fill（填色）、Stroke（外框）、圓角和陰影；選到 Frame 時可以調尺寸和 Auto Layout。初學者不要憑感覺亂拉，先在右側輸入數值，例如按鈕高度 48、左右 Padding 24。

Prototype 與 Inspect 面板什麼時候會用

Prototype 用來把畫面串起來，例如點登入按鈕後進到首頁。Inspect 或 Dev Mode 則是交付工程師時用來看尺寸、樣式和素材。新手練習順序應該是先把靜態 UI 做穩，再做 Prototype，最後才看交付資訊。

Figma 最重要的觀念：Frame、Group、Layer 差在哪？

Frame 是畫面或容器，Group 是暫時把物件綁在一起，Layer 是所有物件的階層清單。做 App 或網站畫面時，應優先用 Frame，不要用 Group 當主要畫面。

概念	用途	新手使用建議
Frame	建立畫面、區塊與容器	登入頁、首頁、卡片區塊都用 Frame
Group	暫時整理多個物件	短期整理可以用，不適合當畫面
Layer	顯示物件階層	每天都要看，避免物件跑錯位置

Frame 是畫面，也是版面容器

Frame（畫面容器）可以代表一個手機畫面、一個桌機頁面，也可以代表一張卡片或一個表單區塊。你要做登入頁時，第一步就是建立手機 Frame，再把標題、輸入框、按鈕都放進去。Frame 可以套 Auto Layout，也能被 Prototype 連線，所以它是 Figma UI 設計的核心單位。

Group 是暫時整理物件，不適合當畫面

Group（群組）只是把幾個物件暫時綁在一起，方便移動或縮放。它不像 Frame 那樣適合管理版面、間距與互動。做 App 畫面時，如果你用 Group 包住整個登入頁，後面做響應式調整、Prototype 或交付時會比較難整理。

Layer 是所有物件的階層清單

Layer（圖層）不是一種設計工具，而是檔案結構。左側 Layers 會告訴你標題在哪個 Frame 裡、按鈕是否放錯層、卡片裡有幾個物件。新手每做完一段 UI，就把圖層命名成 Header、Email input、Login button，後面回頭修改會省很多時間。

新手常見錯誤：物件放在 Frame 外面

最常見的錯誤，是看起來物件在手機畫面裡，其實圖層在 Frame 外面。修正方式是選取物件，拖進左側正確的 Frame 底下。判斷標準很直接：點選 Frame 移動時，裡面的文字、按鈕、輸入框要一起移動。

Figma 基本工具教學：文字、圖形、圖片、顏色與效果

Figma 基本工具先掌握文字、圖形、圖片、顏色、外框、陰影與對齊即可。能用這些工具完成標題、輸入框、按鈕和卡片，就已經能做出第一個 UI 畫面。

文字工具：標題、內文、按鈕文字怎麼設定

文字工具用來建立標題、說明、表單標籤和按鈕文字。按 T 後在 Frame 裡點一下即可輸入文字。標題可以先設 24 到 32px，內文常落在 14 到 16px，按鈕文字通常置中並保持清楚可讀。新手提醒：不要每一段文字都用不同大小，先建立三個層級，標題、內文、輔助文字。

圖形工具：矩形、圓形、線條與基本 UI 區塊

矩形是 UI 設計最常用的圖形，輸入框、按鈕、卡片、底部區塊都可以從矩形開始。按 R 畫矩形，右側設定寬高、圓角和顏色。圓形適合做頭像或小圖示底，線條可用在分隔線。練習時先做一個輸入框：寬 327、高 48、圓角 8、外框淺灰，裡面放 Email 文字。

顏色、Stroke、陰影與透明度

Fill 是填色，Stroke 是外框，Effects 可以加陰影或模糊，Opacity 是透明度。新手不要一開始就追求華麗效果，先讓可點擊的按鈕和不可點擊的背景有明顯差異。判斷標準是：使用者一眼能看出哪裡可以輸入、哪裡可以按、哪裡只是說明文字。

圖片怎麼放進 Figma

圖片可以直接拖進 Canvas，也可以選取矩形後用 Fill 放入圖片。做網站或 App 畫面時，建議先建立固定尺寸的圖片 Frame，再把圖片放進去，避免圖片比例把版面撐亂。若圖片只是示意，先用灰色矩形佔位也可以，但最後交付前要換成真實素材。

對齊、間距與尺寸是新手最該先練的基本功

我看新手作品時，最先看的不是配色，而是對齊和間距。標題、輸入框、按鈕如果左邊沒有對齊，整個畫面會立刻顯得鬆散。練習指令是：所有主要內容左側對齊同一條線，區塊間距固定用 8、16、24、32 這類規則數值，不要每次用滑鼠憑感覺拉。

第一個實作任務：用 Figma 做一個手機登入頁

Figma 新手第一個作品建議做手機登入頁，因為它同時包含 Frame、文字、輸入框、按鈕、對齊、間距和圖層命名，範圍小但能練到核心操作。

步驟 1：建立手機尺寸 Frame

按 F 建立 Frame，從右側選一個手機尺寸。Frame 命名為 Login page，背景設為白色或很淡的灰色。接著設定內容左右邊距，例如 24px。這個邊距會成為整個畫面的基準線，後面的標題、輸入框、按鈕都對齊它。

步驟 2：放入標題、說明文字與 Logo 區塊

在畫面上方放一個 Logo 區塊，可以先用 48x48 的圓角矩形代替。下方放標題，例如「歡迎回來」，再放一段說明文字，例如「登入帳號後繼續管理你的專案」。標題和說明文字不要貼太近，先用 8 到 12px 的間距。這一步的重點是建立視覺層級，讓使用者先看標題，再看下一步。

步驟 3：建立 Email 與密碼輸入框

輸入框可以用 Frame 或矩形建立。建議新手用 Frame 包住輸入框內容，寬度跟內容區一致，高度設 48 到 52px，圓角 8，Stroke 用淺灰色。輸入框內放提示文字，例如 Email 和 Password。兩個輸入框之間保持固定間距，例如 12 或 16px。

步驟 4：建立主要 CTA 按鈕

主要按鈕要比其他元素更明顯。建立一個高度約 48px 的按鈕 Frame，填入品牌主色，文字置中寫「登入」。如果想延伸研究按鈕文字、尺寸與點擊意圖，可以內部連到 CTA 按鈕設計。做電商或表單頁時，按鈕位置也會影響畫面轉換率，可再搭配 電商轉換率設計 觀念一起看。

步驟 5：檢查對齊、間距、圖層命名

完成畫面後，不要急著做第二頁。先檢查三件事：主要內容是否同一條左邊線、上下間距是否有規則、左側 Layers 是否命名清楚。建議命名為 Logo、Title、Description、Email input、Password input、Login button。這一步很像整理桌面，越早養成習慣，之後做多頁流程越不痛苦。

按鈕文字可內部連到 cta-button-design

登入頁按鈕不是只看顏色，也要看文字是否明確。像「登入」比「送出」更符合情境，因為使用者知道點擊後會發生什麼事。按鈕相關延伸內容可放在 cta-button-design。

畫面轉換與轉換率觀念可內部連到 ecommerce-conversion-design

如果登入頁、註冊頁或結帳頁承載商業目標，畫面順序和表單負擔會影響完成率。這類觀念可以自然連到 ecommerce-conversion-design，但在這個階段先把 UI 結構做乾淨即可。

Auto Layout 教學：讓按鈕、卡片和區塊自動排版

Auto Layout 是 Figma 用來控制排列、間距、Padding 和容器尺寸的功能。新手學會它之後，按鈕、卡片和表單不必每次手動調位置，版面也比較容易維護。

Auto Layout 是什麼？為什麼新手一定要學

Auto Layout（自動排版）可以讓容器裡的物件依照水平或垂直方向排列，並固定 Gap（間距）與 Padding（內距）。它最適合用在按鈕、表單、卡片、導覽列。我的判斷是：只會手動畫圖的人可以做出畫面，但很難做出可修改的設計稿。

用 Auto Layout 做一顆可調整寬度的按鈕

先建立一段按鈕文字，選取後按 Shift A 套用 Auto Layout。右側設定水平排列、左右 Padding 24、上下 Padding 12，填入主色並加上圓角。當你把文字從「登入」改成「建立新帳號」時，按鈕寬度會跟著內容變化，不必重畫矩形。

用 Auto Layout 做一張卡片

建立一個卡片 Frame，裡面放標題、說明文字和一個小按鈕。選取這些物件後套用 Auto Layout，方向設為垂直，Gap 設 8 或 12，Padding 設 16。之後新增一段文字時，卡片高度會自動撐開。這就是 Auto Layout 的價值：它讓內容變動時，版面仍保有規則。

Padding、Gap、Alignment 怎麼理解

Padding 是內容到容器邊界的距離，Gap 是物件和物件之間的距離，Alignment 是對齊方式。做按鈕時，Padding 決定按鈕呼吸感；做列表時，Gap 決定項目間距；做卡片時，Alignment 決定內容靠左、置中或靠右。新手先用固定數值，不要每個區塊都不同。

新手常見錯誤：把 Auto Layout 當成對齊工具

Auto Layout 不只是把物件對齊，它更像是定義區塊規則。若你只是想讓兩個物件左對齊，可以用對齊工具；若你希望之後新增文字、改按鈕、複製卡片時版面仍然穩定，就應該用 Auto Layout。

Component、Variants 與簡易 Design System 入門

Component 是可重複使用的 UI 元件，Instance 是元件複本，Variants 則用來管理不同狀態。新手先把按鈕、輸入框、卡片整理成元件，就能開始理解 Design System。

Component 是什麼？什麼時候要建立元件

當某個 UI 會重複出現，就適合建立 Component（元件）。例如主要按鈕、次要按鈕、輸入框、商品卡片。操作方式是選取已完成的按鈕，按 Create component，之後再複製使用。不要在第一個物件還沒穩定時就急著元件化，先做出兩三個相似元素，再判斷是否需要整理。

Instance 是什麼？修改主元件會發生什麼事

Instance（元件複本）是從主 Component 複製出來的版本。當你修改主元件的圓角、顏色或 Padding，相關 Instance 會跟著更新。這很適合維護多頁 App 的按鈕樣式。新手要注意，Instance 可以改文字內容，但不要把每個 Instance 都改到失去一致性。

Variants 可以管理按鈕狀態

Variants（變體）適合管理同一種元件的不同狀態，例如按鈕的 Default、Hover、Disabled。新手可以先建立三種按鈕變體：正常狀態、不可點擊狀態、次要樣式。這樣做 Prototype 或交付時，團隊比較容易理解不同情境下的 UI 行為。

新手版 Design System：先整理顏色、字體、按鈕和卡片

Design System 不必一開始就做成企業級規格。新手版只要整理四件事：主色與輔助色、標題與內文字級、主要與次要按鈕、常用卡片樣式。這樣你做第二個畫面時，就不會重新發明一次同樣的 UI。

Prototype 原型教學：讓畫面可以點擊與展示流程

Prototype 可以把靜態 Figma 畫面變成可點擊流程。新手最常用的是設定 On click 到 Navigate to，讓登入頁按鈕點擊後前往首頁或下一個畫面。

什麼時候需要做 Prototype

當你需要展示使用者從哪個畫面到哪個畫面，就需要 Prototype。常見情境包含登入流程、註冊流程、商品加入購物車、表單送出、後台操作流程。不要一開始就追求複雜動畫，先讓主要路徑能被點通。

如何把登入頁連到首頁

1. 先建立 Login page 和 Home page 兩個 Frame。
2. 選取 Login button。
3. 切到右側 Prototype 面板。
4. 新增 Interaction，設定 On click。
5. Action 選 Navigate to，目標選 Home page。

完成後按 Present 預覽，點登入按鈕應該能進到首頁。若點不到，通常是按鈕圖層沒有選對，或連線接在錯誤物件上。

如何預覽與分享 Prototype

右上角 Present 可以預覽 Prototype，Share 可以產生分享連結。給主管、客戶或工程師看時，建議先整理好首頁、登入頁、錯誤狀態這類主要畫面，不要把草稿區也混在展示流程裡。分享前自己先點一次，確認流程沒有斷。

Prototype 連線不要太早做，先把主要流程整理好

我不建議新手畫一個按鈕就拉一條 Prototype 線。先把主要畫面放齊，確認使用者流程，再做連線。Prototype 線太多時，團隊會看不出重點，修改畫面也更容易漏掉連線。

分享、匯出與交付：Figma 設計稿怎麼給別人看？

Figma 設計稿可以透過 Share 分享連結、留言討論、Export 匯出素材，或用 Inspect 與 Dev Mode 查看工程交付資訊。非設計師也能用這些功能看懂設計狀態。

分享連結與權限怎麼設定

點右上角 Share 可以設定誰能看、誰能編輯、誰能留言。給客戶或跨部門同事時，通常先給檢視或留言權限；給共同設計者才開編輯權限。新手要避免把練習檔開成任何人都能編輯，否則設計稿可能被誤改。

如何匯出圖片、Icon 與設計素材

選取物件後，在右側 Export 區塊設定格式。圖片常用 PNG 或 JPG，Icon 常用 SVG，需透明背景時選 PNG。匯出前先確認物件大小、命名和邊界，不要把多餘背景一起匯出。若是網站素材，也可以補看 Core Web Vitals，了解圖片大小和前端效能的關係。

交付工程師前要檢查哪些事

檢查項目	為什麼重要
Frame 命名	工程師能快速找到頁面
元件狀態	避免不知道按鈕 Hover 或 Disabled 怎麼長
圖片與 Icon	確認是否需要匯出素材
間距與尺寸	降低切版時來回確認
主要流程	讓工程師知道畫面之間如何銜接

Dev Mode 對新手的用途與限制

Dev Mode 是 Figma 提供給工程交付的介面，可協助查看設計規格、標註、版本差異與開發狀態。依 Figma 官方說明，Dev Mode 主要適用於付費方案中的 Full 或 Dev seat。新手不用一開始就研究完整 Dev Mode 工作流，先學會整理 Frame、命名圖層、匯出素材和分享連結，交付品質就會提升很多。

Figma 新手兩週學習路線圖

Figma 基本操作通常 1 到 2 週可以上手。兩週內的目標不是學完所有功能，而是能完成一個多畫面 UI、使用 Auto Layout 與 Component，並做出可點擊 Prototype。

時間	學習內容	完成標準
第 1 天	介面、Frame、Layer	能建立手機 Frame 並放入文字與圖形
第 2 到 3 天	文字、圖形、顏色、對齊	能做出乾淨的表單與按鈕
第 4 到 5 天	登入頁實作	完成一個可展示的手機登入頁
第 6 到 7 天	Auto Layout、Component	能做可調整的按鈕與卡片元件
第 2 週	多畫面、Prototype、分享	完成 3 到 5 個畫面並能點擊展示流程

第 1 天：認識介面與 Frame

第一天只做三件事：建立 Design File、認識四大介面區塊、建立手機 Frame。完成後要能說出左側 Layers、中央 Canvas、右側 Design 面板各自負責什麼。

第 2-3 天：練文字、圖形、顏色與對齊

第二到三天練基本工具。每天做 3 個小區塊，例如一顆按鈕、一個輸入框、一張卡片。完成標準是對齊清楚、間距有規則、文字層級不混亂。

第 4-5 天：做登入頁與基本 UI 區塊

第四到五天把前面的工具串成登入頁。不要只照抄範例，至少自己調一次標題、說明文字、輸入框和按鈕。完成後把圖層命名整理好。

第 6-7 天：學 Auto Layout 與 Component

第六到七天把登入頁裡的按鈕、輸入框、卡片改成 Auto Layout 和 Component。完成標準是：改按鈕文字時版面不會亂，複製元件時樣式能保持一致。

第 2 週：完成 3-5 個畫面與 Prototype

第二週做 3 到 5 個畫面，例如登入頁、首頁、列表頁、詳細頁、設定頁。最後用 Prototype 串起主要流程。若你只是想管理自己的網站需求，兩週練到這裡已經足夠和設計師或工程師溝通；若想走 UI/UX 求職，還需要補使用者流程、Wireframe、案例分析與作品集。

Figma 自學資源推薦：官方、社群、影片與素材怎麼用

Figma 自學資源可以分成官方教學、Help Center、Community、中文影片與 UI Kit。新手先用官方資源學基本操作，再用 Community 觀察別人的檔案結構。

資源	適合誰	怎麼用
Figma 官方資源	完全新手	先看介面、設計、Prototype 基礎
Figma Help Center	遇到功能問題的人	查 Auto Layout、Component、Dev Mode 等操作
Figma Community	想看範例的人	找 UI Kit、模板、外掛與練習檔
YouTube 與中文教學	喜歡跟著畫面操作的人	選一個系列跟完，不要每天換老師
Moonvy 等中文設計社群	想補 UIUX 觀念的人	看流程、元件、版面觀念，不只看工具

Figma Learn 與 Help Center

官方學習資源適合用來確認功能名稱與標準操作。遇到 Auto Layout、Prototype、Dev Mode 這類功能時，先查官方 Help Center，再看中文教學補操作節奏，會比較不容易被舊版內容帶偏。

Figma Community：模板、UI Kit、外掛

Figma Community 可以找到 UI Kit、Wireframe 範本、Icon、外掛和別人的練習檔。新手不要只下載漂亮模板，打開後要看三件事：Frame 怎麼命名、Auto Layout 怎麼包、Component 怎麼整理。

YouTube 與中文教學資源

影片適合用來跟做操作，但不要只看不做。建議挑一個 60 到 120 分鐘內的新手系列，邊看邊完成登入頁、卡片和 Prototype。看完後關掉影片，自己再做一次，才知道哪些步驟真的會。

2026 補充：Figma AI 工具、Figma Make 與 Community 新資源

Figma AI 可協助產生圖片、整理圖層名稱、改寫文字與建立草稿；Figma Make 則是把提示或既有設計轉成可互動的功能原型或 Web App。這些功能適合用來探索想法，但新手仍應先學介面、Frame、Auto Layout、Component 和 Prototype。工具可以加速草稿，不能取代基本版面判斷。

Figma 新手常見錯誤與修正方式

Figma 新手最常卡在 Frame、圖層命名、Auto Layout、Component 和 Prototype。修正方向不是多背快捷鍵，而是建立穩定的檔案結構與操作順序。

錯誤	原因	修正方式
把 Group 當成 Frame	不清楚畫面容器概念	頁面與區塊優先用 Frame
圖層沒有命名	前期覺得檔案還小	每個主要區塊完成後立刻命名
所有間距手動拉	還沒理解 Auto Layout	按鈕、表單、卡片先套 Auto Layout
Component 建太早	樣式還沒穩定	重複出現兩次以上再整理
Prototype 線太多	沒有先整理主要流程	只串核心路徑，其他狀態先標註

把 Group 當成 Frame 使用

Group 只能短期整理物件，Frame 才適合承載畫面與版面規則。修正方式是把主要畫面改成 Frame，再把原本 Group 裡的物件移進去。

圖層沒有命名，後面找不到東西

當檔案只有三個物件時不命名沒差，但做到五個畫面後會很痛苦。建議每個 Frame、按鈕、輸入框、卡片都用英文或清楚中文命名，至少讓下一個打開檔案的人看得懂。

所有間距都手動拉，沒有用 Auto Layout

手動拉間距在單一畫面還能撐住，內容一改就容易亂。按鈕、列表、卡片和表單欄位建議早點套 Auto Layout，讓間距由規則控制。

Component 建太早或完全不建立

太早建立 Component，會讓還沒定案的樣式變難改；完全不建立，會讓每個畫面都出現不同按鈕。比較好的節奏是先做出兩三個畫面，再把重複出現的 UI 整理成 Component。

Prototype 線拉太多，流程反而看不懂

Prototype 的目標是展示流程，不是把每個可能點擊都接滿。新手先串主流程，例如登入到首頁、列表到詳細頁、表單到完成頁。次要狀態可以用註解或旁邊 Frame 補充。

誰不適合只看這篇 Figma 教學？

只想學 Figma 基礎操作的人可以從這份 figma教學開始；若目標是完整 UX Research、企業級 Design System、前端切版或方案採購，還需要看更專門的內容。

想學完整 UX Research

Figma 能畫 Wireframe、UI 和 Prototype，但 UX Research 還包含訪談、問卷、使用者旅程、可用性測試與資料分析。這些不是工具操作能全部解決的事。

想做企業級 Design System

企業級 Design System 會涉及設計規範、Design Token、跨產品治理、元件版本與維護流程。新手可以先理解 Component 和 Variants，之後再進階。

想學前端切版或程式開發

Figma 可以協助交付尺寸、顏色與素材，但不會讓你自動會寫前端。若你要做網站實作，需要另外學 HTML、CSS、JavaScript 或找工程師協作。若正在判斷自學或外包，也可延伸看 網站自學與外包怎麼選。

想比較 Figma 付費方案細節

方案比較會牽涉團隊人數、權限、Dev Mode、管理需求與預算。新手練習不必先被方案選擇卡住，先用免費或可試用的環境完成第一個作品比較實際。

Figma 要學多久？

只學基本操作約 1 到 2 週可上手；想能做完整 UI 畫面與 Prototype，通常需要 3 到 4 週持續練習。若目標是可求職作品集，還要搭配 UI/UX 流程、案例整理與作品敘事。

Figma 會很難嗎？

Figma 入門門檻不高，真正容易卡住的是 Frame、Auto Layout、Component 和版面邏輯。先做一個登入頁，比只看功能介紹更容易理解。

Figma 要下載嗎？

不用。Figma 可以直接在瀏覽器使用，桌面版適合長時間工作、常開大型檔案或想要更穩定操作體驗的人。

Figma 免費版夠新手用嗎？

夠。新手練習介面、工具、登入頁、Prototype、基本協作和分享連結，都可以先用免費版完成。等到有團隊管理或進階交付需求，再評估付費方案。

Figma 可以做網站設計嗎？

可以。Figma 常用於網站首頁、Landing Page、電商頁面、後台介面和手機版網頁設計。建議先用 Frame 做桌機版與手機版，再整理主要元件和交付素材。

Figma 跟 Photoshop 有什麼不同？

Photoshop 偏影像處理，Figma 偏 UI 介面設計、Prototype 和團隊協作。如果目標是網站或 App 介面，Figma 會比影像處理工具更貼近工作流程。

Frame 和 Group 差在哪？

Frame 是畫面或容器，能承載版面設定、Auto Layout 和 Prototype；Group 只是把物件暫時綁在一起。做 UI 畫面時應優先用 Frame。

Auto Layout 一定要學嗎？

如果只是玩工具，可以晚點學；如果想做可維護的 UI 設計，Auto Layout 很早就該學。它能控制 Padding、Gap、排列方向和容器尺寸，減少手動調整。

Figma 可以做互動原型嗎？

可以。用 Prototype 功能把畫面連起來，設定 On click 到 Navigate to，就能讓按鈕點擊後前往下一頁，展示基本使用者流程。

不會英文可以學 Figma 嗎？

可以，但建議記住常見英文介面詞，例如 Frame、Layer、Component、Prototype、Auto Layout、Fill、Stroke。這些詞會反覆出現在教學、外掛和官方文件中。

Figma AI、Figma Make 是新手一定要學的嗎？

不是第一優先。新手應先學介面、Frame、基本工具、Auto Layout、Component 和 Prototype，再把 Figma AI 或 Figma Make 當成草稿探索與輔助工具。

學 Figma 就等於會 UI/UX 設計嗎？

不是。Figma 是工具，UI/UX 還包含需求理解、使用者流程、資訊架構、視覺層級、互動邏輯與測試。會用 Figma 是開始，不等於已經具備完整 UI/UX 能力。