Figma 中文教學：UI/UX 設計入門到精通

其實不少人都這樣：打開 Figma，看著左邊一排圖層、右邊一整個屬性面板，中間一片空白的畫布，然後愣在那裡不知道第一步到底要點哪裡？很多想自學 UI/UX 的人卡住的點從來不是「找不到功能鍵」，而是「不知道這個工具背後的思考邏輯」。這篇就是要幫你把那層邏輯拆開。

換句話說，Figma 中文完整教學真正的價值，是要讓你建立一套從看到想到做的完整工作流：怎麼開畫面、怎麼做元件、怎麼做互動原型、怎麼把設計乾淨地交給工程師、怎麼跟團隊同步協作；把你教會每一個按鈕只是順帶的副產品。這套流程通了，功能你會自己查；流程不通，你看再多教學影片也只是在背快速鍵。

本教學從協作型設計工具的工作方式講起，一路帶到帳號方案、介面導覽、Frame 與 Auto Layout、Component 與 Variants、樣式系統、互動原型、響應式設計、Dev Mode 設計交付、Plugin 資源，並收在一張可以照著走的三階段自學路線圖。不管你是完全沒碰過設計工具的新手、從其他工具轉換過來的設計師，還是需要跟設計師協作的工程師與 PM，這篇都能給你一個能落地、能重複使用的心智地圖。

為什麼協作型設計流程逐漸成為主流

先把背景講清楚，你才會知道接下來學的每個功能是為了解決什麼問題。Figma 不是第一個 UI 設計工具，它真正改變工作方式的地方，是把設計、協作與交付收在同一份雲端檔案裡。

關鍵轉折是瀏覽器存取與即時多人協作。傳統桌面設計流程常靠本機檔案與人工同步版本，Figma 則讓團隊透過連結一起檢視或編輯同一份檔案。桌面應用程式仍可使用，但瀏覽器存取降低了跨作業系統協作的門檻。

換個方式想：以前的設計檔案常要存檔、傳給下一個人，再把修改合回來；Figma 把它變成同一份線上檔案，游標看得到、改動即時同步，版本也集中管理。這個轉變才是你該記住的底層邏輯，特定快速鍵反而是枝微末節。

維度	傳統本機檔案流程	Figma 協作流程
平台	常受桌面作業系統限制	可用瀏覽器或桌面應用程式
協作	本地檔案＋雲端同步	即時多人同時編輯
版本	多人各自一份，常打架	單一檔案，單一真實來源
交付	匯出切圖或 PDF	連結分享＋Dev Mode 直讀設計規格
生態	外掛分散	統一社群市集與 Plugin API

對自學者來說，這代表一件事：你學的是整個團隊都在用的協作流程，而不只是一個人在自己電腦上畫圖。後面所有功能（Auto Layout、Component、Dev Mode）都是在服務這個「讓一群人高效一起做設計」的核心目標。把這個前提放在心裡，你會發現很多設計選擇突然變得合理。

動手之前：先建立 Figma 的三層心智模型

新手最常卡住的地方，是直接跳進去拉形狀、排文字，完全沒有先把 Figma 的檔案結構搞懂。結果畫布越長越亂，圖層面板變成災難，改一個東西牽動十個地方。其實你只要先記住一個三層結構，後面的學習曲線會平非常多。

Figma 的檔案可以用三個工作層次理解，由外而內分別是頁面與畫布（Page / Canvas）、畫框（Frame）、圖層與元件（Layer / Component）。一份檔案可以有多個 Page，每個 Page 都有自己的 Canvas；Frame 是有明確尺寸與座標的容器，常用來代表螢幕或版面區塊；內部則是文字、形狀、圖片與可重複使用的 Component 等圖層。這個簡化模型對應的是檔案組織、單一畫面與內部設計單元。

畫布（Canvas）

每個 Page 都有自己的畫布，可以把多個畫面、流程圖、備註、設計規範攤在上面，像把一部分專案的工作桌攤開。新手常犯的錯是把所有東西隨手丟在畫布上、不收納，到最終自己都找不到東西在哪。比較好的習慣是依流程或功能分 Page 與區塊，用 Frame 收納相關畫面，旁邊加上文字標註。

畫框（Frame）

Frame 是 Figma 的核心單位。它有明確的寬高、可以設定背景色、可以裁切超出範圍的內容，更重要的是它支援約束（Constraints）與 Auto Layout。當你要做一個手機登入頁，可以建立對應目標裝置尺寸的 Frame，然後把所有元素放進去。Frame 之內還可以再套 Frame，做出有層次的版面結構。學會用 Frame 把版面整理乾淨，是掌握 Figma 的重要基礎。

元件（Component）

Component 是可以重複使用、並且從一個「主元件」集中更新的設計單元。一顆按鈕、一張卡片、一個輸入框，都可以做成 Component。改了主元件，所有用到它的地方一起更新。這個機制把「重複勞動」從設計工作裡抽掉，也是 Figma 能撐住大型設計系統的關鍵。後面會專門花一章講 Component 與 Variants，這裡你先有個印象就好。

三層模型記住之後，你看 Figma 介面就不會迷路了：左邊的導覽面板可以切換 Page，並列出當前畫布上 Frame 與圖層的巢狀結構；右邊的屬性面板則讓你調整當前選取物件的細節。整個工具的運作邏輯就是「選到對的層，再去調它的屬性」。

帳號與方案怎麼選：免費版到底夠不夠用

Figma 最大的優勢之一就是入門成本很低，免費版就能做出完整的作品集等級專案。但很多人會卡在「我到底要不要付費、要付哪一個方案」。我直接給你一個判斷框架，不要被方案表上的功能清單嚇到。

Figma 目前有免費的 Starter，以及 Professional、Organization、Enterprise 等付費方案；付費方案再依 Full、Dev、Collab 等席位提供不同權限。Dev Mode 已納入對應席位，不是所有使用者共用的單一加購項目。Starter 可使用 Frame、Component、Auto Layout 與 Prototype 等核心功能，適合自學與小型練習；檔案、團隊資源、管理與進階交付需求則要依最新方案比較。Figma 官方有公開方案表，席位與功能差異建議直接對照 Figma 最新定價頁（2026），因為內容會隨版本調整。

你目前的狀態	建議方案	理由
剛開始自學、做作品集	Starter 免費版	先用核心設計與原型功能完成練習
小型團隊共同開發專案	Professional 付費版	需要較完整的團隊檔案、資源庫與交付功能
設計團隊要落地設計系統	Organization 或 Enterprise	需要跨團隊的資產庫、集中管理或進階安全控制
工程師需要進階交付功能	Dev 席位或含 Dev Mode 的 Full 席位	檢視設計規格與程式碼線索

