> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trae.cn/llms.txt
> Use this file to discover all available pages before exploring further.

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

1. 在 SOLO 模式中，打开工具面板，然后选择 Figma 工具。
2. 在 Figma 工具中，登录你的 Figma 账号。
3. 打开目标设计稿。
4. 选择需要转换为代码的 Frame 或元素，然后点击右上角的 **添加到对话** 按钮。
   ![Image=700x568](https://p16-arcosite-sg.ibyteimg.com/tos-alisg-i-k9wyc2ijk0-sg/7c2070f7db4542ee9a8f8eeb7fd01cb0~tplv-k9wyc2ijk0-image.image)
   选中的 Frame 或元素将被添加至 AI 对话框。
5. 编写指令并发送。
   AI 开始根据 Figma 设计稿以及你的指令编写代码。