codecamp

TRAE SOLO Figma 导入

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

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

打开 Figma 工具。
登录你的 Figma 账号。
打开目标设计稿。
选择需要转换为代码的 Frame 或元素，然后点击右上角的添加到对话按钮。

选中的 Frame 或元素将被添加至 AI 对话框。
编写指令并发送。
AI 开始根据 Figma 设计稿以及你的指令编写代码。

温馨提示

下载编程狮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; }