Figma MCP Server

Figma MCP Server

为Figma API实现的模型上下文协议服务器。

GitHub
Created ByTimHoldenTimHolden

一个遵循模型上下文协议(MCP)的服务器，为Claude和其他MCP客户端提供Figma API集成。

功能概述

  • 🔑 安全认证与Figma API连接
  • 📁 文件操作(读取、列出)
  • 🎨 设计系统管理(变量、主题管理) - API限制下的功能规划

前提条件

  • Node.js 18.x+
  • Figma访问令牌
  • 对MCP的基本了解

安装

npm install figma-mcp-server

配置

  1. 创建.env文件:
FIGMA_ACCESS_TOKEN=your_figma_token
MCP_SERVER_PORT=3000
DEBUG=figma-mcp:*
  1. 配置Claude Desktop:

编辑配置文件:

  • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

重要: 使用绝对路径，Windows上使用双反斜杠，修改后重启Claude

使用方法

基本API

import { startServer } from 'figma-mcp-server';
const server = await startServer(process.env.FIGMA_ACCESS_TOKEN);

可用工具

  1. get-file - 获取Figma文件详情
{
  "name": "get-file",
  "arguments": {
    "fileKey": "your_file_key"
  }
}
  1. list-files - 列出项目文件
{
  "name": "list-files",
  "arguments": {
    "projectId": "your_project_id"
  }
}

限制与已知问题

  • 仅支持只读操作(Figma API限制)
  • 遵循Figma API的速率限制
  • 配置必须使用绝对路径

故障排除

常见问题:

  1. 连接错误 - 检查路径是否为绝对路径，确认服务器已构建
  2. 认证问题 - 验证Figma令牌
  3. 服务器未启动 - 检查Node版本，确认build文件存在

更多帮助查看日志:

  • macOS: ~/Library/Logs/Claude/mcp*.log
  • Windows: %APPDATA%\Claude\logs\mcp*.log

支持