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

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拉取代码执行以下命令启动服务器

bash 复制代码

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      # 启动开发服务器

bash 复制代码

# 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即可。

如图服务器启动：

Figma-Context-MCP 怎么接入到copilot中：

点击copilot设置，选择mcp服务，下载Figma，

我们在显示设置中填写上面启动的mcp服务器地址即可：修改图中的url 地址

当我们在chat中，提供相应的figma原型地址，智能体就可以访问并按照你的要求制作页面。（

提示词中@你的figma地址，即可让agent 访问设计稿，记得将ai模式调整为agent 而不是 ask

）

但是这样写出的页面可能和你工程的页面有区别，后续建议搭配更详细的提示词以及团队开发的知识库提高代码的生成。