当前位置：首页 > news >正文

Figma-Context-MCP 帮助前端快速生成页面

news 2025/10/31 11:52:23

Figma是什么：

Figma 是一个基于云端的协作设计工具，主要用于界面设计、原型设计和设计协作。它允许设计师、开发者和其他团队成员在同一个平台上实时协作，创建和编辑用户界面、移动应用、网页设计等内容。

Figma-Context-MCP 是什么

Figma-Context-MCP 是一个基于 Model Context Protocol (MCP) 的服务器，它允许像 Cursor 这样的 AI 编程工具访问 Figma 设计文件中的数据。

Figma 数据集成：
1. 通过 Figma API 获取设计文件的元数据
2. 简化和转换 Figma 响应，只提供最相关的布局和样式信息给 AI 模型
3. 支持获取完整的文件数据或特定节点数据
图像处理：
1. 下载 Figma 设计中的图像资源
2. 支持 PNG 和 SVG 格式
3. 提供图像裁剪和处理功能
AI 编程助手集成：
1. 专门为 Cursor 等 AI 编程工具设计
2. 使 AI 能够准确地根据 Figma 设计实现用户界面
3. 相比粘贴截图等替代方法，能更准确地一次性实现设计

使用Figma-Context-MCP 的主要优势

自动化图片处理
- 直接从Figma设计稿下载图片资源
- 无需手动导出和导入图片到项目中
- 减少重复性操作，提高工作效率

代码生成能力
- 根据设计稿自动生成HTML页面结构
- 支持React、Vue等主流前端框架
- 降低从设计到开发的转换成本

适用场景
- 大量图片的页面开发
- 需要快速实现设计稿的项目
- 提高前端开发的自动化程度

Figma-Context-MCP 服务器搭建：

从github拉取代码执行以下命令启动服务器

git clone https://github.com/GLips/Figma-Context-MCP.gitcd Figma-Context-MCP
pnpm install  # 或 npm install
cp .env.example .env  # 在 .env 中填写 FIGMA_API_KEY
pnpm dev      # 启动开发服务器

# Your Figma API access token
# Get it from your Figma account settings: https://www.figma.com/developers/api#access-tokens
FIGMA_API_KEY=your_figma_api_key_here  #获取的figma apikey 填在这里# Figma file key for testing
# This is the ID in your Figma URL: https://www.figma.com/file/{FILE_KEY}/filename
FIGMA_FILE_KEY=your_figma_file_key_here# Figma node ID for Testing
# This is the node-id parameter in your Figma URL: ?node-id={NODE_ID}
FIGMA_NODE_ID=your_figma_node_id_here# Server configuration
PORT=3845# Output format can either be "yaml" or "json". Is YAML by default since it's
# smaller, but JSON is understood by most LLMs better.
#
# OUTPUT_FORMAT="json"

填写自己的FIGMA_API_KEY，登录figma后点击左上角头像，点击settings，在security里面选择生成accsskey即可。

如图服务器启动：