NCDS Figma MCP Server

<a href="https://www.framelink.ai/?utm_source=github&utm_medium=referral&utm_campaign=readme" target="_blank" rel="noopener"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://www.framelink.ai/github/HeaderDark.png" /> <img alt="Framelink" src="https://www.framelink.ai/github/HeaderLight.png" /> </picture> </a> <div align="center"> <h1>Framelink Figma MCP 伺服器 + NCDS</h1> <p> 🌐 可用語言: <a href="README.md">English (英文)</a> | <a href="README.ko.md">한국어 (韓文)</a> | <a href="README.ja.md">日本語 (日文)</a> | <a href="README.zh-cn.md">简体中文 (簡體中文)</a> </p> <h3>讓您的程式碼代理存取您的 Figma 資料。<br/>在任何框架中一次性完成設計。</h3> <a href="https://npmcharts.com/compare/figma-developer-mcp?interval=30"> <img alt="每週下載次數" src="https://img.shields.io/npm/dm/figma-developer-mcp.svg"> </a> <a href="https://github.com/GLips/Figma-Context-MCP/blob/main/LICENSE"> <img alt="MIT 授權條款" src="https://img.shields.io/github/license/GLips/Figma-Context-MCP" /> </a> <a href="https://framelink.ai/discord"> <img alt="Discord" src="https://img.shields.io/discord/1352337336913887343?color=7389D8&label&logo=discord&logoColor=ffffff" /> </a> <br /> <a href="https://twitter.com/glipsman"> <img alt="Twitter" src="https://img.shields.io/twitter/url?url=https%3A%2F%2Fx.com%2Fglipsman&label=%40glipsman" /> </a> </div> <br/> 此專案從 Framelink Figma MCP 伺服器分支，包含了基於 NCDS 的額外實現。使用此 [Model Context Protocol](https://modelcontextprotocol.io/introduction) 伺服器，讓 [Cursor](https://cursor.sh/) 和其他由 AI 驅動的程式碼工具存取您的 Figma 檔案。 當 Cursor 可以存取 Figma 設計資料時，它在一次性精準實現設計方面，比貼上螢幕截圖等替代方案**好得多**。 <h3><a href="https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=referral&utm_campaign=readme">查看快速入門指南 →</a></h3> ## 示範 [觀看在 Cursor 中使用 Figma 設計資料建構 UI 的示範](https://youtu.be/6G9yb-LrEqg) [  ](https://youtu.be/6G9yb-LrEqg) ## 運作方式 1. 開啟您 IDE 的聊天功能（例如 Cursor 中的代理模式）。 2. 貼上 Figma 檔案、框架或群組的連結。 3. 要求 Cursor 對 Figma 檔案執行操作 — 例如，實現設計。 4. Cursor 將從 Figma 取得相關元數據，並用它來編寫您的程式碼。 此 MCP 伺服器專為與 Cursor 搭配使用而設計。在從 [Figma API](https://www.figma.com/developers/api) 回應內容之前，它會簡化和轉譯回應，以便只向模型提供最相關的版面配置和樣式資訊。 減少提供給模型的內容有助於提高 AI 的準確性並使回應更具關聯性。 ## 入門指南 許多程式碼編輯器和其他 AI 客戶端都使用設定檔來管理 MCP 伺服器。 可以透過將以下內容新增至您的設定檔來設定 `@ncds/figma-mcp` 伺服器。 > 注意：您需要建立一個 Figma 存取權杖才能使用此伺服器。有關如何建立 Figma API 存取權杖的說明，請參閱[此處](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens)。 ### MacOS / Linux ```json { "mcpServers": { "Framelink Figma MCP": { "command": "npx", "args": ["-y", "@ncds/figma-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } } ``` ### Windows ```json { "mcpServers": { "Framelink Figma MCP": { "command": "cmd", "args": ["/c", "npx", "-y", "@ncds/figma-mcp", "--figma-api-key=YOUR-KEY", "--stdio"] } } } ``` 或者您可以在 `env` 欄位中設定 `FIGMA_API_KEY` 和 `PORT`。 如果您需要有關如何設定 NCDS Figma MCP 伺服器的更多資訊，請參閱 [Framelink 文件](https://www.framelink.ai/docs/quickstart?utm_source=github&utm_medium=referral&utm_campaign=readme)。 ## Star 歷史 <a href="https://star-history.com/#GLips/Figma-Context-MCP"><img src="https://api.star-history.com/svg?repos=GLips/Figma-Context-MCP&type=Date" alt="Star History Chart" width="600" /></a> ## 了解更多 此 NCDS Figma MCP 伺服器從 Framelink 專案分支並實現了基於 NCDS 的額外原始碼生成功能。原始的 Framelink Figma MCP 伺服器既簡單又強大。請前往 [Framelink](https://framelink.ai?utm_source=github&utm_medium=referral&utm_campaign=readme) 網站了解更多資訊，以充分利用它。