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