關於 Figma
About
Figma 是什麼
Figma 是一套在瀏覽器裡運作的介面設計平台。團隊用它畫畫面、接原型、維護共用的設計系統，最後把成果交給開發端，不必再把檔案匯出後傳來傳去。
產品早就超出介面設計的範圍。同一個檔案裡可以放 FigJam 白板、簡報、Figma Draw 插畫、Figma Buzz 行銷素材，以及用 Figma Sites 發布的網頁。Figma Make 會把一句指令或既有的畫框變成真的能操作的應用程式。Figma 代理則貫穿這些工具，能改圖層、生成著色器，也能依描述做出一套小工具。
把這些串起來的是檔案本身。設計師、編輯與工程師開同一塊畫布，留言直接釘在對應圖層上，改動即時可見。開發端透過 Dev Mode 取得尺寸、素材與程式碼片段，Figma MCP 伺服器再把同樣的脈絡送給外部的程式代理。
限制主要來自商業模式與實務面。方案按席次計價，席次種類不同，能用的功能也不同。AI 功能吃的是每月配額的點數，天天叫代理做事，帳單會超過方案月費。Sites、Buzz 等較新的工具還在 Beta，介面與限制每隔幾個版本就變一次。
開始使用
- 到 figma.com 用電子郵件、Google 帳號或公司 SSO 建立免費帳號，Starter 方案不用綁信用卡。
- 開一個設計檔，先挑對應螢幕尺寸的畫框，或從 Community 找範本，看看別人怎麼組織一個完成的檔案。
- 用畫框、Auto Layout 與元件開始排。等團隊對顏色、文字樣式與元件有共識，再發布成共用函式庫。
- 按播放鍵測原型，或開 Figma Make 描述你想看到的應用程式。
- 用連結或電子郵件邀請同事，設定席次種類，進入實作階段再開 Dev Mode。
產品資訊
快速了解 Figma 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 軟體公司的產品設計師：一個檔案就涵蓋線框、高擬真畫面、原型與交付，團隊不必在三個應用程式之間搬素材。共用函式庫與無限版本紀錄需要付費席次。
- 設計系統維護者：變數、模式與已發布的元件，讓一組人定義 token，其他團隊直接取用。前提是有人負責命名與審核，否則亂掉的函式庫會迅速擴散。
- 沒有設計背景的創辦人與行銷人員：Figma Make 與代理能依書面 brief 做出能看的原型。間距與文案得自己收尾，發布前也要確認生成素材的授權。
任務
- 設計並測試手機流程：把畫面接成原型，分享連結就能在瀏覽器或手機上的 Figma App 開啟。
- 把模糊的想法變成可點的東西：在 Figma Make 描述應用程式，附上既有畫框當風格參考，再在對話裡來回修到預覽滿意。
- 把完成的畫面交給工程：Dev Mode 顯示間距、字級與素材，Figma MCP 伺服器則把同一份脈絡送進編輯器裡的程式代理。
情境
- 遠端團隊跨時區審稿：留言黏在指定圖層，版本紀錄直接顯示誰改了什麼，不必另外開會。
- 品牌團隊週五前要五十款社群素材：Figma Buzz 從範本批次生成，代理在同一個檔案裡調整文案與圖片。
- 新創這週想把行銷頁上線：Figma Sites 從設計直接發布響應式頁面，付費方案可綁自訂網域。
主要功能
共用畫布與即時協作
同一個檔案裡，所有人看到相同的游標、留言與圖層樹。兩位設計師能同時改同一個畫框，開發者也能在設計還沒定稿時先檢查元件。分支功能把高風險的改版隔在主檔案之外，等有人審過再合併。
Figma 代理
代理接收指令後直接在畫布上動手：起草畫面、重排選取範圍的樣式、生成著色器，或依描述組出一套小外掛。它會讀取檔案裡的元件與變數，產出的東西比一般圖像生成器更接近團隊原有的系統。自訂 skill 能把重複的指示存起來，不用每次重打。
Figma Make
Figma Make 是把指令變成應用程式的工具，付費方案的 Full 席次可用。附上設計或圖片、描述行為後，會得到一個真的能跑的應用程式，程式碼可在 Files 分頁編輯。成果能發布成網站，適合在開票之前先驗證產品想法。
程式碼圖層與 Figma Motion
程式碼圖層把程式碼當成一種素材放上畫布，與向量、圖片並列。設計圖層按一下就能變成可互動的圖層，改動也能回流成可編輯的畫框。Figma Motion 加上時間軸、關鍵影格與加速度曲線，這些資料在 Dev Mode 讀得到，也能匯出成 CSS、JSON、React、MP4 或 GIF。
Dev Mode 與 MCP 交付
Dev Mode 給工程師一個檢視模式，尺寸、元件名稱與可複製的程式碼都在裡面。Figma MCP 伺服器把這份脈絡延伸給 Cursor、Claude Code 之類的代理，代理讀到的是真實結構，不必從截圖猜。兩者都需要 Dev 或 Full 席次，MCP 伺服器得透過桌面版執行。
設計系統、變數與函式庫
變數把顏色、間距與模式集中在一處，改一次就同步到所有使用該函式庫的檔案。團隊能維護淺色與深色主題，或拆分不同品牌模式，不必複製元件。這是規模化之後最省時間的部分，也是命名隨便時最容易反咬的一環。
優缺點
優點
- 整個流程都在一個瀏覽器分頁裡，從第一張線框到原型連結、再到交付開發都不用換工具。
- 代理與 Figma Make 讀的是真實元件與變數，產出通常接得上既有的設計系統。
- Dev Mode 與 Figma MCP 伺服器省掉設計與工程之間來回截圖、標紅線的例行公事。
- 即時協作與釘選留言在分散式團隊裡很夠用，版本紀錄讓回溯變成一個動作。
- 免費 Starter 方案足以評估，Community 的範本與外掛幾乎涵蓋各種工作流程。
缺點
- AI 用量按點數計算。天天靠代理做事的團隊，大概率會加購超出每月配額的點數。
- 席次分開計價，小團隊往往在還沒意識到之前就同時付了 Full、Dev 與 Collab 的錢。
- 原型很多的大檔案在老筆電上載入很慢，即時協作也離不開穩定連線。
- Sites、Buzz 與多項代理功能仍在 Beta，限制與介面說改就改，不太會提前通知。
常見問題
Figma 用來設計使用者介面、製作可點擊的原型、維護設計系統，並把成果交給開發端。現在同一個平台也包辦白板、簡報、插畫、行銷素材，以及用指令生成的應用程式。
相關內容
探索與 Figma 相關的工具、技能與文章。
Figma 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Knocket
Knocket (Tencent RTC team) · 生產力 · 商業 · 聊天機器人Knocket 是免費的線上客服與聯絡頁面工具，訪客可從網站、App 或一條分享連結傳訊息，你在 Telegram 或單一收件匣就能回覆。
FloorGen
Vinit Kumar (FloorGen) · 生產力 · 中國 AIFloorGen 是瀏覽器上的平面圖製作工具，能把一句描述或一張草圖變成可編輯的 2D 平面圖與 3D 導覽。可匯出 PDF、DXF 或影片，不註冊也能開始畫。