# OpenCode Figma MCP

一款将Figma连接到AI智能体的MCP服务器，支持设计到代码的工作流程、资源提取和实时UI自动化。

Canonical URL: https://a2a-mcp.org/entry/opencode-figma-mcp-zh

Language: zh

Category: MCP Servers

Updated: 2026-04-20

## 概述

OpenCode Figma MCP 是一款模型上下文协议（MCP）服务器，旨在弥合设计与自动化之间的鸿沟。它允许AI智能体直接与Figma文件交互——读取布局、提取组件，并将视觉设计转换为可用于代码生成或工作流自动化的结构化数据。

开发者和AI智能体无需手动检查设计或导出资源，即可通过编程方式查询Figma，使设计系统可作为机器可读的上下文进行访问。

## 功能特性

- 🎨 **Figma集成**：通过API直接连接到Figma文件和项目
- 🤖 **兼容MCP**：可与MCP客户端和智能体框架协同工作
- 🧩 **组件提取**：检索框架、图层、样式和组件
- 🖼️ **资源访问**：以编程方式导出图像、图标和设计资源
- 🔍 **结构化查询**：查询布局层次结构、间距、排版和颜色
- ⚡ **设计到代码就绪**：将结构化设计数据输入代码生成管道

## 工作原理

1. 使用个人访问令牌连接到Figma API
2. 在本地或您的基础设施中运行MCP服务器
3. 智能体通过MCP发送查询（例如，“获取此框架中的所有按钮”）
4. 服务器以结构化设计数据响应
5. 下游工具将此数据用于代码生成、测试或UI自动化

## 使用场景

- 🧑‍💻 **设计到代码管道**：将Figma布局转换为React、Vue或HTML组件
- 🧪 **UI测试自动化**：提取自动化测试的选择器和布局信息
- 📚 **设计系统分析**：跨文件审计间距、排版和一致性
- 🤖 **自主智能体**：让AI智能体理解并操作UI设计
- ⚙️ **工作流自动化**：将设计更新同步到开发管道中

## 为什么重要

Figma等设计工具传统上存在于开发者工作流之外。OpenCode Figma MCP通过使AI系统能够查询并操作设计数据，改变了这一现状。

这解锁了新的自动化层级——智能体不仅能读取代码，还能理解其背后的视觉结构。

## 快速开始

- 从GitHub克隆代码库
- 设置您的Figma API令牌
- 配置您的MCP客户端以连接到服务器
- 通过您的AI智能体开始查询设计数据

## 局限性

- 需要Figma API访问权限和适当的权限
- 性能取决于文件大小和API速率限制
- 将设计映射到可用于生产的代码仍需要额外的逻辑

## 结论

OpenCode Figma MCP是连接设计与AI驱动开发的有力桥梁。通过将Figma作为结构化上下文暴露出来，它支持新一代能够推理UI（不仅仅是生成UI）的工具和智能体。

## Tags

- mcp
- figma
- 设计到代码
- ai智能体

## Sources

- [Project website](https://github.com/opencode-ai/figma-mcp)