Figma Context MCP是什么？

Figma Context MCP 是一個(gè)基于MCP的服務(wù)器，可以為 ai 編碼工具（如 Cursor、Windsurf 等）提供 Figma 文件的布局和樣式信息。通過簡化 Figma API 的數(shù)據(jù)，它能夠?qū)⒃O(shè)計(jì)文件的結(jié)構(gòu)化信息傳遞給 AI 模型，從而顯著提升 AI 將設(shè)計(jì)轉(zhuǎn)換為代碼的準(zhǔn)確性和效率。

Figma Context MCP功能

• 提供 Figma 文件信息：從 Figma 文件中抓取布局、樣式等設(shè)計(jì)數(shù)據(jù)，并將其轉(zhuǎn)換為 AI 編碼工具能夠理解的格式。

• 精簡設(shè)計(jì)上下文：去除冗余信息，僅提供代碼生成所需的簡潔數(shù)據(jù)。

• 支持特定節(jié)點(diǎn)提?。嚎梢蕴崛≌麄€(gè)文件或指定框架、組的信息。

• 無縫對接 AI 編碼工具：與 Cursor 等工具集成，讓 AI 根據(jù)設(shè)計(jì)直接生成 HTML/CSS 等代碼。

• 下載圖像資源（開發(fā)中）：支持下載 Figma 文件中使用的 SVG 和 PNG 圖像。

Figma Context MCP應(yīng)用場景

• 設(shè)計(jì)到代碼的自動化：將 Figma 設(shè)計(jì)稿直接轉(zhuǎn)換為代碼，減少手動開發(fā)的工作量。

• 提高開發(fā)效率：通過 AI 工具直接生成代碼，減少開發(fā)人員在重復(fù)性任務(wù)上的時(shí)間。

• 跨工具協(xié)作：支持多種 AI 編碼工具，促進(jìn)不同工具之間的協(xié)作。

Figma Context MCP使用方法

1. 安裝與啟動：

• 使用 NPM、PNPM、YARN 或 Bun 快速啟動服務(wù)器：

npx figma-developer-mcp --figma-api-key=

• 或者通過本地源代碼運(yùn)行。

2. 配置：使用環(huán)境變量（如 FIGMA_API_KEY）或命令行參數(shù)進(jìn)行配置。

3. 連接到 AI 工具：將 Figma Context MCP 服務(wù)器連接到 Cursor 等工具，通過工具的設(shè)置頁面完成配置。

4. 使用：在 Cursor 的 Composer 中粘貼 Figma 文件或特定節(jié)點(diǎn)的鏈接，并請求 AI 工具根據(jù)設(shè)計(jì)生成代碼。

5. 調(diào)試與檢查：使用 inspect 命令啟動 MCP Inspector，檢查服務(wù)器的響應(yīng)數(shù)據(jù)。

GitHub倉庫：https://github.com/GLips/Figma-Context-MCP