Figma終於出手了！官方MCP實現代碼⇄設計稿實時雙向同步（實測）

大家好，我係子昕。

今日一定要講個大事——Figma官方終於出手，推出咗自己嘅MCP Server。

講真，之前社區入面嗰啲第三方嘅Figma MCP我都搞過，裝就裝到，但用起上嚟真係一言難盡。

而家Figma官方自己搞呢單嘢，個感覺完全唔同。

官方MCP直接將變數、組件、佈局呢啲資訊原汁原味咁導入IDE，唔壓縮唔掉數據，生成嘅代碼可以同你嘅組件庫無縫對接。

而且最勁嘅係——呢個係真正嘅雙向同步。唔係嗰種截張圖俾AI睇嘅玩法，係你代碼行起嘅頁面可以直接推去Figma，喺Figma改完樣式之後又可以一鍵同步返代碼。

核心要點

• Figma官方出手：唔係第三方野路子，係Figma親自做嘅MCP Server，穩定性和準確性完全碾壓之前社區版本

• 真正嘅雙向打通：本地UI直接推送去Figma成為可編輯設計稿，Figma修改後可以同步返代碼，唔壓縮唔掉數據

• 三種安裝方式：Codex APP、Codex CLI、Claude Code都支援，裝起上嚟比第三方嘅省心好多

• 核心工具:generate_figma_design(UI推送去Figma)、get_design_context(Figma設計轉代碼)

一、Codex APP安裝流程(超簡單)

我主要用Codex APP嚟示範，因為呢種方式裝起上嚟真係好順，直接㩒幾下就搞掂。

1. 安裝Figma技能

更新Codex APP到最新版，喺「技能」推薦列表入面已經內置咗Figma技能，㩒「+」號直接安裝：

2. 安裝Figma MCP

打開設定，喺「MCP伺服器」推薦列表入面同樣已經內置咗Figma MCP，㩒安裝：

3. 身份驗證

MCP安裝完成之後會見到「進行身份驗證」提示，㩒咗之後會開瀏覽器登入Figma並授權：

進行身份驗證

瀏覽器授權

授權成功嘅標記：

二、其他客戶端安裝

Claude Code

執行一行指令：

claude mcp add --transport http figma https://mcp.figma.com/mcp

想全局生效就加個--scope user:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

啟動Claude Code之後輸入/mcp，揀figma進行身份驗證就得。

Codex CLI

同樣執行指令安裝：

codex mcp add figma --url https://mcp.figma.com/mcp

跟提示授權，之後就可以喺終端度用。

三、實戰：代碼推送去Figma(太爽啦)

為咗測試效果，我叫Codex整咗個「項目進度追蹤單頁面」，然後直接話：「Send去Figma。」

就咁一句說話，你估點？佢真係推送咗過去。

Codex做咗啲乜：自動喺代碼入面插入咗呢行：

<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>

然後啟動本地服務，開瀏覽器，介面會出現一個Figma擷取工具欄，有三個掣：

• Entire screen：推送整個頁面

• Select element：揀中某個元素單獨推送

• Open file：跳去Figma睇推送嘅檔案

㩒「Open file」就可以喺Figma度見到推送嘅設計稿：

支援揀中元素單獨推送。

例如我只係想推送「Task Board」呢個模組，揀中之後㩒一下：

Figma度即刻就有：

四、實戰：Figma修改同步返代碼(呢個先係真正嘅雙向)

設計稿推送咗上去，設計師改咗顏色點算？呢度就係官方MCP嘅厲害之處——真正嘅雙向同步。

例如我喺Figma度將「Task Board」嘅字體改做紅色。

操作好簡單：右鍵「Task Board」，揀「Copy/Paste as」 → 「Copy link to selection」：

返去Codex，輸入「更新UI」加上啱啱複製嘅連結：

Codex會呼叫Figma MCP嘅get_design_context工具讀取修改，然後自動調整代碼。

呢度要注意，官方MCP讀取嘅係完整嘅設計上下文，包括變數、組件映射、佈局資訊，唔係第三方嗰種壓縮過嘅殘缺數據。所以生成嘅代碼精準度高好多。

效果：本地項目嘅「Task Board」字體變成紅色咗：

五、關於呼叫次數限制

Figma MCP唔係無限呼叫，根據你嘅Figma賬號類型有唔同限制：

需要注意嘅係，generate_figma_design(UI推送)、add_code_connect_map、whoami呢幾個工具唔受速率限制。即係話推送UI同確認身份呢啲核心操作唔會佔用配額，呢個設計都幾人性化。

寫喺最後

講真，用咗Figma官方MCP之後，我先明白咩叫「設計同開發嘅協作應該係咁樣」。

以前嗰種流程真係折磨人：設計師出圖→開發對住Figma手寫代碼→設計師話「呢個顏色唔啱」→開發再改→設計師又話「間距差啲意思」→開發繼續改...一個頁面來回扯皮三五輪係常態。

而家有咗官方MCP，成個流程變咗:

1. 代碼寫完直接推Figma，設計師喺熟悉嘅工具度睇
2. 設計師調完樣式直接喺Figma改
3. 複製個連結掉俾Codex，代碼自動同步

呢個唔係工具升級，係工作方式嘅革命。而且官方嘅準確性真係一流。

俾個實在嘅建議：如果你係前端開發、成日同設計師打交道，或者獨立開發者，呢個工具一定要試嚇。