老實說，一開始就付費，不一定真的用得到那些協作功能。判斷原則很樸素：當你開始碰到免費方案的檔案組織、版本歷史或協作限制時，再對照當時的官方方案表升級就好。不要為了想像中的需求先付錢。

工作區導覽：把介面拆成五個你會反覆用到的區域

Figma 的介面看起來密密麻麻，但你真正每天會碰的其實可以整理成五個區域。把它們認熟，操作會順手很多。這五個區域列成清單如下，你逐一對照你眼前的畫面。

• 左側導覽面板：File 分頁用來切換 Page，並列出當前畫布上 Frame、Component 與其他圖層的巢狀結構；Assets 分頁則用來瀏覽本檔案與已啟用資產庫的元件。找東西、重新命名與調整圖層順序都在這裡。
• 上方工具列（Toolbar）：放的是你會反覆用的操作與建立工具，例如移動、Frame、形狀、文字與鋼筆。熟記常用快速鍵之後，操作會更快。
• 中央畫布（Canvas）：你實際動手的地方。可以縮放、平移，按住空白鍵就能拖動畫面。
• 右側屬性面板（Properties）：選到圖層後，這裡會顯示座標、尺寸、填色、邊框、效果、Auto Layout、Constraints 等可調參數，是日常操作的主要區域。
• 分享與原型操作：Share 用來管理檔案連結與存取權限；互動連線與設定在右側屬性面板的 Prototype 分頁，預覽則從工具列開啟。

把這五個區域對應到三層心智模型，你會看到一個清楚的對應關係：左側面板讓你在三層之間導航，工具列讓你在當前這一層加入新東西，右側面板讓你調整當前選中那一層的屬性。整個 Figma 的操作邏輯就是這個循環，選層、放東西、調屬性，沒有別的了。

第一個畫面怎麼開：Frame、Constraints、Auto Layout 三件套

理論講夠了，我們來動手做第一個畫面。我不會逐步教你拉每一條線，因為那對你建立能力沒有幫助。我要教你的是讓畫面「長得起來而且改得動」的三件套：Frame、Constraints、Auto Layout。學會這三個，你做任何版面都不會卡太久。

用 Frame 固定畫面範圍

做任何畫面之前，先按快捷鍵 F 建一個 Frame，選擇你要的裝置尺寸。Frame 不是裝飾品，它是版面的邊界、是響應式行為的依據、也是工程師讀設計時的座標參考。把所有元素都收進 Frame 裡面，不要讓它們散落在畫布上。一個乾淨的檔案，外層一定是一個或多個 Frame，而不會是裸露的形狀與文字。例如 iPhone 14（與 iPhone 13、12 同系列）的邏輯解析度是 390×844px，是手機畫面常用的 Frame 尺寸（見 iosref 的 iOS Resolution 對照表，2026）。

用 Constraints 讓元素跟著容器走

Constraints 是元素「黏在 Frame 哪一邊」的設定。你可以讓一顆按鈕固定在畫面右下、讓標題置中、讓側邊欄靠左且高度跟著容器伸展。當 Frame 尺寸改變時例如做響應式或縮放預覽，元素會依照 Constraints 自動重新排列。新手常漏掉這一步，結果畫面一縮放就全跑位。養成習慣：放好一個元素，馬上檢查它的 Constraints 對不對。

用 Auto Layout 做出有彈性的排版

Auto Layout 是 Figma 裡最強大、也最值得花時間學的功能。它讓一個 Frame 像 CSS 的 flexbox 一樣，自動把內部的子元素依方向、間距、留白排列好。文字變長，按鈕就自動變寬；清單多一項，容器就自動變高。它把「設計排版」與「前端排版」的距離拉到最小，做出來的設計到時候幾乎可以直接對應成 CSS。

Auto Layout 的核心設定包括流向、間距、留白（padding）、對齊與尺寸調整方式。水平流向可使用 Wrap；Grid 流向也已提供，但仍處於公開測試階段。把這些設定玩熟，就能做出按鈕列、卡片、表單、導覽列、列表與格狀排列。Auto Layout 與格線系統的搭配方式，可參考Figma Layout Guide 排版實戰。

排版需求	用什麼	為什麼
固定畫面尺寸與裝置外框	Frame	提供邊界與座標系統
元素要跟著容器縮放	Constraints	定義依附關係，避免跑位
內容會變動的彈性區塊	Auto Layout	自動撐開，貼近前端 flexbox
整齊的欄位與欄寬	Layout Guide	視覺對齊參考線，不影響輸出

這三件套的觀念是通用的。你之後不管是做登入頁、商品卡、儀表板，還是做完整的響應式網站設計，骨架都是這一套。把它練到變直覺，你的 Figma 功力就直接跨過新手的門檻了。

進階 Auto Layout 模式：巢狀排列與絕對定位

當你熟悉基本 Auto Layout 之後，會遇到更複雜的排版需求，例如一張卡片內部要有固定的圖示位置，或者一個清單項目裡要有不受 Auto Layout 排列規則影響的裝飾元素。這時候就需要理解 Auto Layout 的進階模式：巢狀結構與絕對定位。

巢狀 Auto Layout 是把一個已經有 Auto Layout 的 Frame，放進另一個 Auto Layout Frame 裡。例如做一個產品列表，外層用垂直 Auto Layout 排列每個產品項目，內層用水平 Auto Layout 排列圖片、標題與價格。這樣當產品項目增加或減少時，外層容器會自動調整高度；當任何一個產品項目的內容變長時，內層容器會自動撐開，外層也會跟著變。這種雙層結構是設計系統裡非常常見的模式，它能讓你的設計在任何內容長度下都保持整齊。

絕對定位則是在 Auto Layout 容器裡，把某個元素設為「不受 Auto Layout 控制」。你把一個圖示拉到卡片的右上角，它不會因為卡片內容變長而被推著走。這個功能常用於裝飾元素、狀態標籤、關閉按鈕這些需要固定在角落的東西。使用時在右側面板把「Absolute position」開關打開，這個元素就脫離 Auto Layout 的排列邏輯，可以自由定位。實務上，一個複雜的元件常常同時包含受 Auto Layout 控制的主要內容區，與用絕對定位固定的裝飾性元素。

