Figma MCP实战：设计稿直连AI代码编辑器完整教程

在Vibe Coding工作流中，设计稿和代码编辑器之间的高效通讯是实现"AI自动写代码"的关键一环。本文将手把手教你如何通过Figma MCP（模型上下文协议）将Figma设计稿与Antigravity代码编辑器连接起来，让AI直接读取设计稿中的元素和规范，为后续的自动代码生成打下基础。

背景：什么是Vibe Coding？ Vibe Coding是2025年兴起的AI辅助编程范式，由OpenAI联合创始人Andrej Karpathy正式提出并命名。其核心理念是：开发者通过自然语言描述意图，由AI完成大部分代码编写工作，人类更多扮演"导演"而非"执行者"的角色。在这一范式下，从设计稿到前端代码的全自动化转换，成为最具代表性的落地场景之一——而打通设计工具与AI编辑器之间的通讯，正是实现这一目标的基础设施。

什么是MCP？它在设计转代码中扮演什么角色？

MCP全称是Model Context Protocol（模型上下文协议），它是一种让AI模型与第三方服务进行通讯的标准协议。在设计稿转代码的场景中，MCP承担着三个核心职责：

• 桥梁作用：连接Figma设计稿和Antigravity代码编辑器
• 数据传递：让AI读取设计稿上的元素、布局、样式等规范信息
• 精准还原：基于读取到的设计信息，AI可以将设计稿高保真地转化为前端代码

没有MCP，设计稿和代码编辑器就像两座孤岛，AI无法理解设计师的意图。有了MCP，AI就能"看懂"设计稿，并据此生成高质量的前端代码。

深入理解：MCP协议从何而来？ MCP由Anthropic（Claude的开发商）于2024年底正式开源，是专为AI应用设计的标准化通讯协议。它解决了AI大模型与外部工具、数据源之间的"最后一公里"问题。在MCP出现之前，每个AI工具都需要为不同的外部服务单独开发适配层，开发成本高昂且难以维护——例如，同一个Figma集成，可能需要为Cursor、Copilot、Claude等不同AI工具分别实现一遍。MCP通过定义统一的JSON-RPC通讯规范，让任何支持MCP协议的AI客户端都能与任何MCP Server无缝对接，真正实现了"一次接入，处处可用"。目前，Figma、GitHub、Notion、数据库等数百种主流工具已陆续推出官方MCP Server，生态正在快速扩张。

前置准备：安装Figma桌面客户端

在配置MCP之前，必须先安装Figma的桌面客户端（Desktop App），网页版不支持MCP服务。这是因为MCP Server需要在本地客户端中运行。

为什么网页版不支持？ MCP Server本质上是一个运行在本地的轻量级进程，它通过标准输入输出（stdio）或本地HTTP端口与AI客户端通讯。浏览器出于安全沙箱机制的限制，无法在网页环境中启动或维持这类本地进程。因此，Figma MCP功能只能在拥有完整系统权限的桌面客户端中运行，这也是目前大多数MCP Server的共同要求。

下载与安装步骤

1. 打开Figma官网，点击下载区域选择 Desktop 版本
2. 下载完成后安装到本地
3. 登录你的Figma账号，即可在客户端中看到之前创建的所有设计稿

客户端版本与网页版功能完全一致，之前在网页版中通过AI生成的设计稿，在客户端中同样可以查看和编辑。

整理设计稿到同一文件

正式配置MCP之前，建议先把设计稿归整到一个设计文件中，方便AI一次性读取完整信息：

1. 点击首页，进入 Design 模块
2. 使用 Copy Design 功能将各个页面（如首页、详情页等）复制到同一个设计文件中
3. 这样后续AI读取时可以一次性获取完整的设计规范

开启Figma MCP服务：核心配置步骤

设计稿准备就绪后，接下来进入核心环节——分别在Figma和Antigravity两端完成MCP配置。

Figma端：启用MCP Server

