AI 调用Figma
以codex为例:
Figma 插件安装
codex 搜索插件安装,常用功能:
- Pull Figma content:复制Figma Frame链接,它帮你转成代码
- Generate Figma design:直接发指令,它帮你在Figma新建文件,画好界面,同时生成对应的代码。
根据设计稿链接生成代码
修改设计稿后,回到CodeX,输入 Inspect a Figma design and implement it in code:Figma Frame链接,生成一个本地的预览地址,就可以查看是否调整,再进行细节优化和调整。
根据设计稿XML和效果图生成代码
Figma Mcp 调用次数不够时,可以通过设计稿XML和效果图来调整页面,节省Mcp的调用次数:
- 安装 Figma 插件 FigML - Figma XML Exporter Plugin
- 导出XML结构文件和PNG效果图
- 回到CodeX,上传XML结构文件和PNG效果图,简单描述,调整页面代码