這些進階模式的觀念跟 CSS 的定位系統非常接近，Auto Layout 對應 flexbox 或 grid，絕對定位對應 position absolute。如果你有前端背景，會發現 Figma 的 Auto Layout 幾乎就是把前端的排版邏輯搬進設計工具，這也是為什麼用 Auto Layout 做的設計特別容易交給工程師實作。

Component 與 Variants：減少重複工作的核心

如果 Figma 只能留一個功能給你，選 Component 就對了。它是把設計從「一次性的手工藝」升級成「可重複、可維護的系統」的分水嶺。一個沒有用 Component 的設計檔，跟一個有用 Component 的設計檔，一旦畫面數量變多，維護成本的差距會非常顯著。

Component 的原理很簡單：你把一個做好的單元（一顆按鈕、一張卡片、一個表單欄位）轉成主元件（Main Component），之後在檔案任何地方拉出來用的都是它的實例（Instance）。你改主元件的顏色、圓角、文字，未被實例局部覆寫的對應屬性會同步更新。當同一顆按鈕出現在很多畫面時，這個機制就能顯著減少重複修改。

Variants：用一個元件包住一整族變化

一個按鈕通常不會只有一種狀態，它會有預設、滑鼠移過、按下、停用、載入中等好幾種。早期做法是做五個獨立 Component，命名按鈕-預設、按鈕-移過，然後圖層面板爆炸。Variants 就是來解決這個問題的：你把一整族相關的變化收進同一個 Component Set，用屬性（Property）來切換狀態。用的時候從右側面板下拉選就好，像在切換選項一樣。

Variants 的價值不只在使用端，更在維護端。當設計師要新增一個「成功狀態」的按鈕，只要進 Component Set 加一個 Variant，全團隊立刻拿得到。這就是設計系統能夠 scale 的根本原因。Component 與 Variants 的使用時機，對照如下：

情境	做法	效果
同一個單元會重複出現	做成 Main Component	改一處，處處更新
同一個單元有多種狀態或尺寸	收進 Component Set，用 Variants 切換	圖層乾淨，使用一致
實例需要局部客製（文字、圖片）	用 Instance，或開放 Component Property	保持結構一致又允許內容變動
跨檔案共用整組設計系統	發布為 Team Library	多個專案共用同一份主元件

給自學者一個務實的建議：一開始不要急著把所有東西都做成 Component，那反而會把你綁死。先做出幾個畫面，等某個單元開始穩定重複出現，再回頭把它收成 Component。從實際重複中長出來的元件結構，才會貼近你真正的需求，避免淪為為了系統而系統的空架子。這個判斷跟做 SEO 一樣，先用內容證明價值，再回頭做架構整理，順序反了就會變成空架子。

進階 Component 模式：Component Properties 與實例替換

當你的 Component 越做越複雜，會遇到一個需求：同一個 Component 在不同地方要用時，只換某個圖示或某段文字，其他結構不變。早期的做法是複製 Instance 再手動改，但改了主元件又要重新改一遍。Component Properties 就是來解決這個問題的，它讓你在 Component 層級定義哪些欄位可以被 Instance 層級客製，像填表單一樣。

Component Properties 目前有五種類型：Boolean（顯示或隱藏圖層）、Instance Swap（替換巢狀元件）、Text（文字內容）、Variant（定義 Component Set 的狀態、尺寸或顏色等變化）、Slot（允許在實例的彈性區域內新增、編輯與重排內容）。Boolean 常用於切換圖層顯示與隱藏，例如一張卡片有沒有收藏按鈕；Instance Swap 用於替換圖示等巢狀元件，但保持外框與排版一致；Text 讓文字內容可以被替換；Variant 管理同一個 Component Set 的變體；Slot 適合清單或對話框等內容結構會變動的元件。Boolean 與 Text 屬性可分別套用對應類型的 Variable；顏色、間距等設計值則要把 Variable 綁定到對應的圖層屬性，五種類型的細節可查 Figma 官方文件 〈Explore component properties〉（2026）。

實戰上，一個設計良好的 Component Set 會把所有可變的參數都用 Properties 開放出來，讓 Instance 只需要調下拉選單或填欄位，就能產生出各種變化。例如一個產品卡片 Component，可以讓 Instance 決定要不要顯示折扣標籤（Boolean）、用哪一張產品圖（Instance Swap）、標題與價格內容是什麼（Text）。這樣設計師在用的時候，不需要進到 Component 內部手動替換圖層，只要在右側面板調參數就好，大幅降低誤操作與不一致的風險。

Instance Swap 還有一個進階用法，是用來建立「巢狀元件系統」。例如一個表單輸入框 Component，裡面的圖示可以是任何圖示 Component；當你發布這個輸入框到 Team Library，別人的檔案拉進來時，可以把圖示換成他們自己檔案裡的圖示 Component，而不需要重新發布。這個機制讓設計系統有更高的彈性，可以讓不同專案共用主結構，但允許專案層級的客製。

設計變數（Variables）與設計權杖系統

Variables 是 Figma 在 2023 年 Config 大會發表的功能，專門用來管理設計權杖（Design Tokens）與原型狀態。它比單純的樣式（Styles）更強大，因為它可以依模式、集合、作用域切換值，而且支援數字、字串、顏色、布林等多種資料類型。對要做深色模式、多品牌主題或多語言預覽的產品來說，Variables 是很有用的基礎建設（發表脈絡可見 Figma 的 Config 2023 官方回顧）。

Variables 的結構分成三個層級：Collection（集合）、Variable（變數）、Mode（模式）。Collection 是相關變數的群組，例如品牌色、間距、字級各成一個 Collection；Variable 是單一變數，例如 primary-color、spacing-unit；Mode 則是同一組變數在不同情境下的值，例如深色模式、淺色模式、高對比模式。你定義好變數之後，可以在樣式或 Auto Layout 裡綁定變數，當你切換 Mode 時，所有綁定該變數的地方都會自動更新。

實戰上的使用方式通常是先定義一組品牌色的 Collection，裡面有 primary、secondary、accent 等變數，每個變數在 Light Mode 與 Dark Mode 各有一組色值。你把所有需要切換顏色的地方綁定到這些變數，當你對 Page、Frame 或其他支援的容器套用不同 Mode 時，對應的設計就會從淺色切到深色，不需要手動去改每個圖層的填色。這個機制跟前端用 CSS 變數做主題切換的邏輯相近，工程師拿到你的設計時，可以對應到程式碼的設計權杖系統。

