智能摘要

以前古法编程，我们需要反复核对 Figma 设计稿、手动测量尺寸、提取颜色值，还原起来非常费时。而 Figma MCP 的出现，能让 AI （如 Claude、Cursor）直接“看懂”Figma 设计，并生成高度还原的代码。

什么是 Figma MCP？

Figma MCP 是基于模型上下文协议标准构建的服务。如果不懂 MCP 是什么，可以看看这篇文章：AI 界都在讨论 MCP（Model Context Protocol）是什么？

简单来说，你可以把 Figma MCP 想象成一个专业的翻译官：

  • 输入：Figma 文件中的视觉元素、图层结构、设计系统变量
  • 输出：结构化的设计上下文信息，供 Claude 等 AI 助手直接使用

有了这个“翻译官”，AI 不再是基于模糊的截图或描述来生成代码，而是能获得精确的设计规格，从而生成还原度较高的代码。

Figma MCP 提供了什么能力？

根据官方文档，截止 2026.03，Figma MCP 服务器为开发者提供了以下11项核心能力，我将他们分组方便查看。

1. 设计生成类

让 AI 能够主动创建或修改 Figma 设计内容，实现从代码/描述到设计的逆向生成，主要有两个工具，这两个工具一般给产品或者设计师使用。

  • generate_figma_design：根据界面描述生成 Figma 图层，支持新建文件或粘贴到剪贴板（仅限客户端 + 远程 MCP）。
  • generate_diagram：基于 Mermaid 语法自动生成 FigJam 图表，支持流程图、甘特图、时序图等。

2. 设计信息读取类

核心的数据抓取能力，让 AI “看懂” 设计稿细节，为生成代码提供精准依据。

  • get_design_context：获取选中图层的设计信息，默认输出 React + Tailwind，支持通过 Prompt 指定使用的框架。例如 generate my Figma selection in Vue
  • get_metadata：返回轻量级 XML 结构，包含图层 ID、名称、类型、位置、尺寸等，适合快速解析大型设计文件。
  • get_variable_defs：提取选中内容使用的变量与样式（颜色、间距、字体、设计token），确保代码与设计系统一致。
  • get_figjam：读取 FigJam 图表的 XML 元数据及节点截图，辅助分析流程与逻辑。
  • get_screenshot：对当前选区进行截图，帮助 AI 通过视觉细节校准代码生成（如阴影、圆角、图标）。
  • whoami：返回当前 Figma 登录用户的身份信息（邮箱、权限计划等，仅远程 MCP 支持）。

3. Code Connect

连接设计组件与代码组件的桥梁，实现设计与代码的双向同步，主要提高了四个工具：

  • get_code_connect_map：查询并获取 Figma 节点 ID 与代码组件的映射关系，包括组件路径、组件名称等信息。
  • add_code_connect_map：手动建立并添加 Figma 节点与项目代码组件的对应关系，强化设计转代码的准确性。
  • get_code_connect_suggestions：自动分析设计内容，智能推荐 Figma 组件与代码组件的匹配方案。
  • send_code_connect_mappings：确认并提交系统建议的映射关系，完成设计与代码组件的绑定同步。

4. 设计系统规则

让 AI 遵循团队的设计规范与技术栈要求，生成符合工程标准的代码。

  • create_design_system_rules：创建设计系统规则文件，指导 AI 在生成代码时贴合技术栈与规范（如组件库、样式约定）。注意：运行此工具后，请将生成结果保存到rules/  或  instructions/  目录下，以便 AI 能在代码生成过程中正常读取使用。

如何开启Figma MCP

我们到官网下载最新版 Figma 桌面版后打开，在底部工具栏中，切换至Dev Mode（使用快捷键 Shift+D），在检查面板的MCP server区域，点击Enable desktop MCP server，这时候屏幕底部会出现确认提示，告知你服务器已启用并正常运行。

本地默认地址通常是：http://127.0.0.1:3845/mcp

注意：这个官方提供的MCP是需要在Dev Mode使用的，所以是需要收费的，如果没有开通会员，下拉到开源 Figma MCP 对接章节。

不同AI工具配置方法

以下整理了主流 AI 编辑器的具体配置方法，你可以安装自己喜欢的工具进行配置。

Cursor 配置方法

Cursor 是目前对 MCP 支持最直观的编辑器之一，按照下面步骤进行配置即可。

在Cursor中按 Cmd + Shift + P (Mac) 或 Ctrl + Shift + P (Windows)，输入 MCP 并选择 "Cursor: Open MCP Settings"

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-figma", "--figma-api-key", "<你的Figma_API_Token>"]
    }
  }
}

注意：如果是Windows用户，命令需要写成下面的形式

{
  "command": "cmd",
  "args": ["/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=你的API令牌", "--stdio"]
}

Claude Code配置方法

Claude Code 主要通过终端命令行进行集成，支持通过官方插件快速安装，这里自己使用插件来安装，在终端运行：claude mcp add --transport sse figma-local http://127.0.0.1:3845/sse 即可。

开源Figma MCP

如果是小团队，没有钱开通官方的会员，我们也可以使用市面开源的Figma MCP -- Framelink MCP for Figma，首先我们需要先获取 api-key，在左上角的个人头像下拉，选择 Settings，选择 Secrutity 选项卡，下拉下来选择 Personal access tokens 创建一个后保存起来。

个人设置
个人设置
生成apiKey
生成apiKey

接下来根据不同的工具安装插件，这里举 Claude Code 为例：

claude mcp add Framelink_Figma_MCP -- npx -y figma-developer-mcp --figma-api-key=YOUR-KEY --stdio

注意：--figma-api-key=YOUR-KEY 这里的YOUR-KEY替换刚刚创建的access token

实践

接下来我们使用开源的MCP来实践一下 MCP 的能力，我们选择设计稿的 node 链接

copy link to selection
copy link to selection

直接发给 AI 让他帮我实现，我们可以这样告诉他

https://www.figma.com/design/75Mcah3nj9GaKFWAZGWA7PD/Comments-and-Group-chat--Community-?node-id=4-2090&t=G7sZ3IZU85iw
6mxY-4 帮我还原这个Figma设计，使用静态html即可

最后效果图，还原度已经接近 90% 了，真棒~

设计稿

设计稿

效果图

效果图

总结

Figma MCP 代表了设计-开发工作流的一次重要演进。通过让 AI 直接访问设计数据，它消除了设计和实现之间的信息鸿沟。

随着更多开发工具集成 MCP 协议，我们可以预见一个更加无缝的设计-开发协同未来。现在就开始尝试 Figma MCP，让你的工作流进入新的时代。

本文为原创，未经授权，禁止任何媒体或个人自媒体转载
商业侵权必究，如需授权请联系340443366@qq.com
ChatGPT