功能概述

CodeBuddy IDE 提供强大的设计到代码转换功能，通过内置集成的 Figma2Code 功能，您可以直接从 Figma 设计稿生成高质量的生产代码。本功能支持精确的设计还原，大幅提升开发效率。

使用前提

⚠️ 重要提示：使用此功能需要满足以下条件：

Figma 账户权限：您需要拥有 Figma 设计文件的编辑或开发权限

文件访问权限：确保您有权访问要导入的 Figma 设计文件

团队协作权限：如果是团队项目，需要获得相应的协作权限

如果您没有相关权限，请联系设计文件的所有者或团队管理员获取访问授权。

操作步骤

1. 启动 Figma 集成

在 Craft Agent 界面中，点击 Figma 按钮开始导入流程。

2. 授权登录 Figma

系统将跳转至 Figma 官网，请使用您的 Figma 账户进行登录授权。

3. 确认授权成功

登录完成后，您将看到授权成功的确认页面。

4. 选择设计文件

从您的 Figma 工作区中选择需要的设计文件，点击打开进入编辑界面。

5. 选择设计组件

在 Figma 的 Layers 面板中：

选择您需要转换的组件或设计区域

点击右上角的 Add to Conversation 按钮

所选设计将被导入到 CodeBuddy IDE 中

6. 开始代码生成

设计稿成功导入后，将在 IDE 对话框中显示。现在您可以：

在输入框中描述具体的开发需求

AI 将基于设计稿自动生成对应的代码

7. 预览生成结果

代码生成完成后，您可以在 Preview 面板中查看效果。如图所示，生成的代码与原设计稿保持了极高的还原度。

使用技巧

精确选择：在 Figma 中选择组件时，建议选择完整的设计模块以获得更好的转换效果

描述需求：在代码生成时，详细描述功能需求和技术栈偏好，AI 将生成更符合预期的代码

迭代优化：可以基于生成的代码继续与 AI 对话，进行功能完善和样式调整

通过 Figma 集成功能，设计师和开发者可以无缝协作，快速将设计理念转化为可运行的代码。