Figma MCP Server

基本能力

产品定位

Figma MCP Server 是一个为 Figma API 提供 MCP 兼容访问的服务器，旨在为 LLM 应用程序提供标准化的上下文访问能力。

核心功能

• MCP 资源处理器
• Figma 文件访问和操作
• 变量和组件管理

• 自定义 URI 方案 (figma:///)

• 健壮的实现

• 使用 TypeScript 进行类型安全实现
• 使用 Zod 模式进行请求验证
• 全面的错误处理
• 令牌验证和 API 集成
• 批量操作支持

适用场景

• LLM 应用程序需要访问和操作 Figma 资源
• 开发需要与 Figma API 集成的工具或服务
• 需要标准化访问 Figma 资源的场景

工具列表

• @modelcontextprotocol/sdk: MCP 的 TypeScript SDK，用于客户端集成
• figma-mcp-server: 主服务器实现，提供 MCP 兼容的 Figma 资源访问

常见问题解答

• 错误代码
• -32700: 解析错误
• -32600: 无效请求
• -32601: 方法未找到
• -32602: 无效参数
• -32603: 内部错误
• 100: 资源未找到
• 101: 资源访问被拒绝
• 102: 资源暂时不可用

使用教程

使用依赖

npm install @modelcontextprotocol/sdk
npm install

安装教程

1. 设置 Figma 访问令牌: bash export FIGMA_ACCESS_TOKEN=your_access_token
2. 配置服务器 (可选): bash export MCP_SERVER_PORT=3000

启动服务器

npm run start

调试方式

启用调试日志:

DEBUG=figma-mcp:* npm start

客户端集成示例

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";

// 初始化客户端
const transport = new StdioClientTransport({
  command: "path/to/figma-mcp-server",
});

const client = new Client({
  name: "figma-client",
  version: "1.0.0",
}, {
  capabilities: {
    resources: {} // 启用资源能力
  }
});

await client.connect(transport);

// 列出可用的 Figma 资源
const resources = await client.request(
  { method: "resources/list" },
  ListResourcesResultSchema
);

// 读取特定的 Figma 文件
const fileContent = await client.request(
  {
    method: "resources/read",
    params: {
      uri: "figma:///file/key"
    }
  },
  ReadResourceResultSchema
);

许可证

该项目遵循 MIT 开源许可条款。