Figma 刚刚在 2025 年 9 月 23 日宣布推出官方远程 MCP（Model Context Protocol）服务器的 beta 版本，这让 AI 代理（如 Cursor、VS Code 的 Copilot 或 Claude Code）能直接从远程访问你的 Figma 设计文件，而无需安装桌面应用或依赖本地服务器。简单来说，就是让 AI 模型“看懂”你的设计语义层（包括布局、组件、设计令牌等），生成更精准的代码，实现“设计即代码”的高效协作。

为什么这么简单？两步操作即可上手

Figma 官方强调配置超级友好，尤其远程模式只需两步就能连接（基于 Pro、Organization 或 Enterprise 计划的 Dev 或 Full 席位）。以下是快速指南：

1. 生成 Figma API 令牌（OAuth 认证）：

• 打开 Figma 桌面 app 或网页版，登录你的账户。

• 点击右上角头像 > Settings > Account > Personal access tokens。

• 点击 Create new token，命名如 “MCP-Remote”，生成令牌并复制保存（它只显示一次）。

2. 在你的 AI 工具中添加远程 MCP 服务器：

• 以 Cursor 为例：打开 Cursor Settings > MCP 部分 > Add New MCP Server。

  在 .mcp.json 文件中粘贴以下配置（替换 <your-figma-token> 为你的令牌）：

• {  "mcpServers": {

   "Figma Remote": {
     "url": "https://mcp.figma.com/mcp",
     "auth": {
       "type": "bearer",
       "token": "<your-figma-token>"
     }
   }
 }
}

• 保存后，重启工具。Figma 会自动处理认证，现在你的 AI 就能直接拉取设计上下文了！

如果用其他工具如 VS Code 或 Windsurf，配置类似——只需指向 https://mcp.figma.com/mcp 端点。注意：目前是开放 beta，部分用户可能需等待 rollout；免费计划暂不支持，建议升级到付费版。

核心功能亮点

• 设计上下文注入：AI 能获取 Figma 文件的语义细节（如响应式布局、交互、变量），生成 React/Tailwind 等代码，避免“翻译”偏差。

• 远程访问：摆脱本地限制，支持浏览器-based 模型或远程 IDE，甚至 Docker 容器（用 host.docker.internal:3845 替换 localhost）。

• 工具集：包括代码生成、组件映射、设计令牌检索，还支持 Figma Make 文件的代码索引。

• 反馈与迭代：Figma 鼓励 beta 用户通过弹出表单或 注册客户端 提供反馈，未来会加更多选项如 Make 集成。

这波更新让 Figma 更像 AI 时代的“设计大脑”，设计师和前端终于能“零摩擦”协作。想试试？直接去 Figma 博客 或 帮助中心 起步。