在日常开发中，设计稿转代码一直是前端团队的刚需。但经过与文心快码开发者用户们的交流，我们发现原来用 Figma2Code (F2C) 智能体进行前端开发，仍存在以下痛点：

🔁流程繁琐：写代码→切到 Figma→复制链接→切回 IDE… 流程割裂，效率低下。

🚫使用受限：像纯文本、图片这样的素材类型，无法在Figma中导出链接转成代码，还得手动处理。

⏳不够灵活：无法在每次开启F2C任务时，自由地增加特定的需求，只能在第一轮生成完毕后补充修改需求。

针对这些痛点，文心快码对 Comate AI IDE 进行了一次前端开发场景的专属升级，支持预览 Figma 设计稿、元素级选中实现、需求补充更方便。本次升级，我们还着重解决目前行业内前端开发的共性挑战（如非编辑权限下不能选中元素生成代码、不支持本地文件预览、不支持预览窗口多开、无法打开历史预览），期望帮助开发者们打造AI IDE内整合设计工具的最佳实践。前端开发交互更丝滑，设计稿转代码真正升级为自动化工作流。

一、升级亮点大放送

1. Comate AI IDE 内预览能力大大提升

• Figma 设计稿预览： 现在可以直接在 IDE 内打开 Figma 设计稿，无需跳出 IDE，真正告别手动切图！
• 多类型 URL 支持： 自动识别并预览 https、http、file 等多种地址，覆盖更多开发场景！
• 多窗口预览： 可同时开启多个设计稿或网页，随时对照比对，效率倍增！
• 历史记录回溯： 支持预览地址历史记录，修改前效果可追踪！

2. 支持组件元素级选中，哪里要改点哪里

不论是画布、组件还是局部元素，不卡设计稿编辑权限，任何可选中的元素都能被识别支持，用户自由度大幅提升！哪里要改点哪里，so easy！老板再也不用担心我的Coding了。

3. 选中组件元素补充定制化需求

点选需要实现为代码的组件或元素，就能将设计稿添加到上下文，补充自己的Prompt，直接与F2C智能体对话，以前做不到的定制化，现在聊着天即可实现！

→“用 Element 组件库实现”

→“生成一个通用组件，放到 xxx/xxx 目录下”

→“参考我代码库中的 xxx 文件”

→“只生成框架，不要具体内容”

二、三步Get新技能

第一步：打开Comate AI IDE，找到 Figma2Code 入口，两种方式

1. 进入Agents对话窗口，点击F2C智能体

1. 点击侧边栏预览功能，点击「打开 Figma」

第二步：首次使用需登录授权Figma账号，然后打开需要实现的设计稿

第三步：框选/点选想要实现的设计元素，点击右下角发送到对话

F2C 智能体立即接收上下文，开启对话，完成任务。如有其他需求，可以随时在对话框进行补充。

三、如何获取最新 Comate AI IDE？

两种更新方式，即刻到 Comate AI IDE 中体验全新 Figma2Code 能力！

1. 已有IDE，升级到最新版：

点击 Comate AI IDE 界面内右上角「重启以更新」

2. 下载更新：

进入 https://comate.baidu.com/zh/download#aiIde 立即下载安装最新 Comate AI IDE，体验全新 Figma2Code 智能体！