介绍

F2C（figma to code）MCP Server [https://github.com/f2c-ai/f2c-mcp] 是一个基于 F2C [https://f2c.yy.com/index.html] 实现的 MCP Server。它能够获取 Figma 设计稿节点信息，将其转换为高还原度的HTML、React甚至其它更多代码。支持Cursor、Trae、Dify等。

相较于现在比较流行的 Trae 内置 Figma MCP [https://github.com/GLips/Figma-Context-MCP]，优势在于会将设计稿信息先喂给 F2C 进行代码实现，在通过返回已经具有高还原度的代码给 clients。相较于直接将 Figma 设计稿节点信息丢给 clients，具有更高的稳定性和还原度。

使用展示

获取Figma的Personal access tokens

我们打开Figma App，点击左上角个人菜单

随后选择 Security，点击 Generate new token生成一个新的 Personal access tokens

配置 MCP

这里我拿cursor举例，根据 文档 选择自己想要的方式配置好MCP Serve

点击运行我们可以看到 agent 会调用 tool

测试的设计稿大致长这样

先来看看比较热门的 Figma MCP 实现的样子（都是同样的prompt）

先来看看比较热门的 Figma MCP 实现的样子（都是同样的prompt）

再看看基于F2C的MCP Server的效果

同时代码相关的图片也会下载到本地

总结

还有一些实战的视频，由于限制没办法公开，后续将会更新到 Github上。当然目前也收集到一些问题，比如：

• 模型会给自己加戏，我们返回的代码已经是高度还原的了，结合Figma信息模型会 自行优化，有时候效果会适得其反，目前我们已经在tool内进行优化和限制。
• 输出的代码有时候需要二次润色优化
• 命名还不够拟人化

后续会看看怎么结合模型能力优化，欢迎各位大佬试用，如果在使用中有什么问题或者建议，可以在github上题issues，作者看到了会参考采纳的。