㩒個關注啦，我會繼續用我呢啲半桶水水平為大家帶嚟更多AI編程工具嘅第一手體驗～

「讚好、轉發、睇下」
同大家一齊睇

大家好，我是子昕。

今天必須得聊個大事——Figma官方終於出手了，發佈了自己的MCP Server。

說實話，之前社區裏那些第三方的Figma MCP我也折騰過，裝是能裝上，但用起來真是一言難盡。

現在Figma官方自己幹了這事兒，那感覺完全不一樣。

官方MCP直接把變量、組件、佈局這些信息原汁原味地導進IDE，不壓縮不丟數據，生成的代碼能跟你的組件庫無縫對接。

而且最牛的是——這是真正的雙向同步。不是那種截個圖給AI看看的玩法，是你代碼跑起來的頁面能直接推到Figma，在Figma改完樣式後又能一鍵同步回代碼。

核心要點

• Figma官方出手：不是第三方野路子，是Figma親自做的MCP Server，穩定性和準確性碾壓之前社區版本

• 真正的雙向打通：本地UI直接推送到Figma成為可編輯設計稿，Figma修改後可同步回代碼，不壓縮不丟數據

• 三種安裝方式：Codex APP、Codex CLI、Claude Code均支持，裝起來比第三方的省心太多

• 核心工具:generate_figma_design(UI推送到Figma)、get_design_context(Figma設計轉代碼)

一、Codex APP安裝流程(超簡單)

我主要用Codex APP來給大家演示，因為這種方式裝起來是真的絲滑，直接點點點就完事。

1. 安裝Figma技能

更新Codex APP到最新版，在“技能”推薦列表裏已經內置了Figma技能，點擊“+”號直接安裝：

2. 安裝Figma MCP

打開設置，在“MCP服務器”推薦列表裏同樣已經內置了Figma MCP，點擊安裝：

3. 身份驗證

MCP安裝完成後會看到“進行身份驗證”提示，點擊後會打開瀏覽器登錄Figma並授權：

進行身份驗證

瀏覽器授權

授權成功的標識：

二、其他客戶端安裝

Claude Code

執行一行命令:

claude mcp add --transport http figma https://mcp.figma.com/mcp

想全局生效加個--scope user:

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

啓動Claude Code後輸入/mcp，選擇figma進行身份驗證即可。

Codex CLI

同樣執行命令安裝:

codex mcp add figma --url https://mcp.figma.com/mcp

按提示授權，然後就能在終端裏用了。

三、實戰：代碼推送到Figma(太爽了)

為了驗證效果，我讓Codex做了個“項目進度追蹤單頁面”，然後直接告訴它：“發送到Figma”。

就這麼一句話，你猜怎麼着？它真就推過去了。

Codex做了什麼：自動在代碼裏插入了這行：

<script src="https://mcp.figma.com/mcp/html-to-design/capture.js" async></script>

然後啓動本地服務，打開瀏覽器，界面上會出現一個Figma捕獲工具欄，有三個按鈕:

• Entire screen：推送整個頁面

• Select element：選中某個元素單獨推送

• Open file：跳轉到Figma查看推送的文件

點擊“Open file”就能在Figma裏看到推送的設計稿了：

支持選中元素單獨推送。

比如我只想推送“Task Board”這個模塊，選中後點擊一下：

Figma裏立刻就有了：

四、實戰：Figma修改同步回代碼(這才是真正的雙向)

設計稿推上去了，設計師改了顏色怎麼辦？這就到了體現官方MCP牛逼的地方了——真正的雙向同步。

比如我在Figma裏把“Task Board”的字體改成紅色了。

操作很簡單：右鍵“Task Board”，選擇“Copy/Paste as” → “Copy link to selection”：

回到Codex，輸入“更新UI”加上剛複製的連結：

Codex會調用Figma MCP的get_design_context工具讀取修改，然後自動調整代碼。

這裏注意，官方MCP讀取的是完整的設計上下文，包括變量、組件映射、佈局信息，不是第三方那種壓縮過的殘缺數據。所以生成的代碼精準度高太多了。

效果：本地項目的“Task Board”字體變成紅色了：

五、關於調用次數限制

Figma MCP不是無限調用的，根據你的Figma賬號類型有不同限制：

需要注意的是，generate_figma_design(UI推送)、add_code_connect_map、whoami這幾個工具不受速率限制。也就是說推送UI和確認身份這些核心操作不佔用配額，這個設計挺人性化的。

寫在最後

說實話，用了Figma官方MCP之後，我才明白什麼叫“設計和開發的協作應該是這樣的”。

以前那種流程是真的折磨人：設計師出圖→開發對着Figma手寫代碼→設計師說“這個顏色不對”→開發再改→設計師又說“間距差點意思”→開發繼續改...一個頁面來回扯皮三五輪是常態。

現在有了官方MCP，整個流程變成了:

1. 代碼寫完直接推Figma，設計師在熟悉的工具裏看
2. 設計師調完樣式直接在Figma改
3. 複製個連結丟給Codex，代碼自動同步

這不是工具升級，這是工作方式的革命。而且官方的準確性是真的頂。

給個實在的建議：如果你是前端開發、經常跟設計師打交道，或者獨立開發者，這個工具必須得試試。

點個關注唄，我會繼續用我這半吊子水平為大家帶來更多AI編程工具的第一手體驗～

「點贊、轉發、在看」
和大家一起看