基本能力
产品定位
Figma-Context-MCP 是一个用于将Figma设计数据与AI编码工具集成的中间件服务，旨在提升AI生成代码的准确性和效率。
核心功能
- 将Figma设计数据转换为AI模型易于理解的格式
- 支持获取Figma文件、画板或组件的布局和样式信息
- 支持下载Figma中的图片和图标资源
- 减少提供给模型的上下文量，提高AI响应的准确性和相关性
适用场景
- AI辅助开发：帮助AI编码工具（如Cursor、Windsurf等）更准确地生成符合Figma设计的代码
- 设计系统集成：将Figma设计系统与开发流程无缝对接
- 资源导出：自动化下载Figma设计中的图片和图标资源
工具列表
get_figma_data：获取Figma文件或特定节点的信息- 参数：
fileKey（Figma文件密钥）、nodeId（节点ID）、depth（遍历节点树的深度） download_figma_images：下载Figma文件中的图片和图标资源- 参数：
fileKey（Figma文件密钥）、nodes（图像节点数组）、localPath（存储图像的目录路径）
常见问题解答
- 如何获取Figma API访问令牌？
- 访问Figma帮助中心获取个人访问令牌：https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
- 如何与Cursor等AI工具连接？
- 在工具的配置文件中添加MCP服务器配置，或直接在设置中连接服务器URL
使用教程
使用依赖
- 需要安装Node.js环境
- 需要Figma API访问令牌
安装教程
通过Smithery安装
bash
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
全局安装
bash
npm install -g @yhy2001/figma-mcp-server
figma-mcp --figma-api-key=<your-figma-api-key>
项目中使用
bash
npm install @yhy2001/figma-mcp-server --save
npx figma-mcp --figma-api-key=<your-figma-api-key>
调试方式
- 启动服务后，访问
http://localhost:3333确认服务运行 - 使用
--stdio参数以命令模式运行服务器 - 查看日志确认与Figma API的连接状态
与AI工具连接
在配置文件中添加以下内容：
json
{
"mcpServers": {
"Figma MCP": {
"command": "npx",
"args": ["figma-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
}
}
}
或
json
{
"mcpServers": {
"Figma MCP": {
"url": "http://localhost:3333/sse",
"env": {
"API_KEY": "<your-figma-api-key>"
}
}
}
}
