Figma MCP 使用指南
本指南将帮助您了解如何安装和使用 Figma MCP (Model Context Protocol) 服务器，实现 AI 助手与 Figma 设计稿的无缝集成。
📋 目录
🚀 环境准备
1. 下载 Figma 桌面应用
访问 Figma 官网下载页面：https://www.figma.com/downloads/
2. 安装与登录
- 下载并安装 Figma 桌面应用程序
- 使用您的 Figma 账户登录
- 确保您有访问目标设计文件的权限
⚙️ MCP 服务器安装
安装步骤
参考 Cursor MCP 文档
- 访问：https://docs.cursor.com/en/tools/mcp
- 按照文档说明配置 MCP 环境
查阅 Figma 官方文档
- Figma 帮助中心：https://help.figma.com/hc/en-us
- 重要参考：Figma Dev Mode MCP Server 指南
MCP 服务器配置
在您的 MCP 客户端配置文件中添加以下配置：
json
{
"mcpServers": {
"Figma": {
"url": "http://127.0.0.1:3845/sse"
}
}
}注意：确保 Figma 桌面应用程序正在运行，MCP 服务器才能正常工作。
配置要求
- 需要 Figma 桌面应用程序
- 需要有效的 Figma 账户
- 需要配置 MCP 客户端（如 Cursor）
- 确保本地端口 3845 未被占用
🔧 功能概览
根据 Figma Dev Mode MCP Server 官方文档，当前 MCP 服务器提供以下只读功能：
核心功能
| 功能 | 描述 | 用途 |
|---|---|---|
get_code | 生成代码 | 从选中的 Figma 元素自动生成对应的前端代码 |
get_variable_defs | 获取变量定义 | 提取设计系统中的变量、颜色、字体等定义 |
get_image | 获取图片 | 导出设计元素的图片，保持布局保真度 |
get_code_connect_map | 获取代码连接映射 | 通过 Code Connect 功能重用现有组件 |
主要应用场景
🎨 设计到代码转换
- 自动从 Figma 设计生成 HTML/CSS/React 等代码
- 保持设计与代码的一致性
📊 设计系统提取
- 获取设计变量和组件定义
- 构建统一的设计系统文档
🔗 组件复用
- 通过 Code Connect 连接设计组件与代码组件
- 提高开发效率
📸 资源导出
- 批量导出设计资源
- 保持高保真度的视觉效果
⚠️ 使用限制
重要提醒
当前 MCP 服务器不支持修改 Figma 设计稿
MCP 服务器主要用于：
- ✅ 从设计稿生成代码
- ✅ 提取设计系统信息
- ✅ 提供设计上下文给 AI 助手
- ❌ 直接修改设计稿内容
- ❌ 批量编辑设计元素
🛠️ 解决方案
如果您需要修改 Figma 设计稿，可以考虑以下方案：
方案 1：手动修改（推荐）
适用场景：少量修改、精确控制
操作步骤：
- 在 Figma 桌面应用中打开设计文件
- 定位到需要修改的元素（可通过节点 ID 快速查找）
- 直接编辑文本、颜色、布局等属性
- 保存文件并同步更改
方案 2：Figma API
适用场景：批量修改、自动化处理
前提条件：
- 拥有 Figma API 访问权限
- 熟悉 API 调用和开发
优势：
- 支持批量操作
- 可以集成到自动化工作流中
方案 3：Figma 插件
适用场景：特定功能需求
注意事项：
- 可在 GitHub 或 Figma 社区查找相关插件
- 环境配置相对复杂
- 需要评估插件的安全性和稳定性
💡 最佳实践
工作流建议
设计阶段
- 在 Figma 中完成设计稿
- 建立清晰的组件和变量系统
- 使用有意义的图层命名
开发阶段
- 使用 MCP 服务器提取设计信息
- 生成基础代码框架
- 根据需要进行代码优化
维护阶段
- 保持设计稿与代码的同步
- 定期更新设计系统
- 利用 Code Connect 维护组件映射关系
效率提升技巧
- 使用组件库：建立可复用的设计组件系统
- 标准化命名：使用一致的命名规范便于代码生成
- 版本管理：合理使用 Figma 的版本控制功能
- 团队协作：建立设计与开发的协作流程
📚 相关资源
*最后更新：