Variables 還可以用來管理間距、字級、圓角這些數值型的權杖。例如你定義一個 spacing-unit 變數，並把一組常用的基準值（例如 8px）指定給它，然後所有 Auto Layout 的間距都綁定這個變數；當你要調整整個產品的間距系統時，只要改這個變數的值，所有地方都會同步調整。這就是把設計從「手動調每個地方」升級成「定義權杖、全域套用」的關鍵。

Figma 官方文件對 Variables 有詳細的說明，包含如何把它用於設計系統、進階原型與 API，以及如何在不同 Mode 之間切換。如果你想深入理解 Variables 在設計系統裡的角色，可以直接看 Figma 官方的 Variables 指南（2026），裡面有完整的範例與教學。

樣式系統：Color / Text / Effect Style 怎麼規劃才不會越用越亂

Component 處理的是「結構的重複」，樣式（Style）處理的是「屬性的重複」。顏色、字體、陰影、格線這些值，如果你每次都手動填十六進位色碼、每次都重選字體，檔案一定越做越亂，而且改一個品牌色要改兩百個地方。樣式系統就是讓這些值變成可命名、可重用、可一次更新的資產。

Figma 的樣式分成幾大類：顏色（Color）、文字（Text）、效果（Effect）、版面參考線（Layout Guide）。做法都一樣：把一組值存成一個命名的樣式，之後從右側面板的樣式選單套用。改了樣式來源，所有套用它的地方同步更新。這跟 Component 是同一套思維，只是層級不同：Component 管結構，樣式管值。

顏色樣式：從設計權杖開始

規劃顏色系統時，可以先定義一組設計權杖（Design Token），通常分為品牌主色、中性色（灰階）、語意色（成功、警告、錯誤、資訊）。需要主題切換或多組模式時，Variables 比單純的 Color Styles 更適合承載權杖；Styles 仍可管理可重用的顏色、文字、效果與格線。命名可以用 primary、surface-danger 這類語意，也可以採有層級的原始色票，重點是團隊規則一致。顏色背後的取捨邏輯可以搭配色彩理論指南，把配色原理跟工具操作串起來。

文字樣式：先把層級定清楚

文字樣式定義的是字體、字級、行高、字距、字重的組合。規劃的重點是先把層級（H1 到 H6、內文、輔助文字、標籤）定清楚，再回頭填值。一個常見的陷阱是樣式開太多，標題就有八種，最終沒人記得哪一個要用在哪。寧可少，不要多；真的不夠用再加。中文字體在螢幕上的呈現又有自己的學問，從字體選擇到中英混排都值得專門處理，可以搭配中文字體挑選指南與英文字體推薦來擴充你的字體判斷力。

效果與格線樣式

效果樣式最常用的是陰影（Drop Shadow 與 Inner Shadow）與模糊。把常用的幾組陰影存成樣式，整個產品的立體感才會一致，不會出現「這個卡片的陰影跟那個卡片不一樣」的尷尬。Layout Guide 樣式則是把你常用的欄數、欄寬、間距存起來，跨畫面快速套用，保持版面對齊的一致性。

樣式系統的成熟度，是判斷一個設計師或一個團隊是否進入「系統化設計」階段的最好指標。當你的樣式清單乾淨、命名一致、覆蓋率高，你之後做任何新畫面都在組合既有資產，不必再從零開始。因此，Figma 的學習重點說到底是你有沒有建立起這套可重複的資產層，快速鍵反而是枝微末節。

互動原型：Prototype 模式的實戰邏輯

畫面做得再漂亮，如果它只是幾張靜態圖，客戶跟工程師還是看不到「點了會發生什麼事」。Prototype 模式就是讓你的設計動起來，把一張張畫面串成可以點、可以跳轉、可以看見狀態變化的流程。這一步做完，你的設計才真正從「圖」變成「產品」。

Figma 的互動原型核心觀念是三件事：畫面、觸發、動作。你在畫面上選一個元素（通常是按鈕或可點擊區域），設定一個觸發條件（點擊、滑鼠移過、按鍵、拖曳），再指定它要執行的動作（跳到另一個畫面、開啟覆蓋層、捲動到某處、切換元件 Variant）。把這三件事串起來，就能模擬出真實的產品操作流程。

實戰上有幾個觀念會讓你的原型效果好很多。第一，用 Variants 做狀態切換，比用兩個畫面互相跳轉乾淨得多，例如一個按鈕的預設與按下狀態，用 Change to Variant 就能在同一個畫面呈現。第二，過場動畫要貼近真實，Smart Animate 會自動偵測兩個畫面上名稱與階層相同的圖層，並補間它們的尺寸、位置、透明度、旋轉、填色等屬性差異，做出接近原生 App 的轉場，但要克制，過頭的動畫反而會失真（補間機制詳見 Figma 官方文件〈Smart animate layers between frames〉，2026）。第三，原型要測真實路徑，不要只做 happy path，把錯誤狀態、空狀態也做出來，測試時才看得到完整的產品體驗。

把原型當成溝通工具，而非展示工具。原型的目的是讓所有人對「點了會去哪、發生什麼事」有一致的想像，而非單純讓客戶驚嘆「好酷」。一份好的原型，能讓設計師、PM、工程師、客戶在開工前就對齊認知，省下後面無數的修改往返。想知道互動原型在整個 UI/UX 流程裡的位置，可以延伸閱讀UI 原型設計的完整說明。

進階原型技巧：Scroll、Overlay 與條件觸發

基礎的互動原型是把畫面用點擊串起來，但真實產品的互動常常更複雜：有可以捲動的長頁面、從側邊滑出的選單、滑鼠移過就彈出的提示、按鍵觸發的快捷鍵操作。這些進階互動在 Figma 裡都能做，只是需要用對設定。

要讓 Frame 在原型裡捲動，先讓內容超出 Frame 邊界，再在右側 Prototype 分頁的 Scroll behavior 區塊，將 Overflow 設為 Vertical、Horizontal 或 Both directions。「Fixed」不是開啟捲動的設定，而是用在子物件上，讓導覽列等元素在捲動時保持固定；也可使用 Sticky，讓物件捲到父層頂端後停住。

Overlay 是在當前畫面上疊加另一個畫面，適合做跳出視窗、側邊選單、底部抽屜這類「覆蓋式」互動。你只要把互動動作設成「Open overlay」，然後選一個目標畫面，Figma 會把那個畫面疊在當前畫面上。你可以設定背景遮罩、關閉方式（點背景或按 ESC）、動畫方向（從側邊滑入或淡入）。這種互動比跳到另一個畫面更貼近真實 App 的操作邏輯，測試時也能更準確地傳達設計意圖。

