本项目基于开源项目 Figma-Context-MCP 改进，优化了数据结构和转换逻辑。
English Version | 中文版
这是一个基于模型上下文协议(MCP)的服务器，允许您将Figma设计文件与Cursor、Windsurf、Cline等AI编码工具无缝集成。
当AI工具能够访问Figma设计数据时，它们能够更准确地一次性生成符合设计的代码，比截图等传统方式效果更好。
功能特点
- 将Figma设计数据转换为AI模型易于理解的格式
- 支持获取Figma文件、画板或组件的布局和样式信息
- 支持下载Figma中的图片和图标资源
- 减少提供给模型的上下文量，提高AI响应的准确性和相关性
与原版的主要区别
设计稿返回数据格式
{
// 设计文件基本信息
"name": "设计文件名称",
"lastModified": "最后修改时间",
"thumbnailUrl": "缩略图URL",
// 节点数组，包含所有页面元素
"nodes": [
{
// 节点基本信息
"id": "节点ID，例如 1:156",
"name": "节点名称",
"type": "节点类型，如 FRAME, TEXT, RECTANGLE, GROUP 等",
// 文本内容（仅文本节点有此属性）
"text": "文本节点的内容",
// CSS样式对象，包含节点的所有样式属性
"cssStyles": {
// 尺寸和位置
"width": "100px",
"height": "50px",
"position": "absolute",
"left": "10px",
"top": "20px",
// 文本样式（主要用于TEXT节点）
"fontFamily": "Inter",
"fontSize": "16px",
"fontWeight": 500,
"textAlign": "center",
"lineHeight": "24px",
"color": "#333333",
// 背景和边框
"backgroundColor": "#ffffff",
"borderRadius": "8px",
"border": "1px solid #eeeeee",
// 特效
"boxShadow": "0px 4px 8px rgba(0, 0, 0, 0.1)",
// 其他CSS属性...
},
// 填充信息（渐变、图片等）
"fills": [
{
"type": "SOLID",
"color": "#ff0000",
"opacity": 0.5
}
],
// 导出信息（用于图片和SVG节点）
"exportInfo": {
"type": "IMAGE",
"format": "PNG",
"nodeId": "节点ID",
"fileName": "suggested-file-name.png"
},
// 子节点
"children": [
// 递归的节点对象...
]
}
]
}
数据结构说明
SimplifiedDesign
设计文件的顶层结构，包含基本信息和所有可见节点。
SimplifiedNode
代表设计中的一个元素，可以是画板、框架、文本或形状等。主要字段包括：
- id: 节点唯一标识符
- name: 节点在Figma中的名称
- type: 节点类型（FRAME, TEXT, RECTANGLE等）
- text: 文本内容（仅文本节点有）
- cssStyles: CSS样式对象，包含所有样式属性
- fills: 填充信息数组
- exportInfo: 导出信息（图片和SVG节点）
- children: 子节点数组
CSSStyle
包含转换为Web标准的CSS样式属性，如字体、颜色、边框、阴影等。
ExportInfo
图片和SVG节点的导出信息，包含：
- type: 导出类型（IMAGE或IMAGE_GROUP）
- format: 推荐的导出格式（PNG, JPG, SVG）
- nodeId: 用于API调用的节点ID
- fileName: 建议的文件名
安装与使用
安装及使用
Installing via Smithery
To install Figma MCP 服务器 for Claude Desktop automatically via Smithery:
npx -y @smithery/cli install @1yhy/Figma-Context-MCP --client claude
本地开发和打包
- 克隆本仓库
- 安装依赖：
pnpm install
- 复制
.env.example为.env并填入您的Figma API访问令牌
- 本地开发：
pnpm run dev
- 构建项目：
pnpm run build
- 本地打包：
pnpm run publish:local
打包后会在项目根目录生成一个.tgz文件，如figma-mcp-server-1.0.0.tgz
本地安装使用
有两种方式可以使用该服务：
方式1：从NPM安装（推荐）
# 全局安装
npm install -g @yhy2001/figma-mcp-server
# 启动服务
figma-mcp --figma-api-key=<your-figma-api-key>
方式2：从本地包安装
# 全局安装本地包
npm install -g ./figma-mcp-server-1.0.0.tgz
# 启动服务
figma-mcp --figma-api-key=<your-figma-api-key>
方式3：在项目中使用
# 在项目中安装
npm install @yhy2001/figma-mcp-server --save
# 在package.json的scripts中添加
# "start-figma-mcp": "figma-mcp --figma-api-key=<your-figma-api-key>"
# 或者直接运行
npx figma-mcp --figma-api-key=<your-figma-api-key>
命令行参数
--version: 显示版本号--figma-api-key: 您的Figma API访问令牌（必需）--port: 服务器运行的端口（默认：3333）--stdio: 以命令模式运行服务器，而不是默认的HTTP/SSE模式--help: 显示帮助菜单
与AI工具连接
在配置文件中使用
许多工具如Cursor、Windsurf和Claude Desktop使用配置文件来启动MCP服务器。
您可以在配置文件中添加以下内容：
# MCP Client使用
{
"mcpServers": {
"Figma MCP": {
"command": "npx",
"args": ["figma-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
}
}
}
# 本地使用
{
"mcpServers": {
"Figma MCP": {
"url": "http://localhost:3333/sse",
"env": {
"API_KEY": "<your-figma-api-key>"
}
}
}
}
与Cursor连接
- 启动服务器：
figma-mcp --figma-api-key=<your-figma-api-key>
- 在Cursor的设置→功能选项卡中连接MCP服务器：
http://localhost:3333
- 确认连接成功后，在Agent模式下使用Composer
- 粘贴Figma文件链接并要求Cursor实现设计
可用工具
服务器提供以下MCP工具：
get_figma_data
获取Figma文件或特定节点的信息。
参数：
- fileKey：Figma文件的密钥
- nodeId：节点ID（强烈推荐使用）
- depth：遍历节点树的深度
download_figma_images
下载Figma文件中的图片和图标资源。
参数：
- fileKey：包含节点的Figma文件密钥
- nodes：要获取的图像节点数组
- localPath：项目中存储图像的目录路径