Figma MCP：把设计稿交给编码代理

Figma MCP（Framelink）把 Figma 图层里的尺寸、间距、颜色提取成模型能读的结构化数据，让编码 Agent 一次把界面写对。

给 AI 看截图让它写页面，结果往往是“差不多但就是不对”：间距差 4px、圆角不对、颜色偏一档。原因很简单：截图是像素，模型只能猜。Framelink 的 Figma MCP 走另一条路：直接读 Figma API，把布局与样式简化后交给模型。仓库作者也直言，它比“粘截图”准得多。

基本信息

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=YOUR-FIGMA-TOKEN", "--stdio"]
    }
  }
}

核心能力

把 Figma 数据“瘦身”后再给模型。 Figma API 原始返回非常庞大，直接塞给模型会爆上下文。这个服务器会先做简化与翻译，只保留布局与样式关键信息。官方定位就是：减少上下文，反而提高准确率。

按链接取节点。 你把 Figma 文件、Frame 或 Group 的链接粘到对话里，它自己去拉对应节点。不需要导出、不需要手动写尺寸。

配合编码 Agent 一次成型。 典型流程是：粘链接 → 说“把这个设计实现成 React 组件” → Agent 拿数据写代码。对设计改动频繁的项目，比“改一次导一次图”快很多。

适合接设计系统。 因为拿到的是真实变量与样式，而不是目测值，生成出来的组件更容易与现有设计系统对齐（比如直接用你定义的间距 token）。

使用上手

1. 去 Figma 账号设置里生成 Personal Access Token（只读权限就够）。
2. 在客户端 MCP 配置里加入上面的 json，把 token 换成你自己的。
3. 重启客户端，确认工具列表里出现 Figma 相关工具。
4. 在 Figma 里选中一个 Frame，右键复制链接（带 node-id 的那种）。
5. 把链接粘进对话，先让它“描述这个区域的布局与样式”，校对一下它读得对不对。
6. 确认无误后再让它写代码，并指定技术栈与组件库。
7. 一次只给它一个 Frame，整页丢进去容易超上下文。

优点与不足

优点是解决“截图不准”这个真实痛点，间距与颜色能对上；数据经过简化，token 消耗比直接读 API 低；MIT 开源，可以自己改字段映射。不足是它专为 Cursor 类客户端设计，其他客户端能用但体验不一；需要 Figma token，团队要管好密钥；Figma 里的自动布局、变体等复杂结构仍可能丢信息；对纯静态图（没有图层的导出图）无效。

适合谁

适合前端按设计稿写页面的开发者；适合设计稿改动频繁、需要反复对齐的项目；适合想把设计系统变量真正落到代码里的团队。不适合没有 Figma 源文件、只拿到图片的人。

下载与访问

仓库：https://github.com/GLips/Figma-Context-MCP
快速开始：https://www.framelink.ai/docs/quickstart

许可证与获取

Figma API 的调用额度与权限以 Figma 官方文档为准。

本文属于「连接器」分类的 AI 资源专栏，更多评测见分类页。