條件互動（Conditional Interactions）讓你可以設定「如果⋯就⋯」的邏輯。條件是以 Variable 與運算式來檢查，不會自動讀取一個靜態輸入框圖層的內容。例如，可先用字串或布林 Variable 保存表單狀態，再在送出按鈕的互動中加入 Check if/else：未通過時顯示錯誤狀態，通過時導向成功畫面。這讓原型能夠呈現更接近真實的邏輯分支，而不只是單一路徑的流程。

這些進階技巧的觀念都來自真實產品的互動模式，你越熟悉真實產品怎麼做互動，就越知道怎麼在 Figma 裡模擬出來。原型做得越細，工程師實作時就越有依據，測試時也能更早發現體驗問題。很多設計師覺得原型只是「給客戶看好看的」，但其實原型的真正價值是讓你在開發前就把互動邏輯想清楚，而不是等到實作才發現一堆狀況沒考慮到。

響應式設計在 Figma 裡怎麼落地

現代介面通常要應付手機、平板與桌面等不同尺寸。在 Figma 裡做響應式設計，可以重用同一套元件與資訊結構，再透過約束與 Auto Layout 調整排列；若不同斷點的導覽或內容優先順序真的不同，仍需要建立對應畫面。這個觀念跟工程師在網頁上做響應式相近，設計越清楚表達斷點行為，交付就越省事。

響應式設計在 Figma 落地有三個關鍵動作。第一步是用一般 Frame 表現需要驗證的尺寸，斷點應依產品的內容、目標裝置與實作的 CSS 斷點決定；Figma Design 並沒有名為「Breakpoint Frame」的 Frame 類型。第二步是把 Constraints 設對，讓元素知道自己在容器縮放時該靠哪一邊、該不該伸展。第三步是用 Auto Layout 處理重排，例如用 Wrap 讓項目在寬度不足時換行。若導覽需在不同尺寸間從橫向選單改成漢堡選單，這種結構變化通常要在對應的 Frame 或元件變體中明確設計，不是 Figma Design 會依斷點自動切換的設定。

這裡的細節很多，因為響應式本身是個大題目，從斷點策略、fluid 排版到容器查詢都有講究。如果要把 Figma 端的響應式操作摸透，建議直接看Figma 響應式設計的專門教學；如果想理解響應式在整個網頁設計領域的全貌，再延伸到響應式網頁設計與 AWD 和 RWD 的比較。把工具操作與設計觀念分開學，兩邊都會更清楚。

尺寸切換的挑戰	Figma 裡的做法	對應的網頁概念
元素要跟容器伸縮	Constraints 設 left-right 或 scale	width 百分比、max-width
區塊要重排	Auto Layout 切換方向或 Wrap	flexbox、grid、media query
不同尺寸顯示不同內容	在斷點 Frame 裡調整或隱藏元素	display none、優先級斷點
整體節奏與留白	Layout Guide 對齊參考	格線系統、斷點策略

做響應式時有一個觀念特別重要：不是每個斷點都要從零設計。你應該先做一個最適合內容的尺寸（通常是手機優先或桌面優先，看產品定位），再往上或往下調整。一個訊息層次清楚的設計，換到任何尺寸都不會崩；一個靠版面撐場面的設計，一換尺寸就散。這個道理跟做內容一樣，結構對了，換什麼載體都成立。

Dev Mode 與設計交付：設計到工程那條線

設計做完不是結束，而是另一段工作的開始。設計圖要變成真正能跑的產品，中間那條「設計交給工程師」的線，長期是設計團隊最痛的地方。顏色對不上、間距用猜的、切圖要手工匯出、互動邏輯只能靠口頭說明。Figma 的 Dev Mode 就是來把這條線拉直的。

Dev Mode 是 Figma 提供給開發者的檢視模式，讓工程師直接在設計檔上讀到可用的規格與程式碼線索。選到任何元素，可以看到它的尺寸、間距、顏色值（多種格式）、文字樣式，甚至產出對應的 CSS、iOS、Android 程式碼片段。它也會標示版本變化、讓設計師在畫面上直接標註開發要點，把以前散落在文件、聊天訊息、會議記錄裡的溝通，全部收回到設計檔本身。Figma 官方對 Dev Mode 有 完整的使用指南（2026），包含如何檢視程式碼、管理設計到工程的流程與最佳實踐。

對設計師來說，要讓 Dev Mode 真正發揮效果，前面那些功夫一樣都不能少。Dev Mode 讀出來的規格，品質完全取決於你的設計檔有多乾淨：你有用 Component，它才能正確辨識重複單元；你有設樣式，它才能給出一致的色值與字體；你有用 Auto Layout，它產出的程式碼才會貼近 flexbox，而非一堆絕對座標。換句話說，Dev Mode 稱不上獨立的魔法功能，它比較像是你前面所有好習慣的放大器。

設計交付的實戰清單

• 檔案結構先收乾淨：Frame 命名有意義、圖層有層次、沒有多餘的隱藏雜物，工程師才看得懂。
• 樣式與元件齊全：用樣式與 Component 而非裸值，Dev Mode 才能給準確規格。
• 互動邏輯做進 Prototype：不要只用文字描述「點了會跳哪」，直接做進原型，減少口頭溝通的失真。
• 標註變更與優先級：改了什麼、哪些先做、哪些可延後，用 Dev Mode 的標註功能寫清楚。
• 提供資產：圖示、插畫、圖片用正確格式與倍率匯出，工程師不用再自己切。

這條設計到工程的線，才是很多團隊效率的真正瓶頸；設計本身漂不漂亮反而是次要的事。一個會做交付的設計師，價值遠高於只會畫漂亮畫面的設計師，因為他讓整個團隊動得更快。

Dev Mode 進階：程式碼品質、變數映射與設計系統文件

Dev Mode 不只是讓工程師看尺寸與顏色，它還能讓設計與程式碼之間的映射更精準。當你的設計用 Variables 管理權杖，Dev Mode 可以顯示每個變數的名稱與值，工程師可以直接對應到他們的程式碼變數。例如你在 Figma 定義了一個 primary-color 變數，工程師在 Dev Mode 看到這個變數時，就能在他們的程式碼裡用同樣的名稱，這樣當你調整變數值時，他們也知道要更新哪一個程式碼變數。這種設計權杖對應到程式碼變數的做法，在工程端常透過預處理器落地，想理解工程師那一側怎麼承接，可以進一步看SCSS 變數與 mixin的用法。

Dev Mode 的程式碼片段功能會依你選的元素產出對應的程式碼，原生支援 Web 的 CSS、iOS 的 SwiftUI 與 UIKit、Android 的 Jetpack Compose 與 XML 等格式，可以從下拉選單切換。這些程式碼的品質取決於你的設計結構：如果你用 Auto Layout，產出的 CSS 會包含 flexbox 屬性；如果你用絕對定位，產出的就會是 position absolute。工程師可以複製這些程式碼片段直接貼到他們的專案，或者把它當成參考來實作。如果要支援 Flutter、React 或 Tailwind 等額外框架，可以透過 Code Connect 或第三方外掛擴充。Dev Mode 支援的程式碼格式與產出邏輯，在 Figma 官方說明文件〈Use code snippets in Dev Mode〉（2026）中有詳細列出。

設計系統文件在 Dev Mode 裡有專門的呈現方式。當你發布一組設計系統到 Team Library，工程師可以在 Dev Mode 瀏覽所有可用的元件、樣式、變數，並看到每個元件的使用範例與說明。Figma 提供了一個「Dev Mode documentation」功能，讓設計師可以在元件旁加註說明、使用規範、Do's and Don'ts，這些內容會直接顯示在 Dev Mode，讓工程師不需要切換到另一個文件網站就能看到設計規範。

還有一個實用功能是「比較版本」，工程師可以在 Dev Mode 切換設計的不同版本，看到某個元件從上一版到這一版改了什麼。這在追蹤變更、對接測試時非常有用，可以讓工程師清楚知道「這個圓角從前一版改成更大」或「這個間距被拉開了」，而不需要設計師再列一份變更清單。Figma 的版本歷史功能會記錄所有變更，Dev Mode 只是提供了一個方便檢視的介面。

團隊協作與檔案組織：多人專案怎麼不吵架

當專案從個人變成團隊，Figma 的價值才真正體現出來。但多人協作也帶來新的問題：圖層命名誰來統一、發布元件怎麼避免衝突、版本歷史怎麼管理、評論要怎麼整理。這些問題不是靠 Figma 功能自動解決，而是要靠團隊約定與檔案組織。

檔案組織的第一個原則是「一個檔案一個職責」。不要把所有畫面塞進同一個檔案，而是依功能或模組分成多個檔案，例如「設計系統」、「登入註冊」、「主要功能」、「設定頁」。這樣每個檔案的圖層數量可控，多人協作時不會一直碰到「檔案鎖定」的問題。團隊檔案通常會有一個核心的「設計系統檔案」，裡面放所有 Component、樣式、變數，其他功能檔案則從這個檔案引用元件。

命名規範是多人協作的基礎。圖層命名要一致，例如用「元件名-狀態-尺寸」的格式；Frame 命名要清楚描述畫面用途，例如「登入頁-預設狀態」。如果團隊用多種語言，最好統一用英文命名，避免特殊字元或空白，因為某些 Plugin 或程式碼產出工具可能對非英文命名支援不佳。

發布元件到 Team Library 時，要有一個發布策略。不要每做一個小修改就發布一次，那會讓版本歷史混亂；也不要累積好幾十個變更才發布一次，那會讓團隊拿不到最新的元件。實務上的做法是固定週期發布，例如每週五下午發布一次本週的更新，並在發布說明裡列出這次改了什麼。這樣團隊就知道什麼時候該更新他們的元件庫，也不會漏掉重要的變更。

評論與回饋系統是多人協作的關鍵。Figma 的評論功能讓任何人可以在畫面上打點、留下意見、標記人員。好的習慣是評論要具體，不要只寫「這裡怪怪的」，而是寫「這個按鈕的間距看起來太擠，建議拉開一些」。具體的評論能讓設計師直接知道要改什麼，不需要再猜。評論還可以分類、把解決的評論設成已完成，這樣在追蹤變更時會更清楚。

團隊權限管理也很重要。Figma 的權限分為「可檢視、可編輯、管理員」，要依照角色給對的權限。例如 PM 或利害關係人通常只需要「可檢視」，工程師在交付階段可能需要「可編輯」來檢視規格與標註，核心設計師則需要完整編輯權限。Organization 或 Enterprise 方案還有更細粒度的權限控制，例如限制某些檔案只能給特定團隊成員存取，這在處理敏感設計或未發布功能時特別重要。

Plugins 與社群資源：把 Figma 變成你的工作引擎

Figma 本體已經很強，但真正讓它變成「工作引擎」的是 Plugin 生態與社群資源。Plugin 讓你把重複性的雜事自動化，社群檔案讓你直接站在別人的成果上往下做。自學者一定要花時間認識這層資源，因為它能把你的效率拉到跟資深設計師同一個量級。

Plugin 的用途大致分成幾類：圖像與素材取得（圖示、插畫、庫存照片、去背）、排版與內容（假文字、假資料、色彩配色、字體探索）、效率工具（批次命名、重新排序、匯出切圖）、設計轉換（HTML 轉設計、設計轉程式碼）。剛開始不用一次裝滿整份Figma 必裝外掛，先從你實際重複做的雜事回推：如果你每次都在找圖示，就找一個圖示 Plugin；如果你每次都在手填假文字，就裝一個內容填充工具。從痛點出發，裝的才會真的用到。

素材類的 Plugin 跟外部資源是重點。Figma 有大量整合圖示庫與庫存照片的 Plugin，能讓你不用離開工具就拿到素材。想了解 Figma 在圖示資源上的整合方式，可以看Figma 圖示 Plugin的整理；庫存照片類可以參考Figma 庫存照片 Plugin。如果你設計的是需要大量擬真圖片的介面，這些 Plugin 能省下非常可觀的時間。去背與影像處理也有專門工具，可以延伸看看AI 去背工具的比較。

除了 Plugin，Figma 社群還有兩個寶庫。Community 檔案裡有成千上萬的免費 UI Kit、設計系統、圖示包、線框稿範本，可以直接複製到自己的檔案改用，是新手快速搭起專案的捷徑。Widget 與協作工具則讓你在檔案裡嵌入待辦清單、投票、文件，把設計檔變成團隊的工作空間。對自學者而言，多看別人怎麼組織檔案、怎麼命名、怎麼切結構，進步速度會比自己悶頭畫快非常多。

進階的設計效果與動效 Plugin

