基本能力
产品定位
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: 资源暂时不可用
使用教程
使用依赖
bash
npm install @modelcontextprotocol/sdk
npm install
安装教程
- 设置 Figma 访问令牌:
bash
export FIGMA_ACCESS_TOKEN=your_access_token - 配置服务器 (可选):
bash
export MCP_SERVER_PORT=3000
启动服务器
bash
npm run start
调试方式
启用调试日志:
bash
DEBUG=figma-mcp:* npm start
客户端集成示例
```typescript
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
);
```
