如果你拥有的不是设计文件而是 HTML 和 CSS 源码——自家生产代码、开源 UI 库、前端原型、静态导出——可以直接把它转成可编辑 Figma。这是 Website 转 Figma 工作流的 dev 主导、源码优先版。
为什么用源码而不是在线 URL？三个原因：最高保真（计算后样式直接来自 CSS，不靠像素估计）、能处理难采集的页面（构建期生成、鉴权后、开发中）、适合代码与设计往返的工程驱动工作流。
何时用
适合：
- 页面在开发环境、尚未部署。
- 你有静态 HTML/CSS 导出但没有设计源。
- 处理开源设计系统或代码形态的组件库。
- 工程拥有页面，需要从生产 CSS 反向生成 Figma 源。
- 把代码组件库文档化回 Figma 做设计对齐。
- 设计系统团队要审计生产 CSS 与设计 Token 的差异。
如果页面有可访问 URL，Website 转 Figma 通常更简单。HTML 转 Figma 适合"源码就是你拥有的全部"的情况。
与 Website / 截图转 Figma 的对比
| 输入 | 工作流 | 最适合 |
|---|---|---|
| 原始 HTML/CSS | HTML 转 Figma | 工程主导、最高保真、未发布页面。 |
| 在线 URL | Website 转 Figma | 可达页面，包括竞品与生产。 |
| PNG/JPG | 截图转 Figma | 只有图片。 |
三种工作流目的地都是可编辑 Figma 文件，区别在喂什么。
工作流
- 准备源。 HTML 在隔离环境里能干净渲染——没有缺失 CSS、缺失字体、依赖某个未启动的构建服务。
- 转换。 Codia AI 解析标记、应用计算后的 CSS、解析图像与字体、把视觉重建为 Figma 图层。
- 打开 Figma 结果。 每次转换任务落为带结构图层、文字样式、图片填充的 Frame。
- Review —— 见下方清理章节。
- 组件化重复组件，让 Figma 文件结构反映源代码结构。
转换能保留什么
通常干净
- 语义 HTML 结构 ——
<section>、<article>、<header>、<footer>与嵌套布局映射为分组的 Figma Frame。 - 文字内容与字体 —— 真实文字图层，
font-family/font-size/font-weight/line-height保留。 - 颜色值 —— 背景与文字颜色直接转换为 Figma 填充。
- Flexbox 与 Grid —— 在类比清晰时翻译为 Figma Auto Layout。
- 边框、圆角、阴影 —— 作为 Figma Effects 应用。
- 图像 —— 以图片填充落入，引用原资源 URL。
需要 Review
- 复杂 CSS 效果 ——
backdrop-filter、复杂mask-image、多步渐变混合。近似为最接近的 Figma 等价。 - 伪元素 ——
::before/::after作为独立 Frame 捕获；伪类状态（:hover）需要分别采集。 - 自定义字体托管 —— 通过自定义 CDN 加载的字体可能需要手动映射到本地 Figma 字体。
- CSS 变量与设计 Token —— 保留为原值；映射到 Figma 设计系统 Token 是手工清理步骤。
- JS 驱动版式 —— 由 JavaScript 决定尺寸或位置的任何东西，转换前要先让 JS 跑完。
- Web 动画 —— Figma 不原生表达 CSS 关键帧或过渡。转换静止态。
角色场景
接手代码库的设计师
你刚入职。这里有生产前端，没有 Figma。HTML 转 Figma 给你一个设计起点，不必手工重建每屏。
设计系统团队
把生产 CSS 与你 Figma 库里的对比。从代码库选代表性组件转过来，与 Figma 等价物并排放置——漂移可见。
文档化组件的工程团队
如果组件库在代码里，设计团队却需要 Figma 文档，HTML 转 Figma 是桥梁。把每个组件的 Storybook 或 demo 转成 Figma Frame。
代理与自由职业者
客户给你静态 HTML 稿（通常来自前一个供应商）。HTML 转 Figma 比手工重建快，给你改版的可编辑基线。
清理重点
转换后聚焦：
- 文字样式 —— 行内样式替换为 Figma 字体 Token。
- 颜色 Token —— 恢复的 hex 值映射到设计系统颜色样式。
- 图标 —— 位图图标替换为库里的 SVG 组件。
- Auto Layout —— 检查响应式段落是否正确转换；需要重建的就重建。
- 组件结构 —— 重复模式（卡片、按钮、列表项）转为 Figma 组件。
- 命名 —— 代码的 class 名很少匹配设计名。按设计可读性重命名。
- 第三方小工具 —— 剥掉分析、聊天、合规叠加层。
常见坑
半坏的源。 HTML 在浏览器都渲染不正确，转换不可能恢复不存在的东西。先确认源能干净渲染。
缺失 CSS 或字体。 同理——外部 CSS 或字体加载失败，转换捕获的是 fallback。请把所有东西打包一起转。
忘了 JS 驱动内容。 重要版式或内容由 JS 在页面加载后渲染时，请确保 JS 跑完、页面完全 hydrated 再采。
期待 CSS 动画也来出。 Figma 是静态的。转换静止态，需要交互变体在 Figma 里设计。
当成代码质量检查。 HTML 转 Figma 不重构代码；它转换现有的。代码质量工作放代码 review，不放 Figma。
与 Figma 转代码配套
工程团队的往返模式：HTML → Figma（本工作流）→ 在 Figma 中清理 → Figma 转代码 → 更干净、对齐设计系统的前端。需要把不一致的生产 CSS 合并回设计系统时用这套。
API 访问
跨整个组件库或设计系统批量转换，请用 Visual Struct API。它接受 HTML 输入，返回结构化 JSON，下游工具可转为 Figma 或接入 Design Ops 管线。
常见问题
真能把原始 HTML/CSS 转成可编辑 Figma 吗？
可以。转换解析 HTML、应用计算后的 CSS，把视觉重建为 Figma 图层——文字是真实文字、颜色是真实填充、版式是真实 Auto Layout（类比成立时）。
与截图采集相比有什么不同？
截图丢失计算后的 CSS 上下文——字体、精确颜色、版式推理都要从像素重新估计。HTML 转 Figma 从源值起步，保真更高、review 更少。
React / Vue 等框架行吗？
转换跑在已渲染的 HTML 上，不是框架源。把组件渲染为 HTML/CSS（Storybook、静态导出、DevTools "Copy outerHTML"）后喂入。
Tailwind CSS class 怎么处理？
Tailwind 运行时编译为标准 CSS，所以转换看到的是普通 CSS 规则。恢复的 Figma 样式匹配视觉，不匹配 class 名。
设计 Token 会保留吗？
CSS 自定义属性（--brand-primary）以原值保留。映射到 Figma 设计系统 Token 是手工清理步骤——不过报告会列出每个独立 Token 值，便于系统性映射。
必须整个网站，还是单组件也行？
都行。整页或单组件代码片段都可以。聚焦的小输入通常产出更干净。
API 能处理整个组件库吗？
可以——见 Visual Struct API 批量端点。