新手第一次打開 Figma，最先卡住的往往不是設計能力，而是滿版的英文工具列——Toolbar、Design、Prototype、Export，滑鼠點了兩下畫面卻毫無反應，連該從哪裡下手都摸不著頭緒。
Figma 官方公布的資料顯示，截至 2025 年 3 月，財星 500 大企業裡有 95% 都在使用 Figma。但「很多人在用」跟「打開就會用」完全是兩回事，普及率再高，新手照樣得從認識介面開始。Figma 是一款跑在瀏覽器裡的雲端 UI/UX 設計與原型工具，最大的賣點是不用安裝、開瀏覽器就能設計，還能讓整個團隊同時在同一份檔案裡工作。搞懂它到底是什麼、能拿來做什麼，是不少人打開 Figma 那一刻就卡住的第一關。
先從「Figma 是什麼」講起，再一路拆到介面配置、核心功能與最新更新，把整張功能地圖攤開來看一次。
Figma 是什麼？
其實從名字本身看不出什麼線索，Figma 是一款完全架在瀏覽器上的雲端設計工具，設計師不用下載安裝、不用煩惱版本要不要更新，打開瀏覽器登入帳號就能開始畫。它同時涵蓋向量繪圖、介面設計、原型互動與設計系統管理這幾個面向，換句話說，從畫一個按鈕、串起整個 App 的操作流程，到管理一整套設計規範，都在同一個工具裡完成。
Figma 最初打出名號的關鍵，不是畫圖功能多強，而是多人即時協作，同一份檔案，幾個人可以同時打開、同時編輯，彼此的游標與修改即時同步，不用再靠「傳檔案、等對方存好再回傳」這種老方法搶進度。這也是為什麼財星 500 大企業裡有 95% 都在用 Figma，協作需求本來就不分公司大小，只要團隊裡超過一個人在做設計，同步編輯的價值就會顯現出來。
常見的用途也不只侷限在網站介面。設計 App 畫面、串接原型測試流程、整理一份簡報，甚至搭起一整套設計系統（圖示、色彩、按鈕規格通通管理在裡面），都算 Figma 的守備範圍。它跟 Photoshop 這類修圖軟體的本質差異也很單純，修圖軟體處理的是像素堆疊出來的影像，Figma 處理的是可以重複使用、彼此連動的介面元件。這個差異，也是後面幾節會一路拆解的重點。
怎麼開始使用 Figma？從註冊到建立第一個設計檔
多數人卡住的第一個實際問題，通常是要不要安裝、要不要先付費。Figma 完全跑在瀏覽器裡，不管用的是 Windows 還是 Mac，打開瀏覽器登入帳號就能直接開始畫，不需要另外下載安裝檔；如果習慣桌面應用程式的操作手感，官方也提供對應的桌面版與行動版 App，功能跟瀏覽器版一致，差別只在使用習慣。
註冊本身也不麻煩，用 Google 帳號或一組 Email 就能完成，連信用卡都不用先綁定。免費的 Starter 方案已經能建立設計檔案、使用完整的設計工具，對個人自學或先摸熟介面的人來說，一開始並不需要煩惱付費，要不要升級是用量變大之後才需要考慮的事（方案怎麼選，本文最後一節有專門說明）。
有一件事值得先說清楚，免得白費工夫去找。Figma 官方介面目前沒有繁體中文，也沒有簡體中文，支援的語言只有英文、日文、韓文、法文、德文、西班牙文（分西班牙與拉丁美洲兩種）與葡萄牙文（巴西）。換句話說，想切成中文介面目前是做不到的，與其花時間找「怎麼改中文」的設定，不如直接照著英文按鈕名稱記熟，操作幾次下來就不陌生了。
打開 Figma 看到的四個區塊：工具列、圖層、畫布與屬性面板
建好第一個檔案、真正打開編輯畫面時，螢幕上其實只分成四塊，搞懂這四塊在做什麼，先前那種「畫面複雜到不知道從哪裡點」的感覺就會消掉大半。
畫面最上方是工具列，放的是「建立物件」用的工具：選取工具（移動與選擇物件）、Frame 工具（建立版面容器）、圖形工具（矩形、圓形等基本形狀）、文字工具，以及鋼筆工具（畫任意向量路徑）。新手不必記住每一顆按鈕，先認得選取工具跟 Frame 工具這兩個，就能開始畫東西。
左側是圖層面板，顯示畫面裡所有物件的清單與階層關係，誰在誰裡面、誰疊在誰上面，一目瞭然。中央是畫布，而且是一張理論上沒有邊界的無限畫布，可以在上面同時擺放好幾個版面、好幾個專案，不必像傳統軟體一樣一次只能開一個檔案。右側則是屬性面板，依照選取的物件與所在模式，切換顯示不同內容：Design 模式調整顏色、間距、字型這些設計屬性，Prototype 模式設定互動與轉場，Inspect 模式則是給工程師看程式碼與尺寸用的檢視畫面。
先把這四塊的分工記起來，後面每一節介紹的功能，幾乎都是在這四個區塊裡操作，不會憑空跑出新畫面。
Frame 是什麼？跟 Section、Group 有什麼差異？
四個區塊認熟之後，新手接下來最容易卡住的，是 Frame、Section、Group 這三個聽起來很像、用途卻完全不同的容器概念。
Frame 是 Figma 裡最核心的容器，可以把它想成「一個畫面或一塊版面」，網頁的一個頁面、App 的一個畫面，通常都是一個 Frame。Frame 的關鍵不只是把物件框起來，它還能套用 Auto Layout（下一節會細講）、能被拿去串接 Prototype 互動，是唯一具備這兩項能力的容器。
Section 則單純是畫布上的整理工具，用來把不同區域的內容分類、貼標籤，例如把「首頁設計」跟「會員中心設計」分別框成兩個 Section，方便在龐大的畫布上找東西，但 Section 不影響內部物件的排版邏輯，拿掉它，裡面的東西該長怎樣還是怎樣。Group 則是最輕量的一種，單純把幾個物件暫時綁在一起，方便一起移動或縮放，既不能套 Auto Layout，也無法拿去做原型。
簡單的判斷原則是：要做版面設計、之後要連接 Prototype，一律用 Frame；純粹想在畫布上分類、整理不同區塊，用 Section；只是暫時把幾個物件綁起來搬動，用 Group 就夠了。
圖層面板：管理複雜設計稿的關鍵
設計稿一旦從幾個物件變成幾十、幾百個，圖層面板管得好不好，會直接決定你能不能找到東西。
左側圖層面板呈現的，是所有物件的階層關係與疊放順序，上面的圖層蓋在下面的圖層之上，巢狀結構清楚呈現誰包在誰裡面。物件跑版、找不到某個按鈕在哪裡，問題多半不是設計錯了，而是圖層根本沒放在該在的位置，或者疊放順序亂掉。
替圖層取一個看得懂的名字，看似是件小事，卻直接影響效率與交接品質，「Rectangle 47」跟「主按鈕/背景」放在同一份檔案裡，後者一眼就知道在做什麼，前者得點開才知道。設計稿變大之後，Figma 還提供 Pages（分頁） 功能，可以把不同畫面、不同專案分別歸到不同分頁裡管理，不必把所有東西都塞在同一張畫布上。
元件（Component）與變數（Variables）：讓設計保持一致的兩個功能
改一個按鈕的顏色，其他頁面上的同款按鈕卻沒有跟著變，這是不少人用 Figma 一段時間後會遇到的困惑，關鍵在於元件（Component）與變數（Variables）這兩個功能，它們是 Figma 用來支援「設計系統」的核心，讓整份設計稿改一次、到處都同步。下面用三個小節拆開講，一次塞太多新名詞容易讓人暈頭。
元件與實例：改一次，全部同步更新
一個按鈕、一張卡片這類會重複出現的元素，可以先做成一個主元件（Component），之後每次「複製」出去使用的版本，叫做實例（Instance）。實例跟主元件保持連動關係，只要修改主元件的顏色、字型或間距，所有從它衍生出去的實例都會自動跟著同步更新，不用一個一個頁面手動改。
這個機制對維護多頁畫面特別有用。一個網站可能有幾十個頁面都用到同一款按鈕，靠元件管理，調整一次視覺，全站的按鈕就一起變了，不必擔心漏改哪一頁。
Variants 變體：一次管理按鈕的不同狀態
同一個按鈕，其實有好幾種狀態要顧：預設、滑鼠移過去、被點擊、不可點擊。如果每種狀態都做成一個獨立元件，管理起來會非常混亂，Variants（變體）就是用來把這些狀態收進同一組元件裡管理的功能。
有了 Variants，切換按鈕的不同狀態，不必重新畫一次，只要在屬性面板裡選取對應的狀態即可，元件與樣式的一致性也因此更容易維持。
Variables 變數：一鍵切換淺色與深色模式
Variables（變數）用一個常見情境最容易理解，切換淺色模式（Light Mode）與深色模式（Dark Mode）就是典型例子。做法是先定義好一組顏色變數，把它套用到設計裡的各個元素上，之後只要整體切換變數模式，整份設計稿的配色就會跟著換掉，不必逐一手動改色。
這個功能的價值，在設計稿越做越大之後特別明顯，沒有變數的話，深色模式上線等於把每個畫面的每個顏色重新調一次；有了變數，切換模式就是點一下的事。
Auto Layout：讓版面跟著內容自動調整
Auto Layout 被不少 Figma 使用者公認是最重要的進階功能之一，作用是讓 Frame 裡的元素依照設定好的方向、間距與內距自動排列，內容一有變動，例如按鈕上的文字變長了，版面不需要手動重新排，系統會自己撐開。
啟用方式很單純，選取物件之後套用 Auto Layout，就能設定排列方向（水平或垂直）、元素之間的間距，以及內容與邊框之間的內距。這裡容易搞混的是兩種尺寸模式的差異：一種是「內容決定大小」，容器會依裡面內容的多寡自動撐大或縮小；另一種是「自動填滿容器」，元素會依照外層容器的尺寸自動延展。新手最常見的跑版原因，就是把所有子元素都設成固定尺寸，一旦換了螢幕寬度或內容變動，版面立刻走樣，只要把該撐大的元素改回自動調整的模式，這類問題多半就能解決。
Prototype 原型：讓設計稿動起來的互動模擬
畫好一張張靜態畫面之後，Prototype（原型）模式能把它們變成可以點擊、可以展示流程的互動體驗，不用寫一行程式碼，只要把不同畫面之間用連接線串起來，設定觸發方式（點擊、滑鼠懸浮、拖曳）與轉場效果，就能做出接近真實產品的操作感受。
舉個具體情境：設計一個登入畫面，點擊「登入」按鈕之後，透過 Prototype 把它連到首頁畫面，設定觸發條件是「點擊」、動作是「切換到」，測試的人點下按鈕就會真的看到畫面跳轉到首頁。Prototype 要解決的正是這個問題，讓你能在寫程式之前，先驗證整個操作流程順不順。做完之後，Figma 能產生一個分享連結，對方不需要有 Figma 帳號，打開連結就能直接體驗這個原型，拿去給團隊討論、給客戶展示、找使用者測試都很方便。
Smart Animate：兩個畫面之間的自動過場動畫
Prototype 串起來的畫面，如果只是直接切換，體驗會顯得生硬，Smart Animate 就是用來補上這段轉場的功能。只要兩個 Frame 裡有「同名」的元件或圖層，Smart Animate 就會自動偵測兩者之間的差異，產生流暢的過渡動畫，例如一個圖示從左上角平滑移動到右上角；不需要手動製作關鍵幀，只要確保元件名稱一致，系統就會自己算出動畫路徑。
多人協作：留言、游標與檔案分享權限
Figma 最初打響名號的招牌功能，就是多人可以同時編輯同一份檔案，即時看到彼此的游標在畫面上移動、看到對方正在改哪個物件，不用另外開視訊會議，也不用把截圖傳來傳去確認改到哪一版。
除了同步編輯，團隊成員也能直接在畫布上針對特定物件留言討論，意見直接釘在對應的位置上，不會像用聊天軟體討論那樣，講半天還要對方回頭確認「你是說哪一個按鈕」。分享檔案時，還能依角色設定不同的權限，檢視、留言或編輯，分給 PM 檢視進度、工程師編輯或檢視程式碼、客戶留言回饋，各自看到、能做的事都不一樣，不必整份檔案對誰都全開。
Dev Mode 如何縮短設計到開發的距離？
設計稿完成之後，交給工程師的那一刻，常常是溝通成本最高的環節，間距是 8 像素還是 12 像素、顏色的色碼是多少，過去多半靠工程師肉眼猜測或反覆詢問設計師。Dev Mode 就是 Figma 專門為了縮短這段落差設計的模式。
進入 Dev Mode，工程師不用再猜測數值，選取一個元件就能直接看到對應的程式碼片段（支援多種語言）、精確的間距與尺寸標註，還能一鍵下載切圖素材、比對這一版設計跟前一版差在哪裡。這對「設計師與工程師減少溝通成本」這件事幫助很大，原本得靠開會或反覆訊息確認的細節，現在直接攤在介面上。要誠實說清楚的是，Dev Mode 完整功能只開放給付費方案的 Dev seat 或 Full seat 使用者，免費的 Starter 方案沒有這項功能。
外掛（Plugins）：擴充 Figma 內建沒有的功能
Figma 內建的工具再齊全，也不可能涵蓋每個人的所有需求，這也是它建立外掛（Plugins）生態系的原因，透過 Figma Community 的外掛市集，任何人都能安裝別人開發好的小工具，補足內建功能沒做到的地方。
常見的外掛類型包括：自動去背圖片，省掉切換到修圖軟體再匯入的步驟；直接在設計稿裡插入圖庫素材，不用另開分頁下載再貼上；或是把既有的網頁畫面轉換成 Figma 的可編輯圖層，方便重新設計或參考既有版面。安裝方式也很直覺，在頂端選單或資源庫裡搜尋外掛名稱，點擊安裝之後就能在設計檔案裡直接呼叫使用。外掛的種類與數量非常龐大，而且更新汰換速度很快，與其列一份可能很快就過時的清單，不如先掌握「遇到內建工具做不到的事，先去外掛市集找找看」這個習慣。
Figma 最新功能：Motion、Sites 與 Make 在做什麼？
Figma 已經不只是單純的設計工具，而是往「從設計到成品一次做完」的方向擴張，這個方向從 2025 年的 Config 大會公布 Sites 與 Make、到 2026 年的 Config 大會再推出 Motion，一路走來特別明顯。這三者分別對應到不同階段的問題：做動畫、把設計變成網站、用文字直接生成原型，以下逐一拆開講，也誠實標註目前多半還在測試階段，還在逐步開放中。
Figma Motion：把動畫時間軸做進設計檔
過去設計師要做動畫效果，得把檔案匯出、切換到專門的動畫軟體裡另外製作，Figma Motion 讓這段流程直接留在同一份設計檔裡完成，透過時間軸與關鍵幀，搭配預設動畫效果與緩動曲線，直接在 Figma 畫布上把物件的動態調出來。做好的動畫，也能在 Dev Mode 裡直接看到對應的 CSS、JSON 或 React 程式碼，不用另外找人翻譯這段動態該怎麼寫成程式。Figma Motion 從 2026 年 6 月 24 日起以開放測試版逐步推出，基本操作在各方案的完整座位都能使用，但發佈動畫元件與匯出高解析度影片這類進階功能仍限付費方案。
Figma Sites：設計稿直接發佈成網站
Figma Sites 的定位是設計、原型、發佈網站一站到位。設計稿做好之後，不用交給工程團隊重新切版寫程式，直接在 Figma 裡把畫面發佈成一個真正上線的響應式網站，而且能即時在畫布上看到接近真實網頁的呈現效果。這比較適合作品集、活動頁、產品介紹頁這類不需要複雜後台的網站，目前還沒有完整支援電商購物車、結帳流程這類進階商業機能，仍在持續打磨，還算不上成熟穩定的正式產品，想拿它做正式營運的複雜網站，現階段得先評估這些限制夠不夠用。
Figma Make：用文字描述生成完整原型或簡易網站
Figma Make 走的是另一條路，用一句文字描述，讓 AI 直接生成一個可以互動的原型或簡易網站，連前端程式碼都一併產出。適合想快速做出雛形、驗證一個想法可不可行的情境，打幾行提示詞，幾分鐘內就能看到一個能點、能操作的畫面，省下從零手刻的時間。但要誠實提醒：它產出的程式碼比較適合拿來驗證想法、快速迭代，離「可以直接上線的正式產品」通常還有一段距離，正式產品多半仍需要工程團隊接手優化與把關，不能單靠它一次做出來的東西就直接對外上線。
Figma 收費方案怎麼選？免費版夠用嗎？
前面提過，免費的 Starter 方案已經能建立設計檔案、使用完整的設計工具，這裡把方案架構完整攤開，方便判斷什麼時候真的需要升級。
Starter 方案免費，提供無限個人草稿檔案、基本的 Prototype 功能，以及每月一定額度的 AI 使用次數，個人學習、單純練習介面操作，這個方案已經夠用。往上的 Professional 方案是多數小型團隊會考慮的第一步，差異主要在於：能建立無限的正式檔案與專案、開放團隊共用的資源庫與字型、解鎖進階的 Prototype 工具與 Dev Mode 檢查功能，每月的 AI 使用額度也比免費方案高出許多，但 Variables 的模式數量有其上限。再往上的 Organization 與 Enterprise 方案，則是把團隊規模、資產集中管理、進階安全性與 Variables 模式數量的上限進一步放寬，設計給規模更大、跨部門協作或安全需求更高的組織使用。
判斷原則其實不複雜：個人學習或單純的小型專案，免費版就足夠應付；一旦團隊需要無限的正式檔案、完整的 Dev Mode 功能，或者 Variables 模式數量開始不夠用，才是認真考慮升級的時間點。實際的方案名稱、價格與額度數字持續在調整，詳細數字仍要以 Figma 官網當下公告的版本為準。
比起把 Toolbar、Frame、Auto Layout 這些名詞一一背起來，直接打開 Figma、建一個 Frame、套用 Auto Layout 做一張卡片，實際動手十分鐘，比看完整篇介紹更能抓住操作的手感。回頭看看引言那滿版工具列的困惑，現在這些按鈕應該都有名字、有各自的用途了。
Figma 仍在把「設計到成品」的距離持續拉近，Motion、Sites、Make 這幾項新功能都是往這個方向走，但它們多半還在測試與打磨階段。真正值得新手先練熟的，還是 Frame、Auto Layout、元件與 Prototype 這幾個基本功，這些學會了，之後不管 Figma 再推出什麼新功能，上手的速度都會快上不少。