codecamp

TRAE SOLO Figma 设计还原

AI 可以自动解析 Figma 设计文件的信息,并将其中的设计元素转化为可运行的代码。你既可以选择整个 Frame 来生成完整页面代码,也可以精准选择单个组件(如按钮、表单、卡片)。将选中的 Frame 或元素添加至对话并发送后,AI 会开始生成对应的代码片段。

通过内置的 Figma 工具面板,你无需切换浏览器或跳转至 Figma 平台,就能在当前界面直接查看设计文件,调整图层顺序以及修改基础样式。

  1. SOLO 模式中,打开工具面板,然后选择 Figma 工具。
  2. 在 Figma 工具中,登录你的 Figma 账号。
  3. 打开目标设计稿。
  4. 选择需要转换为代码的 Frame 或元素,然后点击右上角的 添加到对话 按钮。。

    选中的 Frame 或元素将被添加至 AI 对话框。

  5. 编写指令并发送。

    AI 开始根据 Figma 设计稿以及你的指令编写代码。

TRAE SOLO 工具面板
重磅更新:TRAE SOLO 独立端上线
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }