通过 MCP 让 AI 读懂你的 Figma 设计稿

T___T2025-12-08 16:02

一、什么是 MCP？

MCP（Model Context Protocol） 是 Anthropic 推出的开放协议，用于连接 AI 系统与外部工具和数据源。它就像是 AI 编辑器的"插件系统"，让 AI 能够：

访问外部数据源（数据库、API、文件系统）
调用专业工具（Figma、GitHub、Notion 等）
扩展 AI 能力边界

为什么需要 MCP？

传统的 AI 编辑器只能处理文本和代码，无法直接访问设计工具、数据库等外部资源。MCP 打破了这个限制：

标准化协议：统一的接口规范，任何工具都可以接入
实时数据访问：AI 可以获取最新的设计稿、API 文档等
能力扩展：通过 MCP Server 扩展，AI 能力可以无限延伸

二、为什么要连接 Figma？

设计到代码的痛点

在传统开发流程中：

设计师在 Figma 中完成设计
开发者手动查看设计稿
逐个还原样式、布局、交互
反复对比调整细节

这个过程：

耗时：一个复杂页面可能需要数小时甚至数天
易错：颜色、间距、字体容易出现偏差
重复劳动：修改设计后需要重新手动调整

三、如何配置 Cursor/Windsurf 连接 Figma

1、准备工作

（1）获取 Figma API Key

这里全部点上也可以

复制api key。

（2）安装必备

Node.js ≥ v18

2.1、配置文件启动（cursor）

1、打开最新版cursor

json 复制代码

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

2、检查是否成功

2.2、配置文件启动（Windsurf）

打开最新版Windsurf

右上角

1、搜索并下载Figma

2、点击右上角齿轮

3、复制同上json代码，添加进去

4、注意json格式

5、检查是否成功

四、在 Cursor/Windsurf 中使用 Figma工作流

1、点击所选区域

2、右键鼠标

3、选择上图框选内容

4、最后，将这个链接丢给 Cursor/Windsurf 完成业务

MCP官方文档