Figma 设计稿 MCP — Frontier Now

把设计稿交给编程智能体，最常见的做法是截图贴进对话，模型看图猜间距、字号和颜色，还原度全凭运气。Framelink MCP for Figma 让智能体直接调用 Figma API 读取文件、画框或图层的数据，再把冗长的 API 响应精简成只含布局和样式的信息交给模型。截至 2026-10-06 约 1.6 万 star。

能做什么

读取设计数据：get_figma_data 按你粘贴的 Figma 链接拉取文件、Frame 或 Group 的结构、布局和样式。
导出图片资源：download_figma_images 把设计稿里的图片和图标下载到本地项目。
先精简再给模型：服务器会翻译、裁剪 Figma API 的原始响应，只保留相关的布局和样式字段，减少噪音和 token 消耗。
不限框架：智能体拿到的是结构化数据，React、Vue、SwiftUI 都可以照着写。

适合谁

拿到 Figma 设计稿、想让 Cursor 或 Claude Code 先搭出页面骨架的前端开发者。
设计和开发分工明确、希望减少“像素对齐”来回沟通的小团队。

接入方式

需要一个 Figma 个人访问令牌（personal access token）和 Node.js。macOS 和 Linux 的配置：

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

也可以在 env 里设置 FIGMA_API_KEY，避免把令牌写进参数。Windows 写法见 README。

编辑点评

Figma 官方也有自己的 MCP 服务器；Framelink 的长处是开源、只要一个访问令牌就能跑，也是社区里用得最多的方案。它的价值在“精简”这一步：原始 Figma API 响应很大，直接塞给模型既贵又乱。README 说它主要针对 Cursor 设计，在其他客户端也能用。需要注意，令牌能读到你账号下所有可访问的文件，建议单独创建一个令牌并妥善保管；生成的代码仍要人工核对交互和响应式细节。许可证为 MIT。

Framelink MCP for Figma：让编程智能体直接读设计稿

项目与安装文档

能做什么

适合谁

接入方式

编辑点评