AI导哈

Figma设计代理服务器

一个通过Cursor IDE提供安全访问Figma设计的模型上下文协议(MCP)服务器，无需开发者单独拥有Figma账户即可共享设计资源。

  • by vbrail
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 vbrail/PROXY_MCP_FIGMA

使用说明

Figma MCP代理服务器

一个模型上下文协议（MCP）服务器，通过Cursor IDE提供对Figma设计的安全访问。此服务器使用您的个人访问令牌与Figma进行身份验证，并将您的设计暴露给您的开发团队，而不需要单独的Figma帐户。

建筑

Developer Cursor IDEs → Your MCP Server (Cloud) → Figma API (Your Account)
  • 您的开发人员 将他们的Cursor IDE连接到托管的MCP服务器
  • 您的MCP服务器 使用您的凭据与Figma进行身份验证
  • 所有Figma请求 通过你的服务器（开发人员从不直接接触Figma）

特性

资源

  • figma://files -列出所有Figma文件
  • figma://file/{file_id} -获取特定文件内容（帧、层、组件）
  • figma://team/{team_id} -列出团队的文件和项目
  • figma://project/{project_id} -项目信息

工具

  • export_asset -从设计导出图像（PNG、JPG、SVG、PDF）
  • get_design_tokens -提取设计标记（颜色、排版、间距）
  • search_files -按名称搜索Figma文件
  • get_components -列出特定文件中的组件
  • get_styles -获取已发布的样式（颜色、文本样式）

安装说明

1.获取您的Figma个人访问令牌

  1. 登录您的Figma帐户
  2. 点击您的个人资料图片→ 设置
  3. 首选 账户 tab → 个人访问令牌
  4. 点击 生成新令牌
  5. 为其命名（例如，“MCP代理服务器”）
  6. 复制令牌（您将不会再看到它！）

2.部署服务器

选项A：部署到Docker渲染（推荐）

  1. 将此存储库分叉或推送到GitHub
  2. 注册于 render.com
  3. 创建新的 Web服务
  4. 连接您的GitHub存储库
  5. 配置：
    • 运行时: Docker
    • Dockerfile路径: Dockerfile （自动检测）
    • 环境变量:
      • FIGMA_ACCESS_TOKEN =（步骤1中的令牌）
      • NODE_ENV = production
      • PORT = 10000 （渲染会自动设置此设置）
  6. 部署！

📖 详细步骤：参见 部署.md 以完成演练。

您的服务器URL将是： https://your-service-name.onrender.com

选项B：部署到铁路

  1. 推送到GitHub
  2. 注册于 railway应用程序
  3. 从GitHub仓库创建新项目
  4. 添加环境变量： FIGMA_ACCESS_TOKEN
  5. 部署！

选项C：部署到其他平台

任何Node.js托管平台都可以工作：

  • Fly.io：使用 fly.toml 配置
  • AWS ECS/Lambda：容器化和部署
  • 数字海洋应用平台：类似于渲染
  • Heroku：标准Node.js构建包

3.配置Cursor IDE（针对每个开发人员）

每个开发人员都需要将MCP服务器添加到他们的Cursor配置中：

苹果电脑

编辑： ~/Library/Application Support/Cursor/mcp.json

视窗

编辑： %APPDATA%\Cursor\mcp.json

Linux

编辑： ~/.config/Cursor/mcp.json

配置：

{
  "mcpServers": {
    "figma-proxy": {
      "transport": "sse",
      "url": "https://your-service-name.onrender.com/sse"
    }
  }
}

替换 your-service-name.onrender.com 使用您的实际服务器URL。

注： 如果您的服务器需要身份验证，您可能需要添加标头或使用其他传输方法。

4.重新启动游标

添加配置后，完全重新启动Cursor IDE。MCP服务器现在应该可用。

使用示例

配置后，开发人员可以在Cursor中使用自然语言与Figma进行交互：

列出文件

"Show me all my Figma files"
"List the files in my Figma account"

查看文件内容

"Show me the design for file [file-id]"
"Get the components from file [file-id]"

出口资产

"Export the logo from file [file-id] as PNG"
"Get a 2x scale export of node [node-id]"

获取设计代币

"Extract design tokens from file [file-id]"
"Show me the colors and typography from [file-id]"

搜索文件

"Search for files named 'dashboard'"
"Find all files with 'mobile' in the name"

本地开发

要在本地运行服务器进行测试，请执行以下操作：

# Install dependencies
npm install

# Create .env file
echo "FIGMA_ACCESS_TOKEN=your_token_here" > .env
echo "PORT=3000" >> .env

# Build
npm run build

# Run
npm start

服务器将在以下时间可用 http://localhost:3000/sse

API终点

  • GET /health -健康检查端点
  • GET /sse -MCP协议的SSE端点（由Cursor使用）
  • POST /message -客户端到服务器通信的消息端点

安全注意事项

  1. 令牌安全：你的Figma令牌只存储在环境变量中——永远不要将其提交给git
  2. 超文本传输安全协议：在生产环境中始终使用HTTPS（Render会自动提供此功能）
  3. 访问控制：目前，任何具有服务器URL的人都可以访问它。对于生产，请考虑：
    • 添加API密钥身份验证
    • IP白名单
    • 用户认证

速率限制

Figma API有费率限制：

  • 每分钟120个请求
  • 每天24000个请求

服务器实现文件列表缓存（5分钟缓存），以减少API调用。

故障排除

服务器无法启动

  • 检查一下 FIGMA_ACCESS_TOKEN 设置正确
  • 验证Node.js版本（需要Node 20+）
  • 检查服务器日志是否有错误

游标无法连接

  • 验证服务器URL是否正确
  • 检查服务器是否正在运行(/health 端点）
  • 确保游标配置文件语法是有效的JSON
  • 配置更改后完全重新启动Cursor

没有文件显示

  • 验证您的Figma令牌是否可以访问文件
  • 检查服务器日志中的API错误
  • 使用您的代币直接测试Figma API

项目结构

proxy_mcp_fogma/
├── src/
│   ├── index.ts              # Main server with HTTP/SSE transport
│   ├── figma-client.ts       # Figma API wrapper
│   ├── types.ts              # TypeScript types
│   ├── handlers/
│   │   ├── resources.ts      # Resource handlers
│   │   └── tools.ts          # Tool handlers
│   └── transport/
│       └── sse-transport.ts  # SSE transport implementation
├── package.json
├── tsconfig.json
├── render.yaml              # Render deployment config
└── README.md

许可证

麻省理工学院

支持

对于问题或疑问：

  1. 检查故障排除部分
  2. 查看服务器日志
  3. 直接测试Figma API访问
  4. 验证光标MCP配置

相关 MCP