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