Figma to Code · Tecvan

用 figma-developer-mcp 把 Figma 设计稿转成可用代码,走通从获取 token、配置 MCP 到生成页面的全流程,并诚实评估它的效果边界。

对大多数前端而言,实现 Figma 设计稿是日常高频工作之一,但重复的布局还原和基础样式编写往往消耗比较多时间。Figma-MCP 插件通过 AI 实现了设计稿到代码的自动化转换,能直接生成符合工程规范的可维护代码(如 HTML/CSS 或主流框架语法),让开发者借助 Cursor 等工具快速完成页面基础结构搭建。

进入 Figma 个人页获取 token:

🎬 演示视频(原文档内):Area.mp4
启动 figma to code 服务器,将上一步生成的 token 粘贴到命令中:
```
npx figma-developer-mcp@latest --figma-api-key=${your-personal-token}
```
🖼️ 配图待补:NQdpbKr0SoOlM1xTN1ucVMpunkf
在 Cursor 中配置 MCP 服务,注意类型为 http,url 为 http://localhost:3333/sse:

🖼️ 配图待补:SBJEbbPNdomPbCxKHNWcRItxnHf

🖼️ 配图待补:BbWTb1LPvokJV9xnBjZc8sJtnhd

注意检查 MCP 服务状态是否正常。
复制 Figma 节点,这里强烈建议使用 copy link to selection 方式:

🎬 演示视频(原文档内):Clipboard-20250324-202637-305.mp4
输入 prompt,让 Cursor 帮你完成页面:
```
@Blank.tsx 中使用 antd 实现 @https://www.figma.com/design/... 效果
```
🎬 演示视频(原文档内):Clipboard-20250324-204934-745.mp4

效果对比——原稿:

🖼️ 配图待补:RYRKbQSejoMfRYxnmrTcznUzn7c

实现效果:

🖼️ 配图待补:RBPCboHnfoQb1WxqOkQccYZPnPh

可以看出,效果比较差强人意,且不支持动画、自适应布局等复杂特性。但这已经是 figma-developer-mcp 工具能做到的最好效果——这里的问题本质上是可视化表达与大语言模型之间存在比较大的 gap,语言模型很难通过 Figma 导出的 node 结构理解 UI 效果。

即使如此,借助这类插件也能帮我们生成一个基本的页面结构,后续再人工调整各类实现细节即可。