从 Figma 导入设计稿 ​

功能概述 ​

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

使用前提 ​

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

  • Figma 账户权限：您需要拥有 Figma 设计文件的编辑或开发权限
  • 文件访问权限：确保您有权访问要导入的 Figma 设计文件
  • 团队协作权限：如果是团队项目，需要获得相应的协作权限

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

操作步骤 ​

1. 启动 Figma 集成 ​

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

启动 Figma 集成

2. 授权登录 Figma ​

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

Figma 登录授权

3. 确认授权成功 ​

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

授权成功确认

4. 选择设计文件 ​

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

选择设计文件

5. 选择设计组件 ​

在 Figma 的 Layers 面板中：

  • 选择您需要转换的组件或设计区域
  • 点击右上角的 Add to Conversation 按钮
  • 所选设计将被导入到 CodeBuddy IDE 中

选择设计组件

6. 开始代码生成 ​

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

  • 在输入框中描述具体的开发需求
  • AI 将基于设计稿自动生成对应的代码

开始代码生成

7. 预览生成结果 ​

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

预览生成结果

使用技巧 ​

  • 精确选择：在 Figma 中选择组件时，建议选择完整的设计模块以获得更好的转换效果
  • 描述需求：在代码生成时，详细描述功能需求和技术栈偏好，AI 将生成更符合预期的代码
  • 迭代优化：可以基于生成的代码继续与 AI 对话，进行功能完善和样式调整

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