一句 prompt 改投影片、把畫面搬回 canvas：Figma 自家團隊的 4 種 MCP 用法

設計交付給工程之後，那份設計就開始貶值。

顏色被近似掉、間距被工程師憑感覺重抓、互動狀態在靜態檔裡根本展示不出來——等你回頭 review，畫面已經跟當初設計的有了距離。這是 design 跟 dev 之間最老的一道裂縫。

Figma 的 MCP server 想補的就是這道縫。六月十六號，Figma 放出一篇文章，講自家員工現在怎麼用這台 server——而它能碰的範圍，比兩個月前剛開放 agent 上 canvas 時又大了一圈。

從「讀設計」到「寫設計」：MCP 這次擴張了什麼

之前 MCP server 主要做的，是把設計脈絡帶進寫 code 的工具裡，讓工程師實作出來的東西貼近原設計。這次它跨進 Figma Slides、FigJam、Figma Make 跟新的 Figma agent——意思是投影片、FigJam 看板、Make 原型，現在都能用一句 prompt 生出來或更新。讀，變成了寫。

底層還補了兩件事。一是 custom font 支援：你電腦裡存的字型現在能被正確 render，省掉被換成 web-safe 近似字的尷尬。二是新的 download_assets tool，能直接從設計檔把 icon 跟圖片以 SVG、PDF、JPG 或 PNG 拉出來，拿到的是真正可匯出的檔案而非截圖，不用再手動 export。

01 在 Figma Slides 維護一份「常青簡報」

Figma 的 designer advocate Mallory Dean 維護一份涵蓋 Figma AI 產品發布的常青簡報，每幾週更新一次，好讓她在設計演講跟客戶會議上講的內容跟得上產品節奏。Figma agent 上線後，她在 code editor 下了一句 prompt：要 agent 從 Slack、Google Drive、內部 blog 跟 Release Notes 把內容拉進來，更新這份 AI 簡報、順便建議新的投影片。

agent 用 use_figma tool 加上 /figma-use-slides skill，照她的模板把 deck 更新好。新投影片還需要人工 review、換掉佔位圖、修文案——但她接手的時候，前 80% 的內容工作已經做完。custom font 支援讓 agent 用她上傳的品牌字型 render，整份 deck 維持在 brand 上。

02 從即時資料生成 FigJam，而非從空白板開始

Figma PM Prasant Lokinendi 常跑 feature kickoff workshop。每次準備一份夠用的 FigJam——從公司各處拉脈絡、把區塊排成適合那場會議的格式——都很花時間。於是他做了一個叫 /figjam-builder 的 custom skill，把那些指令包進去，省得每次重下 prompt。

今年初 Make voice-to-text 發布時，他讓 agent 從 Slack、Asana、Notion 拉專案結構，從 Hex 拉分析數據，直接生出一塊 FigJam。他開始工作的地方，是一份已經帶著產品願景、客戶洞察跟關鍵決策的看板，而非一塊空白畫布。

03 用 Figma Make 把設計在 code 與 canvas 之間搬

MCP server 現在也能在 Figma Make 裡用，把「設計修改 → production PR」的迴圈整個收在 Figma 內完成。產品設計師 Iris Lin 拿真實工作跑這個迴圈：她跟同事做了一個 audio editor 範例檔當 demo，同事先 ship 了第一版，但 Iris 想改設計。互動在靜態檔裡展示不出來，她就 branch 了 code，在 Figma Make 裡把真的東西做出來——能拖曳重排的音訊片段、帶音量控制的 popover、會 scrub 的播放頭。

她想改 demo 檔的 design system，於是在 Make 的 prompt 框裡下指令，把 preview 拉回 canvas 變成 design layers；畫面落到 canvas 上，用她 library 裡相對應的 component 重建。她照平常的設計模式改了音訊片段 component，給它清楚的 default、hover、drag 三種狀態，再反方向送回去——agent 讀懂她的設計改動，把三個狀態都寫進 component，準備推成 GitHub PR。這跟 Code Connect 把 library 對應到 production code 是同一套邏輯，兩端讀寫的都是你真實的 component。

04 讓 MCP server 跟 Figma agent 分工，把 code-only 畫面搬上 canvas

Yarden Katz 是 Figma MCP server 背後的 PM，最常回頭測的一個情境是：一個只存在於 code、canvas 上完全沒有對應的畫面，目標是把它搬進 Figma、接上正確的 design system，讓設計師能接著做。她拿一個帶 login 流程跟 dashboard 的範例 app，在 code editor 下 prompt：把這兩個畫面推進 Figma，能重用的既有 component 跟 variable 就重用，沒有的就生出像樣的 component set 跟 variable。

Figma plugin 內建的 skills 給了 agent 怎麼用 Figma 的脈絡，所以它同時讀了 Figma 跟 codebase 裡的 library，自己判斷哪些重用、哪些新建，省去把已經有的東西重做一遍。這給她的是一個夠強的第一版——auto layout、字型、幾個沒對到的顏色還要處理。接力的是 Figma agent：它原生在 canvas 上、對她的 design system 有深脈絡，幫她修 layout、改字、把每個顏色對到正確的 variable。調到她滿意後，再透過 MCP server 推回 code。需要的話，用 download_assets tool 還能直接從 agent 把來源圖片跟 icon 拉出來，不用另外 export。

整體觀察：MCP 把 Figma 從工具變成樞紐

把四個工作流擺在一起看，會浮現一個共通的形狀——每一個都從真實資料起步，重用團隊已經建好的 design system，然後把繁瑣的第一版交給 agent、把判斷跟收尾留給人。這條線往回拉，是 Figma 這幾年一貫的方向：Variables 把設計值收進有名字的中央倉庫，Code Connect 把 library 對應到 production code，MCP server 則把這些結構接上你已經在用的 agent。Figma 越來越像產品開發流程裡的樞紐，而非一個畫完就關掉的工具。

對轉職中、正在學 Figma 的人，這裡有個訊號值得收下：未來能把這些工作流跑順的人，前提是先把 component、variables、design system 這些底層概念練扎實——agent 重用的是你建好的結構，結構愈乾淨，它幫你做的第一版就愈接近能用。寫入能力（write capability）目前是 open beta，Figma agent 跟 Make 的 production codebase 整合還在 closed beta。