推荐语
Claude Code 配置 Figma MCP 的实战经验分享，帮你避开配置过程中的常见陷阱。
核心内容：
1. MCP 基础管理命令与远程 HTTP 服务添加方法
2. Figma MCP 两种配置路径的详细对比与选择建议
3. 官方 MCP 的使用限制与授权连接实操指南
杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家
前言
Claude Code 推出后，MCP（Model Context Protocol）的配置成为了许多开发者关注的焦点。虽然官方提供了基础教程，但在实际配置 Figma MCP 时，我遇到了不少坑。本文将分享我的完整配置经验，帮助你少走弯路。
MCP 基础管理命令
在开始配置之前，先了解 Claude Code 中 MCP 的基本管理命令：
# 列出所有已配置的服务器
claude mcp list
# 查看特定服务器的详细信息
claude mcp get github
# 删除服务器
claude mcp remove github
# 在 Claude Code 中检查服务器状态
/mcp
添加远程 HTTP 服务
对于远程 HTTP MCP 服务，可以使用以下命令：
# 基础添加命令
claude mcp add --transport http <name> <url>
# 示例：连接到本地 HTTP MCP 服务器
claude mcp add --transport http my-server http://localhost:8080/mcp
# 需要认证时使用 --header 参数
claude mcp add --transport http secure-api https://api.example.com/mcp \
--header "Authorization: Bearer your-token"
配置 Figma MCP 的两条路径
在配置过程中，我发现 Figma MCP 有两个版本可选：
- Figma 官方 MCP Server：功能强大但有使用限制
- 开源版 Figma-Context-MCP：完全免费但功能相对精简
方案一：Figma 官方 MCP（推荐付费用户）
快速配置
在终端运行以下命令即可完成配置：
claude mcp add --transport http figma https://mcp.figma.com/mcp
这个命令实际上会修改用户目录下的 .claude.json 文件。配置完成后的效果：
授权连接
首次使用需要授权 Figma 账号。启动 Claude Code 后，输入 /mcp 查看连接状态：
如果未授权，会出现授权选项：
使用限制
重要提示：免费用户每月仅有 6 次使用额度。
实际体验中，生成一个 Figma 页面基本会耗尽这 6 次机会，甚至可能不够用。因此，除非你是付费用户，否则不建议在正式项目中使用官方 MCP。
官方 MCP 的优势
尽管有使用限制,官方 MCP 提供了 10 个工具，功能非常全面：
官方版本获取的设计稿上下文更加详细丰富，包括：
这些信息能显著提升代码生成的准确度。
方案二：开源 Figma-Context-MCP（推荐免费用户）
对于预算有限或需要频繁使用的开发者，Figma-Context-MCP 是更好的选择。
配置步骤
步骤 1：全局安装依赖
npm install -g figma-developer-mcp
步骤 2：创建配置文件
在项目根目录创建 .mcp.json 文件（或修改 ~/.claude.json 以实现全局配置），添加以下内容：
{
"mcpServers": {
"figma-developer-mcp": {
"command": "figma-developer-mcp",
"args": [
"--stdio"
],
"env": {
"FIGMA_API_KEY": "[YOUR_FIGMA_API_KEY]"
}
}
}
}
配置说明：
figma-developer-mcp：自定义别名，避免与官方 MCP 冲突FIGMA_API_KEY：需要在 Figma 设置中生成个人访问令牌
步骤 3：重启并授权
配置完成后，重启 Claude Code，同意使用该 MCP：
步骤 4：验证配置
使用以下命令验证配置是否成功：
claude mcp list
# 或在 Claude Code 中输入
/mcp
开源版本的特点
开源 MCP 提供 2 个核心工具：
虽然工具数量较少，但完全免费且无使用限制。
实战技巧：如何提升开源 MCP 的生成效果
使用开源版 Figma MCP 时，我总结了以下技巧来提升代码生成质量：
技巧一：结合截图使用
在调用 Figma MCP 工具之前，先手动上传设计稿截图，然后再调用 MCP 获取数据。视觉信息 + 结构数据的组合能显著提升还原度。
技巧二：参考官方最佳实践
Figma 官方提供了与 Claude Code 结合使用的最佳实践文档，主要包括：
- CLAUDE.md 文件配置：定义项目级别的规则和约束
- 高效提示词模板：针对 Figma MCP 优化的提示词示例
即使使用开源版本，这些实践方法同样适用。
总结与建议
选择建议
配置要点
粤ICP备14082021号
免费POC，
零成本试错
