Codex 連接 Figma讓 AI 讀取 Figma UI 設(shè)計(jì)稿數(shù)據(jù)前言最近我在嘗試讓 Codex 直接讀取 Figma 設(shè)計(jì)稿中的 UI 數(shù)據(jù)包括頁(yè)面結(jié)構(gòu)、Frame、文本、顏色、尺寸、圖層層級(jí)等信息。最終使用的是Figma MCP Bridge它通過 Figma 插件 本地 MCP Server 的方式把 Figma 桌面端的數(shù)據(jù)暴露給 Codex。整體鏈路如下Figma 桌面端插件 ↓ 本地 MCP Server ↓ Codex / AI Agent配置完成后Codex 就可以讀取當(dāng)前 Figma 文件、當(dāng)前選中節(jié)點(diǎn)甚至獲取截圖、節(jié)點(diǎn)樣式、文本內(nèi)容等信息。一、準(zhǔn)備環(huán)境需要準(zhǔn)備1. Figma 桌面版 2. Node.js / npx 3. Codex 4. Figma MCP Bridge注意必須使用 Figma 桌面版瀏覽器版 Figma 不支持導(dǎo)入開發(fā)插件?？梢韵葯z查本機(jī)是否有 Node 和 npxnode -v npx -v二、下載 Figma MCP Bridge項(xiàng)目地址https://github.com/gethopp/figma-mcp-bridge可以直接下載 release 包也可以使用源碼。如果是源碼方式需要構(gòu)建插件cd plugin npm install npm run build構(gòu)建成功后插件目錄中應(yīng)該有plugin/manifest.json plugin/dist/code.js plugin/dist/index.html其中manifest.json內(nèi)容大致如下{ name: Figma MCP Bridge, id: figma-mcp-bridge, api: 1.0.0, main: dist/code.js, ui: dist/index.html, permissions: [], networkAccess: { allowedDomains: [ws://localhost:1994], reasoning: Connects to local MCP server via WebSocket to stream Figma document data to AI tools }, documentAccess: dynamic-page, editorType: [figma, dev, figjam], capabilities: [inspect] }這里要注意manifest.json和dist文件夾必須在同一個(gè)插件目錄下否則 Figma 會(huì)提示插件加載失敗。三、給 Codex 配置 MCP Server使用 Codex 的 MCP 命令添加 Figma Bridgecodex mcp add figma-bridge -- npx -y gethopp/figma-mcp-bridge查看是否添加成功codex mcp list正常會(huì)看到類似Name Command Args figma-bridge npx -y gethopp/figma-mcp-bridge也可以查看具體配置codex mcp get figma-bridge配置完成后建議重啟 Codex 或重新打開一個(gè)會(huì)話讓 MCP 工具重新加載。四、在 Figma 中導(dǎo)入插件注意這里可導(dǎo)入插件的前提是你對(duì)接入MCP的項(xiàng)目有編輯權(quán)限如果沒有的話是不會(huì)出現(xiàn)插件這個(gè)選項(xiàng)的這里為了實(shí)驗(yàn)可以先創(chuàng)建一個(gè)空白文檔隨便畫幾個(gè)UI來實(shí)驗(yàn)。打開 Figma 桌面版右鍵進(jìn)入Plugins → Development → Import plugin from manifest選擇插件目錄中的manifest.json導(dǎo)入成功后在插件列表中會(huì)出現(xiàn)Figma MCP Bridge之后打開你的 Figma 文件運(yùn)行該插件。五、啟動(dòng)本地 Bridge Server正常情況下Codex 調(diào)用 MCP 時(shí)會(huì)自動(dòng)啟動(dòng) server。如果插件顯示Disconnected說明 Figma 插件已經(jīng)打開但本地ws://localhost:1994沒有服務(wù)在監(jiān)聽。可以手動(dòng)啟動(dòng)一個(gè)本地 bridge serversetsid bash -lc tail -f /dev/null | npx -y gethopp/figma-mcp-bridge ~/.codex/figma-bridge/server.log 21 /dev/null 檢查端口是否啟動(dòng)curl http://127.0.0.1:1994/ping正常會(huì)返回{ status: ok, version: 0.0.23 }這時(shí) Figma 插件應(yīng)該會(huì)從Disconnected變成已連接狀態(tài)。六、驗(yàn)證 Codex 是否能讀取 Figma 數(shù)據(jù)可以通過本地 RPC 測(cè)試curl -X POST http://127.0.0.1:1994/rpc \ -H Content-Type: application/json \ -d {tool:list_files}如果成功會(huì)返回當(dāng)前連接的 Figma 文件{ data: [ { fileKey: unsaved-xxxx, fileName: Untitled } ] }讀取當(dāng)前頁(yè)面結(jié)構(gòu)curl -X POST http://127.0.0.1:1994/rpc \ -H Content-Type: application/json \ -d {tool:get_document}返回的數(shù)據(jù)里會(huì)包含 Figma 頁(yè)面、Frame、文本、顏色、尺寸等信息。例如{ id: 0:1, name: Page 1, type: PAGE, children: [ { id: 2:53, name: 鍵盤-提示彈窗, type: FRAME, bounds: { x: 0, y: 0, width: 854, height: 480 } } ] }七、在 Codex 中使用連接成功后可以直接對(duì) Codex 說讀取當(dāng)前 Figma 文件或者讀取當(dāng)前選中的節(jié)點(diǎn)也可以讓 Codex 分析 UI幫我分析當(dāng)前選中 Frame 的 UI 結(jié)構(gòu)根據(jù)這個(gè) Figma 頁(yè)面生成前端代碼提取這個(gè)頁(yè)面的顏色、字體、間距規(guī)范如果選中了某個(gè) FrameCodex 可以讀取該節(jié)點(diǎn)的尺寸、文本、樣式、層級(jí)結(jié)構(gòu)等信息。八、常見問題1. 插件加載失敗如果 Figma 報(bào)錯(cuò)An error occurred while loading the plugin environment通常是因?yàn)閙anifest.json引用的文件不存在。檢查插件目錄是否包含manifest.json dist/code.js dist/index.html三者必須都存在。2. 插件顯示 Disconnected說明插件啟動(dòng)成功但本地 server 沒有啟動(dòng)。檢查curl http://127.0.0.1:1994/ping如果連接失敗需要啟動(dòng) MCP server。3. 新建文件能用公司 UI 文件不能用這種情況通常是公司 Figma 團(tuán)隊(duì)限制了插件權(quán)限。可能原因1. 公司禁用了開發(fā)插件 2. 只允許管理員審核過的插件 3. 當(dāng)前賬號(hào)對(duì)文件沒有編輯權(quán)限 4. 企業(yè)策略限制插件訪問網(wǎng)絡(luò) 5. 文件處于 Dev Mode 或只讀狀態(tài)如果是公司策略限制需要聯(lián)系 Figma 管理員放行插件。4. 頁(yè)面數(shù)據(jù)為空如果返回children: []說明當(dāng)前 Figma 頁(yè)面是空的或者插件連接的是另一個(gè)文件?？梢栽?Figma 中選中一個(gè) Frame再讓 Codex 讀取當(dāng)前選中節(jié)點(diǎn)。九、總結(jié)通過Figma MCP Bridge可以讓 Codex 直接讀取 Figma 設(shè)計(jì)稿數(shù)據(jù)。整體流程是1. 安裝并構(gòu)建 Figma MCP Bridge 插件 2. 在 Codex 中添加 MCP server 3. 在 Figma 桌面端導(dǎo)入插件 4. 打開 Figma 文件并運(yùn)行插件 5. Codex 讀取 Figma 頁(yè)面或選中節(jié)點(diǎn)數(shù)據(jù)配置完成后Codex 不再只能“看截圖”而是可以直接拿到結(jié)構(gòu)化 UI 數(shù)據(jù)包括 Frame、文本、顏色、尺寸、層級(jí)和樣式信息。這樣無論是做 UI 分析、前端還原、組件拆解還是生成代碼都會(huì)方便很多。