Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
npm install figma-developer-mcp
🌐 可用語言:
English (英文) |
한국어 (韓文) |
日本語 (日文) |
简体中文 (簡體中文)
使用此 Model Context Protocol 伺服器,讓 Cursor 和其他由 AI 驅動的程式碼工具存取您的 Figma 檔案。
當 Cursor 可以存取 Figma 設計資料時,它在一次性精準實現設計方面,比貼上螢幕截圖等替代方案好得多。
觀看在 Cursor 中使用 Figma 設計資料建構 UI 的示範

1. 開啟您 IDE 的聊天功能(例如 Cursor 中的代理模式)。
2. 貼上 Figma 檔案、框架或群組的連結。
3. 要求 Cursor 對 Figma 檔案執行操作 — 例如,實現設計。
4. Cursor 將從 Figma 取得相關元數據,並用它來編寫您的程式碼。
此 MCP 伺服器專為與 Cursor 搭配使用而設計。在從 Figma API 回應內容之前,它會簡化和轉譯回應,以便只向模型提供最相關的版面配置和樣式資訊。
減少提供給模型的內容有助於提高 AI 的準確性並使回應更具關聯性。
許多程式碼編輯器和其他 AI 客戶端都使用設定檔來管理 MCP 伺服器。
可以透過將以下內容新增至您的設定檔來設定 figma-developer-mcp 伺服器。
> 注意:您需要建立一個 Figma 存取權杖才能使用此伺服器。有關如何建立 Figma API 存取權杖的說明,請參閱此處。
``json`
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "npx",
"args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
`json`
{
"mcpServers": {
"Framelink Figma MCP": {
"command": "cmd",
"args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
}
}
}
或者您可以在 env 欄位中設定 FIGMA_API_KEY 和 PORT`。
如果您需要有關如何設定 Framelink Figma MCP 伺服器的更多資訊,請參閱 Framelink 文件。
Framelink Figma MCP 伺服器既簡單又強大。請前往 Framelink 網站了解更多資訊,以充分利用它。