入门
教程 & 最佳实践
AI 编程核心
工具与插件
工作环境
IDE 设置
“速通” 权益
问题排查
相关协议

Figma 设计还原

更新于: 2026-06-11 19:18:11

AI 可以自动解析 Figma 设计文件的信息,并将其中的设计元素转化为可运行的代码。你既可以选择整个 Frame 来生成完整页面代码,也可以精准选择单个组件(如按钮、表单、卡片)。将选中的 Frame 或元素添加至对话并发送后,AI 会开始生成对应的代码片段。
通过内置的 Figma 工具面板,你无需切换浏览器或跳转至 Figma 平台,就能在当前界面直接查看设计文件,调整图层顺序以及修改基础样式。

  1. 在 SOLO 模式中,打开工具面板,然后选择 Figma 工具。
  2. 在 Figma 工具中,登录你的 Figma 账号。
  3. 打开目标设计稿。
  4. 选择需要转换为代码的 Frame 或元素,然后点击右上角的 添加到对话 按钮。
    Image
    选中的 Frame 或元素将被添加至 AI 对话框。
  5. 编写指令并发送。
    AI 开始根据 Figma 设计稿以及你的指令编写代码。