OpenCode 配置 Figma MCP 完整指南

在 AI 编程工具的世界里，将设计稿直接转化为代码一直是开发者的梦想。通过配置 Figma MCP（Model Context Protocol）服务器，你可以让 OpenCode 直接读取 Figma 设计数据，实现设计到代码的一键转换。

什么是 Figma MCP

Figma MCP是一个专门为 AI 编程工具设计的 MCP 服务器。它的核心功能是：

• 让 AI 编程工具直接访问你的 Figma 文件
• 自动提取设计稿中的布局和样式信息
• 简化 Figma API 返回的数据，只保留对代码生成最有用的部分

当 AI 拥有了 Figma 设计数据，它生成的代码会比单纯看截图准确得多。

准备工作

在开始配置之前，你需要准备以下内容：

1. 获取 Figma API 访问令牌

这是最关键的一步。你需要在 Figma 中创建一个个人访问令牌：

1. 登录 Figma 账户
2. 点击右上角头像，选择「Settings」
3. 滚动到「Personal access tokens」部分
4. 点击「Generate new token」
5. 给令牌起个名字（比如 "OpenCode MCP"）
6. 复制生成的令牌并妥善保存

注意：令牌只会显示一次，请务必保存好。

2. 确认 OpenCode 已安装

确保你的系统已安装 OpenCode。可以通过以下命令检查：

opencode --version

如果尚未安装，使用官方安装脚本：

curl -fsSL https://raw.githubusercontent.com/opencode-ai/opencode/refs/heads/main/install | bash

3. 确保 Node.js 环境可用

Figma MCP 服务器通过 npx 运行，需要 Node.js 环境。检查是否已安装：

node --version
npx --version

配置步骤

第一步：找到 OpenCode 配置文件

OpenCode 的配置文件名为 opencode.json 或 opencode.jsonc，通常位于：

• 项目级配置：项目根目录
• 用户级配置：~/.config/opencode/ 目录

如果配置文件不存在，你可以手动创建一个。

第二步：添加 MCP 服务器配置

在配置文件的 mcp 字段下添加 Figma MCP 服务器。OpenCode 使用 local 类型来配置本地 MCP 服务器。

基础配置（macOS / Linux）：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "figma": {
      "type": "local",
      "command": ["npx", "-y", "figma-developer-mcp", "--figma-api-key=你的API密钥", "--stdio"],
      "enabled": true
    }
  }
}

Windows 配置：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "figma": {
      "type": "local",
      "command": ["cmd", "/c", "npx", "-y", "figma-developer-mcp", "--figma-api-key=你的API密钥", "--stdio"],
      "enabled": true
    }
  }
}

第三步：使用环境变量（推荐）

为了安全起见，建议不要将 API 密钥直接写在配置文件中。可以使用 environment 字段传入环境变量：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "figma": {
      "type": "local",
      "command": ["npx", "-y", "figma-developer-mcp", "--stdio"],
      "environment": {
        "FIGMA_API_KEY": "你的API密钥"
      },
      "enabled": true
    }
  }
}

更安全的做法是在系统环境变量中设置 FIGMA_API_KEY：

# 在 ~/.bashrc 或 ~/.zshrc 中添加
export FIGMA_API_KEY="你的API密钥"

然后在配置中引用：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "figma": {
      "type": "local",
      "command": ["npx", "-y", "figma-developer-mcp", "--stdio"],
      "environment": {
        "FIGMA_API_KEY": "{env:FIGMA_API_KEY}"
      },
      "enabled": true
    }
  }
}

第四步：验证配置

配置完成后，可以通过以下方式验证：

# 列出所有 MCP 服务器及其状态
opencode mcp list

在 OpenCode 的 TUI 界面中，你也可以通过提示词来测试 Figma 工具是否可用。

使用方法

配置完成后，使用起来非常简单：

1. 在 OpenCode 中打开对话界面
2. 粘贴 Figma 文件、画板或组件的链接
3. 在提示词中添加 use figma 来指定使用 Figma 工具
4. AI 会自动获取 Figma 数据并生成代码

示例提示词：

请根据这个设计实现页面 https://www.figma.com/file/xxxxx/文件名?node-id=xxx use figma

配置选项说明

OpenCode 本地 MCP 服务器支持以下配置选项：

完整配置示例

这是一个包含 Figma MCP 的完整 OpenCode 配置文件示例：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "figma": {
      "type": "local",
      "command": ["npx", "-y", "figma-developer-mcp", "--stdio"],
      "environment": {
        "FIGMA_API_KEY": "{env:FIGMA_API_KEY}"
      },
      "enabled": true,
      "timeout": 10000
    }
  }
}

常见问题

MCP 服务器启动失败

检查以下几点：

• Node.js 是否正确安装
• 网络是否能访问 npm 仓库
• command 数组格式是否正确

工具未被 AI 识别

• 确认 enabled 设置为 true
• 确认配置文件格式正确（JSON 语法）
• 使用 opencode mcp list 查看服务器状态

API 密钥无效

• 确认令牌没有过期
• 检查令牌权限是否足够
• 重新生成一个新的访问令牌

小结

通过配置 Figma MCP，你可以让 OpenCode 直接读取 Figma 设计数据，大幅提升设计还原的准确度。整个配置过程只需要三步：获取 Figma API 令牌、编辑 OpenCode 配置文件、验证配置是否生效。

配置完成后，只需在对话中粘贴 Figma 链接，AI 就能自动获取设计信息并生成高质量的代码。