Figma官方在9月份推出MCP服务，在此之前，还需要使用cursor-talk-to-figma-mcp进行连接，流程比较繁琐，这次Figma的更新无疑提高了连接效率和UI生成准确率。
核心价值：Figma MCP 能解决什么实际问题？
一句话：
通过 MCP 直接读取 Figma 文件的结构化设计数据，结合 Cursor 的代码智能，实现多平台 UI 代码的自动生成，包括 Android XML、iOS SwiftUI、H5、RN 等。
具体解决的痛点：
- 消除设计到代码的信息偏差 - 直接获取精确的设计数据
- 大幅减少重复劳动 - 自动化生成基础 UI 代码
- 提升跨平台一致性 - 同一设计源生成多平台代码
- 加速开发迭代 - 从设计到可用代码仅需几分钟
一、实战指南：Cursor + Figma MCP 连接流程
1. 1、连接流程
- 进入Figma官网MCP服务 点击Cursor中“Add MCP to Cursor”，会跳转到Cursor客户端。
- 点击 Install
- 点击 Connect 再开始身份验证过程。
- 点击 Open.
- Allow access
1.2、开始使用MCP服务
- 打开Figma客户端以及切换到DEV MODE，选择图层 copy link to selection
- 将复制的链接粘贴到Cursor，让Cursor生成相应代码
1.3、效果对比
| 设计稿图 | AI生成效果图（第1版） |
|---|---|
由于目前Cursor+Figma还无法自动下载本地资源图片，第一版的UI图像缺失，但整体看80%的组件和设计稿一致，接下来我将人工下载图片并且植入
| 设计稿图 | AI生成效果图（第2版） |
|---|---|
1.4、小结
已实现
- 连接流程标准化 - 官方集成让设置变得简单可靠
- 设计数据精准获取 - 能够准确读取尺寸、颜色、字体、间距等核心样式属性
- 多平台代码生成 - 支持生成符合各平台规范的 UI 代码
- 组件结构还原 - 能够正确理解并重建设计中的组件层次关系
现有局限性
- 图片资源处理 - 仍需手动下载并替换图片资源
- 复杂交互逻辑 - 主要生成静态 UI，复杂交互需要额外开发
二、问题
从读取 Figma 到生成 Android UI 代码，Cursor 总耗时不到 1 分钟，视觉还原度接近 90%，这无疑大幅提升了开发效率。但在实际企业项目中应用时，仍会发现一些需要优化的关键问题：
-
企业组件库适配问题
公司项目通常基于自研 UI 组件库开发，而 AI 默认生成的是系统原生组件，导致生成的代码无法直接集成 -
布局识别精度不足
设计稿中的列表结构（RecyclerView）常被误判为平铺的静态 View，缺乏对动态内容的智能识别
上述问题的本质在于缺乏对 AI 生成过程的约束与引导。解决方案的核心在于制定精准的Cursor Rules，比如Figma图层名包含“item_”“list_”这类前缀。Rules可以植入这种判断逻辑，强制生成RecyclerView和Adapter模板，而不是傻乎乎罗列View。通过规则体系来规范化代码输出，确保生成结果符合企业级项目的技术要求。
通过系统化的规则配置，我们能够将企业的开发规范、组件库标准固化到AI生成过程中，从而实现从"可用"到"好用"的质变。
引用
招人： 得物组内缺 Android和iOS，急招，内推可联系我
