如果你有一张图像、想在 Figma 里编辑，三个选项：把它当平图拖进去手工描（慢）；以图为参考从零重新做（更慢）；或者用 AI 把图像转成可编辑 Figma 图层。
本指南讲第三种。Codia AI 把 UI 图像——截图、移动屏、网页、仪表盘、Mockup、线框图——转成 Figma Frame：可编辑文字、真实形状、照片和图标各自成为独立的图片图层，并带分组嵌套的图层结构；部分识别出的行和堆叠会套用 Auto Layout。清晰、高对比的草图和屏幕翻拍也可以试，但要多做清理。大多数屏幕几分钟内即可编辑。
可以用 Codia Screenshot to Figma 把截图和 UI 图片转换成可编辑的 Figma 图层，再继续重设计、对比或交付。
"图像转 Figma" 是什么
"图像转 Figma"是更宽的关键词族，覆盖：
到重建步骤时，可以打开 Codia Screenshot to Figma，先把参考图转换成可编辑图层，再继续调整设计。
- 截图转 Figma —— 最常见（UI 截图）
- Mockup 转 Figma —— PNG/JPG 设计稿
- 线框图转 Figma —— 黑白 wireframe 图
- 草图转 Figma UI —— 手绘 UI 草图照片
- 插画转 Figma —— 把品牌插画转成分层文件
- 截图转 UI 设计 —— 同意图、不同表述
它们都走同一套 Codia AI 转换管线，这套管线是为 UI 图像打造的：App 界面、网页、仪表盘、Mockup。草图和插画在图像清晰、对比度高时也能用，但要多做清理。差别在对结果的预期。
支持的图像格式
Codia AI 接受三种图像格式：
- PNG（推荐）—— 无损，保留清晰边缘
- JPG / JPEG —— 干净采集没问题，但压缩 JPG 丢失图标与小字细节
- WebP —— 支持
GIF、SVG、PDF 不能作为这项转换的图像输入。PDF 有单独的工作流，见 PDF 转 Figma；需要矢量输出请看 图像转 SVG。
最佳实践：尽量用源直接截出的 PNG。屏幕翻拍、重新编码 JPG、低分辨率缩略图都会降低输出质量。
转换怎么工作
底层管线四步：
- 视觉分析。 Codia AI Vision 识别图像区域：文字块、按钮、卡片、导航、图像、图标、装饰元素。
- OCR。 文字带位置、字号、颜色信息提取。
- 版式重建。 平图被重建为带嵌套图层树的 Figma frame。识别出类似 flex 布局的部分行和堆叠会套用 Auto Layout，其余大多是绝对定位。
- 图层分组。 相关元素被组织成图层层级，照片和图标成为独立的图片图层。重复元素（卡片、列表行、按钮）保持为分组图层——要不要做成组件由你决定。
结果是一份你真能编辑的 Figma 文件——不是 Frame 里塞一张截图。
转换能保留什么
通常干净
- 文字内容与字号 —— OCR 恢复
- 颜色值 —— 从源采样填充
- 版式结构 —— 盒子、行、栅格、列，以分组嵌套图层呈现
- 图像区域 —— 抽取为独立的图片图层
- 简单图标 —— 保留为独立的图片图层
- 按钮、输入框、表单字段 —— 形状与样式干净时重建为分组的形状和文字图层
需要 Review
- 字体 —— 名字尽力，缺失时替换，原名保留
- Auto Layout —— 只出现在部分识别出的行和堆叠上；Frame 大部分是绝对定位
- 复杂图标与插画 —— 以位图图片图层输出；可手工矢量化，或用 图像转 SVG
- 重叠元素 —— 最难分离；可能要裁剪重跑
- 渐变与效果 —— 纯色渐变 OK，复杂多停或径向渐变近似处理
分步骤
- 选图。 干净 PNG 效果最佳。
- 裁掉无关区域。 去掉浏览器顶栏、状态栏、水印等。
- 上传到 Codia AI —— 用 Figma 插件，或在浏览器里的 Codia Studio 上传，再用 Copy to Figma。
- 跑转换。 大多数屏幕几分钟内即可编辑。
- 在 Figma 中打开。 每次转换以 Frame 形式落入。
- Review 与清理。 检查文字、字体、配色、图层分组、Auto Layout。
- 组件化重复元素，让文件适合长期设计工作。转换给你的是分组图层而不是组件；把重复的卡片、列表行、按钮提为组件只需几分钟。
按源类型的使用场景
UI 截图
最常见。分场景技巧（移动、仪表盘、落地页、电商）见 截图转 Figma 指南。
线框图
线框图转得很好——干净矩形、清晰标签、最少样式。结果可直接套设计系统。
手绘草图（拍照）
Codia 是为 UI 图像打造的，不是为草图，但清晰、高对比的草图也可以试。平面拍照、均匀光线；矩形分明、字迹可读的草图机会最大，但要预期比截图多做清理。手绘艺术插画不合适。
移动 App Mockup PNG
同截图工作流。如果 mockup 是 1x，请上传 2x 或 3x，图标识别更干净；但放大后的尺寸不能超出所用套餐的上限（免费档上限为 1440 × 1440 px）。
营销素材 / Banner
Banner 与广告创意能转成可编辑 Figma Frame。强照片叠加与风格化字体可能需要手工清理，但基础版式与文字恢复都好。
插画 / 品牌艺术
插画不是这项转换的目标场景——输出大多是图片图层，而不是矢量。需要可编辑矢量请配合 图像转 SVG。
图像转 Figma vs 截图转 Figma vs 屏幕翻拍
三种意图相近但不相同：
| 源 | 工具 | 预期 |
|---|---|---|
| 截图（PNG） | Codia AI | 最高保真——刚采集、边缘清晰、OCR 条件理想。 |
| 图像（PNG/JPG/WebP） | Codia AI | 同管线，质量随源质量变化。 |
| 屏幕翻拍（相机） | Codia AI | 清晰、高对比的翻拍可以试，但反光、摩尔纹、旋转伤害每一步，需更多清理。 |
能截图就别拍。
转换后该 Review 什么
把输出当作高质量可编辑稿。Review：
- 文字。 可编辑？换行对？OCR 是否混淆字符？
- 字体。 替换合理？
- 配色。 采样值准确吗？转换不会创建颜色样式——之后自己映射到你的样式。
- 图标。 这些图片图层是保留、矢量化还是替换？
- 组件。 输出里没有组件——哪些重复元素该提为组件？
- Auto Layout。 只出现在部分识别出的行和堆叠上——哪些容器需要补上以实现响应式？
API 与批量
批量场景（目录迁移、设计审计、自动化摄入）请用 Visual Struct API。它接收图像，返回结构化 JSON，下游工具可转 Figma 或接入设计管线。批量端点可一次处理多张图片，处理完成时 Webhook 回调。
常见问题
"图像转 Figma"和"截图转 Figma"有什么区别？
多数时候互换使用。"图像转 Figma"更宽——任何图像输入。"截图转 Figma"特指 UI 截图。Codia 都用同一套工作流处理。
转换后真能编辑文字吗？
可以。OCR 抽取文字，输出是真实 Figma 文字图层，编辑方式与其它图层一样。
我的图像有手写文字怎么办？
线框标签、批注里清晰的手写印刷体可以 OCR，但要准备修改部分文字。草书更难。
我的图像分辨率低怎么办？
上传前先放大到 2x 或 3x，但放大后的尺寸不能超出所用套餐的上限（免费档上限为 1440 × 1440 px）。AI 放大工具有效，目标是给转换更清晰的像素边界。
能把插画转成可编辑矢量吗？
矩形、卡片等 UI 形状会变成可编辑形状，但图标和插画仍是图片图层。要矢量，请用 图像转 SVG。
有免费档吗？
有。免费档每月 5 个 AI 积分，图像最大 1440×1440 px、5 MB，无需信用卡。付费档提供更多用量。
有 Figma 插件吗？
有——从 Figma Community 安装 Codia AI Design。