Udilgu MCP

Framelink Figma MCP Server

🌐 Available in: 한국어 (Korean) | 日本語 (Japanese) | 中文 (Chinese)

Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.

给 光标 和其他AI驱动的编码工具可以通过此访问您的Figma文件 模型上下文协议 服务器。

当Cursor可以访问Figma设计数据时 方式 比粘贴屏幕截图等替代方法更准确地进行一次拍摄设计。

See quickstart instructions →

演示

观看使用Figma设计数据在Cursor中构建UI的演示


运作原理

1. 打开IDE的聊天（例如Cursor中的代理模式）。
2. 将链接粘贴到Figma文件、框架或组。
3. 让Cursor对Figma文件做一些事情，例如实现设计。
4. Cursor将从Figma获取相关元数据，并使用它来编写代码。

此MCP服务器是专门为与Cursor一起使用而设计的。在回答上下文之前 图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"]
    }
  }
}

视窗

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

或者您可以设置 FIGMA_API_KEY 和 PORT 在 env 现场。

如果您需要有关如何配置Framelink Figma MCP服务器的更多信息，请参阅 Framelink文档.

明星历史

了解更多

Framelink Figma MCP服务器简单但功能强大。通过在 Framelink 网站。

赞助商

🥇 金牌赞助商

Framelink

🥈 白银赞助商

Title -->

🥉 铜牌赞助商

tbd-->

😻 较小的支持者

tbd-->

tbd-->