F

Figma-Context-MCP-Next-1

kobehh/Figma-Context-MCP-Next-1
0 Stars 45 次浏览 kobehh 更新于 2026-08-23

此项目提供了一个模型上下文协议(MCP)服务器,允许像Cursor这样的AI驱动的编码工具访问和使用Figma设计数据。它简化了Figma API响应,仅提供最相关的布局和样式信息,从而提高了AI代码生成的准确性。

MCP 服务配置

复制以下 JSON 到 OPClaw 或其他 MCP 客户端的配置文件中即可使用

{
  "mcpServers": {
    "Figma-Context-MCP-Cached": {
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp-caching-dev-fork",
        "--figma-api-key=FIGMA_API_ACCESS_TOKEN"
      ],
      "command": "cmd"
    }
  }
}

该服务需要配置环境变量:FIGMA_API_ACCESS_TOKEN

可用工具 (2 个)

该服务在 MCP 协议中暴露的工具,AI 可按需调用

get_figma_data 3 个参数 需填 1 项

Get comprehensive Figma file data including layout, content, visuals, and component information

必填参数:fileKey

download_figma_images 4 个参数 需填 3 项

Download SVG and PNG images used in a Figma file based on the IDs of image or icon nodes

必填参数:fileKey、nodes、localPath

服务介绍

通过这个 Model Context Protocol 服务器,让 Cursor 和其他基于 AI 的编码工具能够访问你的 Figma 文件。

当 Cursor 能够访问 Figma 设计数据时,它比粘贴截图等替代方法更准确地一次性实现设计。

演示

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

观看视频

工作原理

  1. 打开你的 IDE 的聊天(例如 Cursor 中的代理模式)。
  2. 粘贴一个 Figma 文件、帧或组的链接。
  3. 要求 Cursor 对 Figma 文件进行某些操作——例如实现设计。
  4. Cursor 将从 Figma 获取相关元数据,并使用这些数据编写代码。

此 MCP 服务器是专门为与 Cursor 一起使用而设计的。在从 Figma API 响应提供上下文之前,它会简化并翻译响应,以便只向模型提供最相关的布局和样式信息。

减少提供给模型的上下文数量有助于提高 AI 的准确性,并使响应更加相关。

开始使用

许多代码编辑器和其他 AI 客户端使用配置文件来管理 MCP 服务器。

这个缓存分支发布为 figma-developer-mcp-caching-dev-fork,可以通过在配置文件中添加以下内容来进行配置。

注意:你需要创建一个 Figma 访问令牌才能使用此服务器。有关如何创建 Figma API 访问令牌的说明,请参阅 这里

MacOS / Linux


{

  "mcpServers": {

    "Framelink MCP for Figma": {

      "command": "npx",

      "args": ["-y", "figma-developer-mcp-caching-dev-fork", "--figma-api-key=YOUR-KEY", "--stdio"]

    }

  }

}

Windows


{

  "mcpServers": {

    "Framelink MCP for Figma": {

      "command": "cmd",

      "args": ["/c", "npx", "-y", "figma-developer-mcp-caching-dev-fork", "--figma-api-key=YOUR-KEY", "--stdio"]

    }

  }

}

如果你希望通过环境变量管理凭据(如 MCP 客户端规范中推荐的那样),请将它们放在与你的服务器定义一起的 env 对象中。示例 Cursor 配置:


{

  "mcpServers": {

    "Framelink MCP for Figma": {

      "command": "npx",

      "args": ["-y", "figma-developer-mcp-caching-dev-fork", "--stdio"],

      "env": {

        "FIGMA_API_KEY": "YOUR-KEY",

        "FIGMA_CACHING": "{\"ttl\":{\"value\":30,\"unit\":\"d\"}}",

        "PORT": "3333"

      }

    }

  }

}

如果你需要更多关于如何配置 Figma 的 Framelink MCP 的信息,请参阅 Framelink 文档

支持免费 Figma 账户:持久缓存(可选)

为了避免达到 Figma 的重度速率限制,你可以通过设置包含 JSON 对象的 FIGMA_CACHING 环境变量来告诉 MCP 服务器在磁盘上缓存完整的文件响应。


FIGMA_CACHING='{ "ttl": { "value": 30, "unit": "d" } }'

将此变量放入你的 MCP 配置 JSON 中,参见上面的示例。- cacheDir(可选)控制缓存文件的写入位置。相对路径是相对于当前工作目录解析的,而 ~ 会扩展为您的主目录。如果您省略了它,在 Linux 上服务器默认使用 ~/.cache/figma-mcp,在 macOS 上默认使用 ~/Library/Caches/FigmaMcp,在 Windows 上默认使用 %LOCALAPPDATA%/FigmaMcpCache

  • ttl 控制缓存文件的有效时间。它必须包含一个 value(数字)和一个 unitmssmhd)。

当启用缓存时,服务器总是先完整地获取一次 Figma 文件,将其存储在磁盘上,并从缓存副本中提供后续的 get_figma_data / get_raw_node 请求,直到缓存过期。如果需要强制刷新,请删除 cacheDir 中的文件。不设置 FIGMA_CACHING 将保持默认的非缓存行为。

了解更多

Framelink MCP for Figma 简单但功能强大。通过访问 Framelink 网站了解更多内容,以充分利用其功能。

相关 MCP 服务