Figma Context MCP

活跃
GitHub TypeScript MIT

简介

为 AI 编程 Agent(如 Cursor)提供 Figma 设计稿布局信息的 MCP 服务器,实现设计到代码的精准转换。

核心特性

  • MCP 服务器,连接 AI 编程 Agent 与 Figma 设计文件
  • 仅提取相关的布局和样式元数据,减少上下文噪声
  • 在 Cursor 等 AI IDE 中实现一键设计转代码
  • 支持通过粘贴链接访问 Figma 文件、框架和分组
  • 跨平台支持 macOS、Linux 和 Windows
  • MIT 开源许可,Discord 活跃社区

适用场景

💡 使用 AI Agent 直接将 Figma 设计实现为代码
💡 前端开发者将设计稿转换为生产级 UI
💡 在 Cursor IDE 中实现设计转代码工作流
💡 减少开发过程中对 Figma 规格的手动检查
💡 团队简化设计师与开发者之间的交接流程

快速开始

1. 在 Figma 设置中创建个人访问令牌。
2. 在 IDE 配置文件(如 Cursor 的 mcpServers)中添加 MCP 服务器配置。
3. 将 Figma 文件/框架链接粘贴到 IDE 聊天中。
4. 要求 AI Agent 实现设计——它将获取元数据并编写代码。

相关项目