怎么把你搜索到的UI图片素材转换成可编辑的Figma文档？下面这款宝藏Figma插件不要错过！
Codia AI Design 最主要的功能是将 PNG、JPG 等格式的图片快速转换为 Figma 中可编辑的设计稿。借助内置的先进 AI 视觉模型，插件可以精准识别并提取截图中的各种 UI 元素，如文本、图标、色块等，并自动将其转化为 Figma 中对应的图层和组件。它还能智能分析原始图片的 UI 层级结构，在 Figma 中自动生成相应的图层树。
在日常工作中不论是你搜集到的网页应用图片还是移动端APP图片，利用 Codia AI Design 导入图片素材，就快速获得可编辑的 Figma 设计稿。对于一些旧的或第三方的设计资源，如果只有图片格式而无法编辑，通过 Codia AI Design 也能够将其快速转换为可编辑的 Figma 设计稿，方便二次开发和再创作。
使用步骤:
安装并登录：在 Figma 的插件市场中搜索 "Codia AI Design"，点击 "Install" 按钮完成安装。打开插件界面,选择 Google、GitHub 或邮箱等方式进行登录。
![Figma插件丨Codia AI Design图片一键转设计稿3.png]( "Figma插件丨Codia AI Design图片一键转设计稿3.png")
上传图片：在插件的 "Upload Image" 页面，可以通过拖拽或点击 "Select from Layer" 按钮，上传要转换的屏幕截图。支持 PNG、JPG 格式,最大 5MB。
![Figma插件丨Codia AI Design图片一键转设计稿4.png]( "Figma插件丨Codia AI Design图片一键转设计稿4.png")
等待转换：上传完成后，插件会自动进行图像的预处理和 AI 转换。
![Figma插件丨Codia AI Design图片一键转设计稿6.png]( "Figma插件丨Codia AI Design图片一键转设计稿6.png")
获取设计稿：当转换完成时，插件会提示 "Successfully converted the image into Figma"，并在当前 Figma 页面中生成两个新画框：原始截图和可编辑的矢量设计稿。
![Figma插件丨Codia AI Design图片一键转设计稿7.png]( "Figma插件丨Codia AI Design图片一键转设计稿7.png")
![Figma插件丨Codia AI Design图片一键转设计稿8.png]( "Figma插件丨Codia AI Design图片一键转设计稿8.png")
生成前端代码：如果需要将设计稿转换为前端代码，可以在插件的成功页面中点击 "Get Code" 按钮，选择所需的开发框架，即可一键生成相应的代码。
除了设计转换，Codia AI Design 还打通了设计到开发的协作通道。它支持一键将 Figma 设计稿转换为前端代码，涵盖了主流的开发框架，如 HTML、Vue、React 等。设计师可以直接在 Figma 中完成设计，并通过插件自动生成可用的前端代码，提供给开发人员进行实现。这是另外一个插件，我们会在另一个篇幅介绍。
免费用户每个月有5个免费转换机会，付费在49美元一月起。快去试试吧！
