Sunnyside Figma MCP

如果你能够与你的Figma设计进行对话，并将其转化为生产代码，那会怎样？这就是我们所构建的内容。

功能概述

此工具连接你的Figma设计与AI代理，使其可以通过描述你想要的内容来提取实际代码、资源和设计系统。可以将其视为设计与开发之间的一座桥梁，而且它确实有效。

我们并不是要取代设计师或开发者。我们的目标是使他们之间的交接无缝化。

愿景

我们的梦想很简单：选择任何Figma设计，描述你想要的内容，然后获得一个完整的、可投入生产的项目。不再需要手动调整像素，也不再有“这与设计不符”的对话。

我们已经接近实现这一愿景。

快速开始

你需要Node.js 18+ 和一个Figma API密钥。仅此而已。

git clone https://github.com/tercumantanumut/sunnysideFigma-Context-MCP
cd sunnysideFigma-Context-MCP
npm install

创建一个.env文件：

FIGMA_API_KEY=your_figma_api_key_here

启动所有服务：

npm run start

这将同时启动插件服务器和MCP集成。

安装Figma插件

1. 打开Figma桌面应用
2. 插件 → 开发 → 从清单导入插件
3. 选择figma-dev-plugin/manifest.json
4. 准备就绪

工作原理

1. 在Figma中设计 - 就像你一直做的那样
2. 选择并描述 - 告诉AI代理你想要什么：“把这个按钮变成React组件”
3. 获取代码 - 可投入生产的React、CSS、Tailwind或Vue组件
4. 发布它 - 代码实际上可以工作

你也可以直接向AI代理发送Figma链接（使用Figma中的“复制选区链接”功能）。

实际操作示例

“根据这个设计构建登录表单” → 获取带有表单验证、styled-components和TypeScript类型的完整React组件

“从这个页面提取所有设计令牌” → 查找47个颜色令牌，12个间距值，发现3个冲突，建议命名修复

“把这个卡片变成可复用组件” → 生成带有属性、变体和适当响应式断点的Vue组件

“下载所有图标作为优化过的SVG” → 批量下载15个图标，移除不必要的代码，节省60%的文件大小

“检查我的按钮样式是否一致” → 扫描设计系统，发现4个不一致的按钮样式，显示确切的像素差异

“根据这个设计系统创建完整的组件库” → 构建20多个带有文档、正确命名和设计令牌集成的组件

独特之处

• 真实的代码提取 - 不是猜测，而是从Figma中提取的实际CSS值
• 了解设计系统 - 理解你的令牌，发现冲突，提出修复建议
• 资源处理 - 下载SVG、PNG，优化一切
• 多种格式支持 - React、Vue、CSS、Tailwind、styled-components
• 以AI为中心 - 专为自然语言交互而设计

当前状态

这是一个正在积极开发的软件。可能会出现一些问题。我们会频繁推送更新，因为我们对这个项目的未来充满期待。

运行良好的功能：

• React/CSS/Tailwind代码生成
• 设计令牌提取和冲突检测
• 资源下载和优化
• 与所有Figma编辑器类型的插件集成

正在修复的问题：

• 插件中的SVG/IMG预览（点击它们会使Figma冻结 - 但代理仍然可以正常下载资源）

连接方式

1. Figma插件 - 在设计时实时提取
2. 开发模式桥接 - 与Figma官方开发特性兼容
3. 直接API - 对所有内容进行编程访问

选择适合你工作流程的方式。

文档

你需要的一切都在文档文件夹中。如果你想要完整的安装指南，请从安装开始，或者查看示例以了解可能的功能。

贡献

我们在公开构建这个项目。如果你看到可以改进的地方，请告诉我们或提交PR。

许可证及归属

该项目基于Framelink MCP项目的概念，但有显著不同。这是由Sunnyside Software开发的专有软件，具有特定的许可条款 - 详情见LICENSE。

对于商业用途，请联系Umut TAN，邮箱地址为tercumantanumut@gmail.com。

---

一次对话，将Figma设计转化为真实代码。