前言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 优化的提示词示例
即使使用开源版本，这些实践方法同样适用。 总结与建议选择建议配置要点
| 