1. 在Figma客户端中，切换到底部的 Model 选项卡
2. 选中一个页面，在右侧面板中找到 MCP 区域
3. 点击 Enable Desktop MCP Server 按钮
4. 看到提示"MCP服务已经开启"即表示成功

这一步相当于在Figma客户端本地启动了一个MCP服务端进程，它会监听特定端口，等待Antigravity等支持MCP协议的工具发起连接请求。一旦连接建立，AI就可以通过标准化的MCP接口查询设计稿中的节点树、样式变量、组件属性等结构化数据。

Antigravity端：安装Figma MCP插件

打开Antigravity代码编辑器，按以下步骤操作：

1. 点击右侧 Agent 面板，找到三个点菜单中的 MCP Server
2. Antigravity内置了多种MCP Server，在搜索框中输入 Figma
3. 找到 Figma Model MCP，点击查看简介和安装说明
4. 点击 安装，等待安装完成

安装完成后，Antigravity就具备了与Figma通讯的能力。不过还差最后一步——Access Token认证。

创建Figma Access Token并完成授权

出于安全考虑，Figma不允许任何工具随意读取设计稿，必须通过Access Token进行授权认证。

Access Token的安全机制原理 Figma的Access Token采用业界通行的个人访问令牌（Personal Access Token，PAT）机制，其设计思路与GitHub、GitLab等开发平台一致。Token本质上是一串经过加密签名的字符串，代表特定用户在特定权限范围内的访问凭证。当Antigravity携带Token向Figma API发起请求时，Figma服务器会验证Token的有效性、是否过期，以及请求的操作是否在Token授权的权限范围之内。设置较短的有效期（如7天）和遵循最小权限原则（只勾选"读取设计稿"而非"编辑"权限），是防止Token泄露后被滥用的两道重要防线。Token生成后只显示一次，也是出于同样的安全考量——服务器只存储Token的哈希值而非明文，因此无法再次展示原始Token。

生成Access Token

1. 回到Figma客户端，点击首页 → 个人信息 → 设置 → 安全
2. 找到 创建Access Token 选项
3. 填写Token名称（如"Antigravity-MCP"）
4. 设置有效期（建议选择7天，到期后可重新生成）
5. 配置作用域权限——重点勾选读取设计稿的相关权限
6. 点击生成，复制生成的Access Token

提示：Token生成后只显示一次，请务必立即复制保存。

在Antigravity中配置Token

拿到Token后，有两种配置方式可以选择：

方式一：通过AI指令自动配置

直接在Antigravity的对话框中输入指令："帮我配置Access Token用来连接Figma"，然后粘贴Token。AI会自动完成配置写入。

方式二：手动写入配置文件

如果AI自动配置失败（比如出现403权限不足的错误），可以手动操作：

1. 进入项目的配置目录（Page目录）
2. 找到MCP相关的配置文件
3. 将Access Token粘贴到对应字段
4. 保存配置

403错误排查指南 HTTP 403（Forbidden）错误意味着服务器收到了请求，但拒绝执行——通常是身份认证信息缺失或错误导致的。在MCP配置场景中，403错误最常见的原因有两种：一是Token未被正确写入配置文件（例如存在多余的空格、换行符，或写入了错误的字段），二是Token的权限范围不包含当前请求的操作。遇到403时，优先检查配置文件中Token字段的值是否与生成时完全一致，其次确认Token的作用域权限是否勾选了"读取文件"（Read files）相关选项。

实际操作中，第一次配置可能会遇到403错误，这通常是Token未正确写入配置文件导致的。手动检查并粘贴Token后即可解决。

验证Figma MCP通讯是否成功

配置全部完成后，一定要做一次通讯测试来确认连接正常：

1. 回到Figma客户端，选中设计稿
2. 右击选择 Copy Link to Selection，复制设计稿链接
3. 在Antigravity中发送指令："是否可以读到这个设计稿"，并附上链接
4. 等待AI响应

如果配置正确，AI会返回类似以下信息：

"是的，我已经成功获取到该Figma的设计稿。包含：主题、副标题、核心区域、底部导航……