Figma MCP 接入指南：让AI直接读取你的设计文件
什么是Figma MCP？
Figma MCP Server是Figma官方基于Model Context Protocol提供的接口。它能让你在Claude Code、Codex等AI工具中直接读取设计文件。
核心能力
Figma MCP可以从设计到代码一站式完成：
选中Frame生成代码：把设计稿中的页面或组件直接转成代码
提取设计上下文：读取颜色、字号、组件、布局等所有设计信息
读取FigmaJam/Make资源：把流程图、架构图加入AI上下文
结合Code Connect：AI生成的代码可以重用你现有的组件库
两种连接方式
Remote MCP（云端）
地址：https://mcp.figma.com/mcp
适合云端协作，支持高级功能
Desktop MCP（本地）
地址：http://127.0.0.1:3845/mcp
通过Figma Desktop运行，适合本地开发
使用前准备
1. Figma账号要求
Remote MCP所有座位和套餐均可使用：
免费计划：每月限制6次工具调用
付费Dev seat：每分钟10次调用，无月度限制
Desktop MCP需要在付费套餐中拥有Dev或Full seat。
2. 客户端支持
Claude Code和Codex都已官方支持，可以同时接入Remote和Desktop MCP。
3. Figma Desktop
如果要使用Desktop MCP，必须安装并更新到最新版Figma Desktop。
启用Figma Desktop MCP Server
开启步骤：
打开Figma Desktop，确保已更新到最新版本
打开任意一个Figma Design文件
切换到Dev Mode（快捷键Shift + D）
在右侧Inspect面板找到MCP server区域
点击Enable desktop MCP server
启用成功后，底部会显示提示，地址为：http://127.0.0.1:3845/mcp
两种上下文提供方式
Selection-based（选中驱动）
在Figma Desktop中选中一个Frame
在AI工具中提示：“实现当前Figma选中的设计”
仅适用于Desktop MCP，Remote MCP不支持此方式
Link-based（链接驱动）
复制Figma中某个Frame的链接
在AI工具中粘贴链接，让AI实现该设计
Desktop MCP和Remote MCP都支持
Claude Code接入配置
方式一：接入Desktop MCP（本地）
在终端中执行以下命令：
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp参数说明：
--transport http：使用HTTP协议连接
figma-desktop：MCP服务器标识符（可自定义）
http://127.0.0.1:3845/mcp：Desktop MCP本地地址
管理命令：
# 查看所有MCP服务器
claude mcp list
# 删除MCP服务器
claude mcp remove figma-desktop
# 查看配置详情
claude mcp info figma-desktop方式二：接入Remote MCP（云端）
claude mcp add --transport http figma-remote https://mcp.figma.com/mcp使用示例：
连接成功后，在Claude Code中可以这样提问：
“请读取我在Figma Desktop中当前选中的Frame，分析其布局和样式，然后为我的React项目生成一个对应的组件。”
Codex接入配置
Codex by OpenAI对Figma MCP的支持非常完整。Codex支持Desktop MCP server、Remote MCP server、Code to canvas（Remote独有）和Skills（预设工作流）。
接入Remote MCP（推荐）
打开Codex的MCP或Tools/Servers配置界面
新增一个MCP server
URL填写：https://mcp.figma.com/mcp
保存配置并重启或刷新Codex
Remote MCP的优势：
不依赖Desktop本地运行
支持Code to Canvas，可以将Web界面回写到Figma（仅在Claude Code中可用，使用generate_figma_design工具）
更适合云端协作和长时间运行的工作流
注意：有速率限制（免费6次/月，付费Dev seat 10次/分钟）
接入Desktop MCP（本地）
在Codex的MCP配置中添加：
{
"mcpServers": {
"figma-desktop": {
"url": "http://127.0.0.1:3845/mcp",
"transport": "http"
}
}
}配置保存后，重启Codex即可使用。
典型使用场景
场景1：获取设计并生成组件
操作流程：在Figma中选中组件或复制节点链接，然后在AI工具中发起请求：
“请使用已连接的Figma MCP服务器读取当前选中的Frame，分析其布局、颜色、字体和组件结构，并为我的React项目生成一个可复用的组件代码。”
场景2：配合Code Connect重用组件
开启Code Connect后，AI会优先使用你现有的组件库：
“请基于Figma MCP提供的设计上下文和Code Connect映射，生成使用我们现有组件库的实现代码，而不是重新写一个全新的组件。”
场景3：利用Skills（预设工作流）
在支持Skills的客户端中，可以直接调用：
Implement Design - 实现设计
Code Connect Components - 连接组件
Create Design System Rules - 创建设计系统规则
推荐实践流程
完整配置顺序：
启用Desktop MCP：在Figma Desktop中开启MCP server，获得本地地址 http://127.0.0.1:3845/mcp
配置Claude Code：执行 claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
配置Codex：添加Remote MCP（https://mcp.figma.com/mcp），可选添加Desktop MCP
启用Figma相关Skills
开始使用：通过selection-based或link-based方式，把Figma设计上下文交给AI，生成与现有代码库对齐的实现代码
总结
这套工作流既覆盖本地开发场景（Desktop MCP + Claude Code），也覆盖云端协作和高级能力场景（Remote MCP + Codex + Skills），完全符合Figma官方对MCP的最新设计。
核心优势：
设计到代码的效率提升明显
保持设计与代码的一致性
支持现有组件库的重用
设计师与开发者可以更好协作
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！