當你做到比較精緻的視覺時，會開始需要特殊的設計效果。Figma 在這一塊有大量 Plugin 與技巧支援：想做玻璃擬態（Glassmorphism）的模糊與透明效果，可以參考Figma 玻璃擬態效果；要做按鈕的互動與載入動畫，看Figma 按鈕動畫與Figma 載入動畫；想做滑桿、視差滾動、圓弧文字這類特殊元件，也有滑桿設計與視差效果可以參考。這些進階效果是讓你的作品集脫穎而出的關鍵，但前提是你已經把前面三件套與 Component 練熟，否則效果做越多、檔案越亂。

如果你想看 Figma 自己在 AI 功能上的佈局，例如 AI 生成、智慧排版這類正在快速演進的能力，可以延伸閱讀Figma AI 功能指南。AI 工具在設計領域的定位跟我們在行銷領域看到的一樣：當效率放大器，不要當取代判斷力的黑箱。把基礎功練好，AI 才能放大對的東西。

格線系統與 Layout Grid：對齊與欄位的邏輯

Layout Grid 是 Figma 裡讓版面對齊變得系統化的工具。它不像 Auto Layout 那樣會改變元素的排列，而是提供視覺上的參考線，幫助你把元素對到同一條線上。對於需要嚴格對齊的設計，例如多欄排版、卡片網格、儀表板，Layout Grid 是不可或缺的輔助。

Layout Grid 有三種類型：欄位格線（Columns）、列格線（Rows）、方格格線（Grid，或稱 Uniform Grid）。欄位格線是最常用的，它把 Frame 分成 N 個欄位，每個欄位有固定的寬度與間距，你可以設定欄數（例如 12 欄、24 欄）、欄寬、間距、邊距。列格線則提供水平方向的對齊參考，常用來建立排版的垂直韻律與文字行高對齊。方格格線是用等大小的小方格覆蓋整個 Frame，適合需要嚴格像素對齊的設計，例如圖示與間距系統。官方文件預設的方格是 10px 的均勻格線（見 Figma 文件〈Create layout guides〉，2026）。

欄位格線的使用邏輯跟網頁設計的 grid system 完全一致。你設定一個 12 欄的格線，並指定欄寬與間距，然後把元素對到格線上。這樣做出來的設計，轉成網頁時可以直接用 CSS grid 或 flexbox 實作，工程師不需要重新計算間距。格線系統的詳細觀念可以結合網頁設計的格線原理一起理解，把工具操作與設計原理連起來。

Layout Grid 與 Auto Layout 的關係是「格線負責對齊，Auto Layout 負責排列」。你可以用格線來決定「這張卡片大概對到第 3 到第 5 欄」，然後用 Auto Layout 來處理卡片內部元素的排列。兩者不衝突，而是各司其職。很多新手會以為用了 Auto Layout 就不需要格線，但其實格線提供的是一個「大尺度的對齊框架」，Auto Layout 處理的是「區塊內部的排列邏輯」。

格線也可以跟 Style 系統結合。你可以把自己常用的格線設定存成 Grid Style，例如「12 欄 8px 間距」、「24 欄 4px 間距」，然後在不同 Frame 上套用。這樣團隊的所有檔案都能用同一組格線參數，保持版面節奏的一致性。格線樣式不會影響輸出，它只是設計階段的輔助工具，但對於需要多人協作的大型設計系統來說，格線統一可以大幅減少「為什麼這兩個畫面的間距看起來不一樣」的爭論。

匯出與資產管理：工程師真正會收到的檔案

設計做得再好，如果匯出的資產格式不對、倍率不對，工程師實作時還是要自己重新切圖。Figma 的匯出功能已經很強，但要讓它真正發揮效果，你需要理解什麼時候該用什麼格式、倍率要怎麼設、什麼時候該用 SVG 而非 PNG。

Figma 原生匯出支援 PNG、JPG、SVG、PDF 四種格式。PNG 支援透明背景，適合圖示、logo、需要去背的圖片；JPG 檔案較小但不支援透明，適合照片或複雜的插畫；SVG 是向量格式，可以無限縮放不失真，適合圖示、簡單插畫、logo；PDF 則保留向量與文字資訊，適合需要列印或高解析度輸出的素材。Figma 的匯出面板讓你一次匯出多種格式與倍率，例如一個圖示同時匯出 1x 的 PNG 與 2x、3x 的高倍率版本，讓工程師依不同裝置密度使用（格式與設定詳見 Figma 官方文件，2026）。要注意的是，Figma 原生匯出尚未支援 WEBP，若需要 WEBP 得透過第三方外掛處理。

倍率（Scale）是指在高解析度裝置上，圖片要以原始尺寸的幾倍匯出。Apple 的 Retina 與 Super Retina 顯示器分別採用 @2x 與 @3x 的密度倍率，所以手機設計至少要準備 2x 與 3x 的圖片，才能在這些螢幕上看起來清晰（見 Apple 的 Human Interface Guidelines 圖片指南，2026）。Figma 的匯出設定讓你可以指定 1x、2x、3x，它會自動依照倍率調整輸出尺寸。實務上的建議是：手機設計至少準備 2x 與 3x，桌面設計通常 1x 與 2x 就夠。如果要更細緻的控制，可以依裝置像素密度（1x、2x、3x）分別匯出，讓工程師依實際需求選用。

SVG 匯出有一個重要觀念是「合併路徑」。當你匯出一個 SVG 圖示時，Figma 會把所有形狀合併成一個 SVG 路徑，這樣檔案最小且相容性最好。但如果你的圖示有漸層、陰影、效果，Figma 會把這些效果轉成 SVG 的濾鏡或光柵化部分區域，導致檔案變大或失去向量特性。匯出 SVG 時最好用純色、無特效的設計，才能充分發揮向量的優勢。

批次匯出是效率工具。Figma 的匯出面板可以讓你一次選多個圖層或 Frame，然後一起匯出。這對於需要一次準備大量素材的專案非常有用，例如一整個圖示包，你可以全選、指定 2x 與 3x，然後一次匯出所有圖示。匯出後的檔案會依照你設的命名規則自動命名，例如「[email protected]、[email protected]」，工程師拿到之後直接用，不需要再改名。

還要提醒一句，匯出前要先確認圖層的可見性與裁切範圍。如果你不小心把一個隱藏的圖層或超出 Frame 的裝飾元素一起匯出，工程師收到的檔案會有雜訊。養成習慣：匯出前先用「Preview」模式檢查一次，確認匯出範圍與內容都對，再按下匯出。這個小動作能省下後續無數的「圖片怎麼多了白邊」或「為什麼這裡多了一條線」的溝通成本。

自學路線圖：從第一天到能獨立接案的三階段

