Figma MCP服务器
模型上下文协议（MCP）服务器，连接到Figma的API，允许AI工具和LLM访问和使用您的Figma设计。
特性
- 设计数据提取：从Figma设计中提取组件、样式和文本
- 设计系统分析：分析设计系统的一致性和模式
- UI内容管理：从设计中提取并组织所有UI副本
- 开发交接：为开发人员生成全面的文档
- 无缝AI集成：将您的设计连接到人工智能工具，如Claude、Cursor和其他兼容MCP的客户端
入门指南
先决条件
- Node.js 16或更高版本
- Figma个人访问令牌（从您的Figma帐户设置中获取）
安装
- 克隆存储库：
git clone https://github.com/yourusername/figma-mcp-server.git
cd figma-mcp-server- 安装依赖项：
npm install- 创建一个
.env项目根目录中的文件：
FIGMA_API_TOKEN=your_figma_personal_access_token
API_KEY=your_secure_api_key
TRANSPORT_TYPE=stdio- 构建服务器：
npm run build- 启动服务器：
npm start连接到客户
Claude桌面版
- 打开或创建Claude for Desktop配置文件：
- macOS： ~/Library/Application Support/Claude/claude_desktop_config.json - 窗户： %APPDATA%\Claude\claude_desktop_config.json
- 添加以下配置：
{
"mcpServers": {
"figma": {
"command": "node",
"args": ["/absolute/path/to/figma-mcp-server/build/index.js"],
"env": {
"FIGMA_API_TOKEN": "your_figma_personal_access_token",
"TRANSPORT_TYPE": "stdio"
}
}
}
}- 重新启动桌面版的Claude
光标
全局配置
创建或编辑Cursor的MCP配置文件：
- macOS：
~/Library/Application Support/Cursor/mcp.json - 窗户：
%APPDATA%\Cursor\mcp.json
{
"mcpServers": {
"figma-mcp": {
"url": "http://localhost:3000/sse",
"env": {
"API_KEY": "your_secure_api_key"
}
}
}
}项目特定配置
- 创建一个
.cursor项目根目录中的目录：
mkdir -p .cursor- 创建一个
mcp.json该目录中的文件：
{
"mcpServers": {
"figma-mcp": {
"url": "http://localhost:3000/sse",
"env": {
"API_KEY": "your_secure_api_key"
}
}
}
}可用工具
| 工具 | 说明 |
|---|---|
get-file-info | 获取Figma文件的基本信息 |
get-nodes | 从Figma文件中获取特定节点 |
get-components | 从Figma文件中获取组件信息 |
get-styles | 从Figma文件获取样式信息 |
get-comments | 从Figma文件中获取评论 |
search-file | 按类型、名称等搜索Figma文件中的元素。 |
extract-text | 从Figma文件中提取所有文本元素 |
可用提示
analyze-design-system-分析设计系统组件和样式的一致性extract-ui-copy-从设计中提取并组织所有UI副本generate-dev-handoff-根据设计生成开发交接文档
使用示例
与克劳德一起使用：
Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.使用光标：
Generate React components for the buttons from my Figma file with key abc123, using tailwind CSS.环境变量
| 变量 | 描述 | 默认值 |
|---|---|---|
FIGMA_API_TOKEN | 您的Figma个人访问令牌 | （必填） |
API_KEY | API身份验证的安全密钥 | （必需） |
TRANSPORT_TYPE | 运输方式(stdio 或 sse) | stdio |
PORT | SSE运输港口 | 3000 |
建筑
此MCP服务器：
- 使用您的个人访问令牌连接到Figma API
- 按照模型上下文协议公开标准化接口
- 提供LLM可用于与Figma设计交互的工具、资源和提示
- 支持stdio传输（本地连接）和SSE传输（远程连接）
贡献
欢迎投稿！请随时提交拉取请求。