Claude Code 配置 Figma MCP 实战指南

前言

Claude Code 推出后，MCP（Model Context Protocol）的配置成为了许多开发者关注的焦点。虽然官方提供了基础教程，但在实际配置 Figma MCP 时，我遇到了不少坑。本文将分享我的完整配置经验，帮助你少走弯路。

MCP 基础管理命令

在开始配置之前，先了解 Claude Code 中 MCP 的基本管理命令：

bash 复制代码

# 列出所有已配置的服务器
claude mcp list

# 查看特定服务器的详细信息
claude mcp get github

# 删除服务器
claude mcp remove github

# 在 Claude Code 中检查服务器状态
/mcp

添加远程 HTTP 服务

对于远程 HTTP MCP 服务，可以使用以下命令：

bash 复制代码

# 基础添加命令
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（推荐付费用户）

快速配置

在终端运行以下命令即可完成配置：

bash 复制代码

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：全局安装依赖

bash 复制代码

npm install -g figma-developer-mcp

步骤 2：创建配置文件

在项目根目录创建 .mcp.json 文件（或修改 ~/.claude.json 以实现全局配置），添加以下内容：

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：验证配置

使用以下命令验证配置是否成功：

bash 复制代码

claude mcp list
# 或在 Claude Code 中输入
/mcp

开源版本的特点

开源 MCP 提供 2 个核心工具：

获取 Figma 图片：提取设计稿的视觉内容
获取 Figma 数据：提取设计稿的结构数据

虽然工具数量较少，但完全免费且无使用限制。

实战技巧：如何提升开源 MCP 的生成效果

使用开源版 Figma MCP 时，我总结了以下技巧来提升代码生成质量：

技巧一：结合截图使用

在调用 Figma MCP 工具之前，先手动上传设计稿截图，然后再调用 MCP 获取数据。视觉信息 + 结构数据的组合能显著提升还原度。

技巧二：参考官方最佳实践

Figma 官方提供了与 Claude Code 结合使用的最佳实践文档，主要包括：

CLAUDE.md 文件配置：定义项目级别的规则和约束
高效提示词模板：针对 Figma MCP 优化的提示词示例
输出一致性保证：确保生成结果符合预期的技巧

即使使用开源版本，这些实践方法同样适用。

总结与建议

选择建议

使用场景	推荐方案	理由
个人学习/小项目	开源 Figma-Context-MCP	免费无限制，满足基本需求
商业项目（预算充足）	Figma 官方 MCP	功能全面，生成质量更高
商业项目（预算有限）	开源 MCP + 手动优化	性价比最高

配置要点

项目级 vs 全局配置 ：
- 项目级：在项目根目录创建 .mcp.json
- 全局配置：修改 ~/.claude.json
API Key 安全 ：
- 不要将包含 API Key 的配置文件提交到版本控制
- 建议使用环境变量管理敏感信息
性能优化 ：
- 开源版本响应速度更快（本地运行）
- 官方版本可能受网络影响

通过本文的配置指南，相信你已经能够根据自己的需求选择合适的 Figma MCP 方案。无论选择哪种方案，合理运用都能大幅提升前端开发效率。

相关资源：