设计稿到代码的"最后一公里"终于有了官方解法：把 Figma 链接丢给 Claude Code 或 Cursor，它自己读图层结构、取设计变量、按你的组件库生成代码——中间的翻译层就是 Figma 官方的 MCP Server。它提供远程与桌面两种接入方式、四十多个读写工具，覆盖从读设计、生成代码到反向写画布的完整双向管道。本文按"接入方式、客户端配置、读设计、写设计、设计系统对接、实战建议"组织全文。
1、两种接入方式
官方推荐 Remote MCP Server，桌面版面向特定组织需求，对比如下：
| 维度 | Remote（推荐） | Desktop |
|---|---|---|
| 运行位置 | Figma 云端托管 | Figma 桌面端本地运行 |
| 接入方式 | 直连 https://mcp.figma.com/mcp，浏览器链接授权 |
桌面应用内启用后本地连接 |
| 功能面 | 最全：写画布、实时 UI 捕获等仅远程可用 | 子集，面向组织与企业管控 |
| 适合谁 | 个人与多数团队 | 特定合规场景（如 Figma for Government 仅支持桌面版） |
远程版对所有付费档位开放（Starter 也可用），桌面版需要 Dev 或 Full 席位。对绝大多数开发者，一句话结论：用 Remote，不需要装桌面端。
2、客户端接入配置
Claude Code 一条命令即可接入，示例如下：
# 当前项目可用
claude mcp add --transport http figma https://mcp.figma.com/mcp
# 所有项目全局可用
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
首次连接会弹出浏览器完成 Figma 账号授权。Cursor、Claude Desktop 等通用客户端的 mcpServers 配置如下：
{
"mcpServers": {
"figma": {
"url": "https://mcp.figma.com/mcp"
}
}
}
VS Code 的 mcp.json 用 servers 而非 mcpServers 键名，Codex CLI 则是 codex mcp add figma --url https://mcp.figma.com/mcp。注意客户端须在 Figma MCP 目录名单内（VS Code、Cursor、Claude Code 等主流工具均已收录）。
3、读设计：核心读取工具
读取侧的常用工具按用途整理如下：
| 工具 | 作用 |
|---|---|
get_metadata |
取选区的轻量 XML 大纲，先看结构 |
get_screenshot |
对选区截图，让代理"看见"设计 |
get_design_context |
取图层的设计上下文与生成代码，主力工具 |
get_variable_defs |
列出选区用到的变量与样式 |
get_code_connect_map |
查组件的 Code Connect 映射 |
get_motion_context |
取关键帧动画数据与代码片段 |
get_figjam |
把 FigJam 图转成 XML |
典型工作流是三步：在 Figma 里选中目标 frame，让代理先 get_metadata 或 get_screenshot 建立整体认知，再 get_design_context 拿到结构化上下文生成代码，配色字号等细节用 get_variable_defs 对齐。选中再取比整文件读取快得多，也让代理聚焦。
4、写设计：反向管道
远程版还有一批写工具，把管道反过来——从代码与描述生成设计：use_figma 直接创建、编辑 Figma 内容；generate_image 文生图；html_to_figma 把 HTML 文档转成设计图层；generate_figma_design 把实时网页 UI 捕获成可编辑图层；send_code_to_figma 把本地项目导入为 Make 文件；generate_diagram 用自然语言或 Mermaid 生成 FigJam 图。
这组工具改变了协作方向：设计稿不再是终点，代码与设计可以互为源头。比如先用 generate_figma_design 把竞品页面拍成图层快速起稿，定稿后再走读侧管道生成代码。
5、设计系统与 Code Connect
生成代码最大的痛点不是"像不像"，而是有没有用你的组件库。官方给了两个抓手：create_design_system_rules 提示词会分析你的代码库与设计系统，生成一份规则文件放进项目的 rules/ 或 instructions/ 目录，此后代理生成的代码自动贴合既有组件与命名；Code Connect 侧用 get_code_connect_map 查映射、add_code_connect_map 把 Figma 组件绑定到代码组件，配合 search_design_system 跨库检索组件、变量与样式。
完整工具与提示词清单里还有 Weave 任务运行、着色器读写等进阶能力，绝大多数标记为仅远程可用——又一个选 Remote 的理由。
6、实战建议与注意事项
上手建议按四步走：
- 接好后先让代理调
whoami验证身份与席位，排查授权问题 - 第一件事就跑
create_design_system_rules，把规则文件纳入版本管理 - 养成"选中 frame 再提问"的习惯，避免整文件上下文爆炸
- 截图与结构化上下文组合使用，代理对视觉细节的把握明显更稳
注意事项有四点：写画布类操作在草稿区外需要 Full 席位，该能力 beta 期免费、未来按用量计费；工具清单与席位要求以官方安装文档为准；MCP 只能访问你账号有权限的文件，团队协作时注意共享范围；桌面版功能是远程子集，除非合规要求否则不必装。
7、总结
Figma MCP Server 用一条认证连接把设计工具接进了 AI 编码链路：Remote 端点免安装、功能最全，一条 claude mcp add 即可接入；读侧以 get_design_context 为主力配合截图与变量提取，写侧能把网页、HTML、本地项目反向变成设计图层；create_design_system_rules 与 Code Connect 让生成代码贴合自家组件库而非重造轮子。
对于设计驱动的开发团队，建议本周就完成两件事：全局接入 Remote 端点、生成并提交设计系统规则文件，然后在下一个需求里让代理直接对着选中的 frame 写代码。当设计稿到组件代码的翻译成本趋近于零，前后端的交接方式值得重新设计。
