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个人访问令牌
- 登录您的Figma帐户
- 点击您的个人资料图片→ 设置
- 首选 账户 tab → 个人访问令牌
- 点击 生成新令牌
- 为其命名（例如，“MCP代理服务器”）
- 复制令牌（您将不会再看到它！）
2.部署服务器
选项A：部署到Docker渲染（推荐）
- 将此存储库分叉或推送到GitHub
- 注册于 render.com
- 创建新的 Web服务
- 连接您的GitHub存储库
- 配置：
- 运行时: Docker - Dockerfile路径: Dockerfile （自动检测） - 环境变量: - FIGMA_ACCESS_TOKEN =（步骤1中的令牌） - NODE_ENV = production - PORT = 10000 （渲染会自动设置此设置）
- 部署！
📖 详细步骤：参见 部署.md 以完成演练。
您的服务器URL将是： https://your-service-name.onrender.com
选项B：部署到铁路
- 推送到GitHub
- 注册于 railway应用程序
- 从GitHub仓库创建新项目
- 添加环境变量：
FIGMA_ACCESS_TOKEN - 部署！
选项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-客户端到服务器通信的消息端点
安全注意事项
- 令牌安全：你的Figma令牌只存储在环境变量中——永远不要将其提交给git
- 超文本传输安全协议：在生产环境中始终使用HTTPS（Render会自动提供此功能）
- 访问控制：目前，任何具有服务器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许可证
麻省理工学院
支持
对于问题或疑问：
- 检查故障排除部分
- 查看服务器日志
- 直接测试Figma API访问
- 验证光标MCP配置