Figma-Context-MCP

让 Cursor 直接读 Figma 设计稿，一键生成还原代码

开源 freemium 自动化工作流

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 15965

维护状态活跃

是否开源是

定价模式 freemium

项目预览

项目数据

分类自动化工作流

开发团队GLips

所属国家

官网地址https://www.framelink.ai

GitHubhttps://github.com/GLips/Figma-Context-MCP

定价模式freemium

价格说明开源MCP服务器免费，Framelink云服务提供免费额度及付费订阅

访问状态

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型ai,cursor,figma,mcp,typescript

GitHub 星标★ 15965

30天Star增速

HF 下载量

上线时间2025-02-13 00:00:00

代码更新—

仓库体积—

本站数据更新—

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-10-11

浏览次数0

项目介绍

Figma-Context-MCP 是一个基于 Model Context Protocol（MCP）的服务器，专门为 Cursor 等 AI 编程助手提供 Figma 设计稿的布局信息。它解决了 AI 编码工具无法直接理解设计文件的问题：以往开发者需要手动描述设计细节或截图，AI 才能生成对应代码，效率低且容易出错。该项目通过 MCP 协议把 Figma 的节点、样式、布局、文本等结构化数据暴露给 AI，让 Cursor 等工具在编写前端代码时能直接读取设计上下文，从而更准确地还原 UI。核心能力包括：连接 Figma API 获取文件与节点数据、将设计信息转换为 AI 易读的格式、支持按节点筛选和简化输出，以及作为 MCP 服务器与多种 AI 客户端集成。它降低了设计到代码的沟通成本，适合前端开发、UI 还原和设计系统落地等场景。

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

正在加载星标数据…

技术标签

使用教程

—

难度：入门约 10 分钟部署方式：命令行工具 4 步

⚠ 该项目 README 未提供完整安装说明，以下步骤为通用流程，请以官方文档为准。

环境要求

支持 MCP 的 AI 客户端（如 Cursor）
Node.js / npm 环境（该项目以 npm 包 figma-developer-mcp 分发）
Figma 账号，并创建一个 Figma API 个人访问令牌
一个可访问的 Figma 文件/框架/分组链接

安装与启动步骤

1创建 Figma 令牌

按 Figma 官方文档创建个人访问令牌，后续配置 MCP 服务器时必须用到，请妥善保存。
2配置 MCP 服务器

在编辑器/AI 客户端的 MCP 配置文件中注册 figma-developer-mcp 服务器，并填入上面的 Figma 访问令牌。
3重启并检查连接

保存配置后重启客户端，在 MCP 服务器列表中确认 figma-developer-mcp 已加载并可正常连接。
4在对话中调用设计稿

打开 IDE 的聊天（如 Cursor 的 agent 模式），粘贴 Figma 文件、框架或分组链接，让 AI 按设计实现代码。

关键配置

配置项	必填	说明	示例
`figma-developer-mcp`	是	MCP 配置文件中注册的服务器包名	`figma-developer-mcp`
`Figma access token`	是	访问 Figma API 的个人访问令牌，README 未给出具体字段名	`figd_xxxxxxxxxxxxxxxxxxxx`

如何确认成功

在客户端的 MCP 服务器列表中看到 figma-developer-mcp 已连接，且对话中粘贴 Figma 链接后能返回设计数据。

常见问题

Q：没有 Figma access token 怎么办？

A：按 README 指向的 Figma 官方帮助文档创建个人访问令牌（Manage personal access tokens），再把令牌填进 MCP 配置。

Q：AI 读不到我的设计稿？

A：先确认令牌有效、MCP 服务器已在配置文件中正确注册并重启客户端，完整步骤可参考官方 quickstart 文档。

Q：相比直接粘贴截图有什么优势？

A：服务器把 Figma 的节点、样式、布局、文本等结构化数据交给 AI，README 称其还原设计稿的准确度远高于截图方式。

Q：支持哪些 AI 工具？

A：README 以 Cursor 为例，同时说明许多代码编辑器和 AI 客户端都通过配置文件管理 MCP 服务器。

注意事项

README 节选未给出 npx/npm 安装命令，完整安装步骤以官方 quickstart（framelink.ai/docs/quickstart）为准。
Figma 访问令牌属于敏感凭证，请勿提交到公开仓库。
配置字段名可能因客户端不同而略有差异，请以客户端 MCP 文档和项目官方文档为准。

核心亮点

通过 MCP 协议标准化对接，Cursor 等 AI 工具无需额外插件即可获取设计上下文
直接读取 Figma 节点、样式和布局数据，减少手动描述设计的工作量
开源且社区活跃，星标近 1.6 万，更新迭代快，集成示例清晰

不足之处

依赖 Figma API 访问权限和网络，私有文件需配置 token，存在一定使用门槛
输出内容可能受 Figma 文件复杂度影响，大型设计稿需筛选节点以避免信息过载

适用场景

前端开发者用 Cursor 根据 Figma 设计稿快速生成 React/Vue 组件代码
设计系统团队将 Figma 组件库同步给 AI，保证代码与设计规范一致
独立开发者或小团队在缺乏详细设计文档时，用 AI 直接还原 UI 界面

替代项目

figma-to-code、Anima

上一篇：aidlc-workflows

下一篇：agentspan