使用此 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 存取權杖的說明，請參閱此處。

MacOS / Linux

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-KEY", "--stdio"]
    }
  }
}

Windows

{
  "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 文件。

Star 歷史

了解更多

Framelink Figma MCP 伺服器既簡單又強大。請前往 Framelink 網站了解更多資訊，以充分利用它。