很多自學者最焦慮的不是「學不會」，而是「不知道學到哪裡算夠」。我給你一張三階段的路線圖，讓你能對著它評估自己現在在哪、下一步該往哪走。這張圖不是我發明的，它是從大量設計師的成長路徑歸納出來的共同節奏，你可以拿來當自己的學習地圖。

第一階段：工具熟悉期（大約二到四週）

這個階段的目標是讓你「把 Figma 當工具用得順手」。重點是三層心智模型、介面五區、Frame 與 Auto Layout 三件套、基本 Component 與樣式。具體的練習是：找三個你喜歡的現成介面（一個網頁、一個 App 畫面、一個卡片元件），用 Figma 完整重做出來。重做別人的介面是學工具最快的方式，因為你不用煩惱設計內容，只要專注把結構與屬性做對。這個階段不要碰複雜的 Variants 或大型設計系統，先把單一畫面做扎實。

第二階段：系統建立期（大約一到三個月）

這個階段的目標是讓你「從做單一畫面，升級到做一組有系統的畫面」。重點轉向 Component 與 Variants、完整的樣式系統、Prototype 互動、響應式設計、基本的 Dev Mode 交付。具體的練習是：自己設計一個小型的產品，例如一個簡單的待辦清單 App 或一個個人部落格的前台，至少做五到十個畫面，並且把它串成可點的互動原型。這個練習會強迫你面對「元件重複、狀態切換、不同尺寸」這些真實問題，是從工具使用者跨向設計師的關鍵關卡。

第三階段：實戰交付期（大約三到六個月以上）

這個階段的目標是讓你「做出能交付、能協作、能維護的設計」。重點轉向跨檔案的 Team Library、設計系統的規劃與命名規範、與工程師的交付流程、Plugin 與社群資源的進階運用。具體的練習是：接一個真實的小專案，無論是幫朋友的專案、做一個 side project、還是貢獻開源設計資源，重點是經歷一次完整的「需求到交付」流程。真正做過一次交付，你才會知道前面所有功夫的價值在哪。

階段	核心能力	驗收標準
工具熟悉期	介面、Frame、Auto Layout、基本 Component	能重做出三個現成介面
系統建立期	Variants、樣式系統、Prototype、響應式	能獨立設計一個小型產品的完整流程
實戰交付期	設計系統、交付流程、團隊協作	能完成一次真實的需求到交付專案

這張路線圖只是一個參考節奏，不是考試時間表。每個人的背景不同，有設計底子的人第一階段可能兩週就過，從零開始的人可能要久一點。重點不是趕進度，而是每個階段都做出對應的產出，用產出來證明自己真的會了，趕進度反而沒有意義。想看更完整的網頁設計自學路徑全貌，可以延伸到網頁設計自學路線圖，把 Figma 放進更大的設計學習藍圖裡；免費的學習資源則可以參考UI/UX 免費學習資源的整理。

新手最常踩的五個坑

教學如果不講地雷，就不算完整。這五個坑是新手最容易反覆踩到的，每一個都會讓你多花好幾倍的時間修正。提早知道，就能提早繞開。

1. 把所有東西散在畫布上，不用 Frame 收納。後果是檔案越長越亂、響應式做不出來、交付時工程師看不懂。解法很簡單：從第一個畫面開始就養成用 Frame 收納的習慣。
2. 用絕對座標硬排，完全不用 Auto Layout。後果是畫面改一個字、整個版面跑位，跟前端對不上。解法是預設就用 Auto Layout 排任何有規律的區塊，只在必要時才手動調位置。
3. 元件不做 Component，瘋狂複製貼上。後果是改一個按鈕要改兩百個地方，而且一定會漏。解法是看到第三次重複，就回頭收成 Component。
4. 樣式用裸值，顏色字體全靠手填。後果是品牌色一改就崩盤，視覺一致性靠運氣。解法是從第一個畫面就建立命名樣式，之後只套樣式不填裸值。
5. 原型只做 happy path，不測錯誤與邊界狀態。後果是到了開發或測試階段才發現一堆沒設計的狀態，來回修改成本爆增。解法是設計任何流程時，主動列出空狀態、載入中、錯誤、無資料這幾種邊界並做出來。

這五個坑的共同特徵是：前期省掉結構整理，後期常要付出更多修正成本。具體差距取決於檔案規模與協作人數，但越多人共用同一套元件，命名與結構越重要。

學完 Figma 之後：UI/UX 設計的下一步

把 Figma 學到能獨立做出完整作品，其實只是 UI/UX 設計旅程的起點。工具是手段，不是目的。真正讓你成為有價值的設計師的，是工具背後的設計判斷力：資訊層次怎麼安排、視覺動線怎麼引導、互動回饋怎麼設計、商業目標怎麼融入介面。這些判斷力不會因為你 Figma 用得很熟就自動長出來，它需要你持續練、持續看、持續拆解好作品。

Figma 之後，建議往三個方向擴張。第一是設計觀念的深化，從排版原理、色彩理論、字體設計到版面構成，把工具操作背後的為什麼補起來，例如排版與版面設計技巧與網頁設計必備元素都是很好的切入點。第二是設計與開發的接軌，理解 HTML、CSS、基本的互動邏輯，會讓你的設計更可落地，交付更順暢，這也是很多設計師跟工程師之間摩擦的根源。第三是商業與使用者的視角，設計最終要服務某個目標，不管是轉換、留存還是品牌體驗，懂一點行銷與數據會讓你的設計更有說服力。

如果你最終的目標是接案或進團隊，作品集會是你最重要的資產。把你在三階段路線圖裡做出的成品整理成有脈絡的作品集，呈現你的思考過程而不只是漂亮的成果圖。想知道怎麼從零搭一個能接案的設計作品集站，可以參考作品集網站設計與作品集網站架設教學。

Figma 是常見的 UI/UX 設計工具，但工具熟練度不等於完整的設計能力。除了操作，也要練習資訊層級、使用者研究、互動回饋與驗證方法；可從同理、定義、發想、原型與測試開始，讓工具練習接上問題分析。

給你一個可以立刻做的動作：今天就開一個新的 Figma 檔案，用這篇的三層心智模型，把一個你常用的 App 畫面完整重做出來。不用追求完美，只要把 Frame、Auto Layout、一個 Component 用對就好。做完這一個練習，你對 Figma 的理解就會跨過那一道一直卡著你的門檻。剩下的，就是持續做、持續改、持續把判斷力磨出來。工具會等你，市場也會等你，只要你願意開始動手。