像素 vs. 图层
HTML to canvas：HTML 转画布，在 Figma 画布上得到可编辑图层
位图截图库给你的只是像素。HTML to Frames 会把页面以矢量、文本和框架的形式放到你的 Figma 画布上，随时可以修改。
- 可编辑文本和 SVG 矢量，而非栅格图片
- 真正的 canvas 和 WebGL 区域以该区域图片的形式保留
- 冻结动画，得到干净、一致的画面
即将上架 Figma Community
“HTML to canvas”有两种不同的含义，选择工具之前最好先分清楚。开发者通常指的是 html2canvas——一个遍历 DOM、把页面近似绘制到 <canvas> 元素中的 JavaScript 库，或是捕获可见像素的浏览器截图。设计师通常指的是另一回事：把网页放到 Figma 画布上，以便在上面工作。
两者产出的东西看起来都像那个页面，但只有一种能让你真正用来工作。位图再清晰，也只是由彩色像素组成的网格。你无法修正错别字、修改字号、给按钮换色，或把一张卡片拖进新的布局。你只能裁剪、缩放和在上面涂抹。
EUREKA! 出品的 Figma 插件 HTML to Frames 采用的正是第二种含义。它在真实浏览器中渲染页面，读取每个元素计算后的几何信息和样式，然后在你的 Figma 画布上用原生图层重建页面：映射页面结构的框架、保留原有样式的可编辑文本、由 SVG 转换的矢量，以及保持原有填充方式的图片。布局在可以校验通过的地方会转换为自动布局（Auto Layout），因此调整尺寸时结果也会随之响应。
只有一种情况下像素才是正确答案，而插件对此有专门处理。真正的 <canvas> 元素或 WebGL 场景内部没有可供重建的 DOM，所以该区域会以截图图片的形式导入，页面其余部分仍保持可编辑。
想看这一对比的详细版本，请阅读 HTML to canvas 与可编辑图层对比。想了解核心转换，请从 HTML to Figma 开始，或在功能页面浏览可转换的内容。
把页面放到你的 Figma 画布上
- 01
选择页面来源
URL、本地文件或文件夹、粘贴的 HTML 和 CSS、Chrome 标签页，或通过 MCP 连接的 AI 工具。
- 02
交给浏览器渲染
页面在隔离的浏览器中加载，动画会被冻结，WebGL 在渲染几帧后冻结。
- 03
在画布上获得图层
框架、文本、矢量和图片被放置到当前 Figma 页面上，可直接编辑。
为什么在画布上图层胜过位图
文本依然是文本
标题和正文以可编辑文本导入，字间距、行高和混合样式完整保留。
SVG 变为矢量
图标和 Logo 被转换为可编辑的矢量图层，换色、缩放都不会模糊。
可选中的结构
嵌套框架遵循页面结构，你可以直接选中单张卡片，而不必裁剪图片。
只在必要处使用像素
iframe、没有封面图的视频以及 WebGL 或 3D canvas 区域会以该区域截图图片的形式导入。
冻结后的干净捕获
动画会被暂停以获得一致的画面，不会出现半透明淡入中的元素。
参考图层
在 Pro 方案中，一个隐藏、锁定的截图图层可让你将重建结果与原始像素进行对比。
html2canvas 和截图 vs. 可编辑图层
截图方案和 HTML to Frames 都从同一个渲染后的页面出发，但最终结果截然不同。
| html2canvas / 浏览器截图 | Figma 画布上的 HTML to Frames | |
|---|---|---|
| 输出 | 一张栅格图片 | 框架、文本、矢量和图片 |
| 编辑文本 | 无法编辑 | 直接原地编辑 |
| 缩放 | 超过 1x 就模糊 | 矢量始终清晰 |
| 布局 | 固定像素 | 校验通过处为自动布局，其余处为约束 |
| 选中单个元素 | 手动裁剪 | 点击框架即可 |
| 典型用途 | 缺陷报告、缩略图、预览 | 改版、审查、交付、设计系统 |
html2canvas 还用 JavaScript 重新实现了 CSS 渲染，因此可能遗漏浏览器支持的特性。HTML to Frames 在真实的 Chromium 内核浏览器完成渲染后读取数值，再映射到 Figma 属性：包括锥形和重复渐变在内的各种渐变、阴影、混合模式、模糊和背景模糊、clip-path、mask-image 等。
截图依然有其用武之地。如果你只需要一份快速的视觉记录，位图就够了。但只要你打算修改任何东西，图层就能让你免于重画页面。
一个实用的经验法则：如果下一步是写评论或提工单，截图就够了。如果下一步是打开 Figma 修改内容，那就导入图层。
真正的 <canvas> 或 WebGL 元素会怎样处理
页面上有些内容本身就是像素。<canvas> 元素通过 JavaScript 绘制，WebGL 场景则在 GPU 上渲染 3D 图形。这些区域内部没有可读取的 DOM，因此任何工具都无法把它们变成有意义的矢量图层。
HTML to Frames 会明确处理这些内容，而不是悄无声息地失败：
- 该区域会在精确的位置和尺寸上被捕获为一张截图图片。
- WebGL 场景会在渲染几帧后冻结，因此你得到的是稳定的图像，而不是空白或过渡中的画面。
- 区域周围的一切，例如叠加在上面的标题、按钮和浮层，都保持为可编辑图层。
同样的规则也适用于其他无法成为图层的嵌入内容：地图等 iframe、没有封面图的视频，以及 object 或 embed 元素。每一项都会变成其所在区域的图片，结果界面会列出所有警告。
实际上，这意味着一个带有 3D 首屏的落地页仍能转换为可用的设计稿。你可以把首屏图片换成新的视觉、改写上方文案、调整间距，而页面其余部分依然保持自动布局。想了解布局是如何推断的，请看自动布局详解。
从动态页面中获得干净的画面
现代页面是动态的：轮播图在切换，元素随滚动淡入，Cookie 横幅向上滑出，首屏在加载时播放动画。简单粗暴的捕获只会定格那一毫秒正在发生的状态。
HTML to Frames 会按普通访客看到的样子捕获页面，并提供几项控制让结果可预期：
冻结动画
动画会被冻结，捕获结果中每个元素都处于稳定状态，而不是停在过渡的一半。
Hide cookie banners & popups
开启此选项后，同意横幅和弹窗会在捕获前被隐藏，不会遮挡你画布上的页面。
Extra wait
对于内容加载较晚的慢速页面，可以在捕获前多等一会儿。Extra wait（额外等待）是 Pro 选项。
Full page
根据需要，捕获整个滚动页面或仅首屏。
无论页面来自 URL、本地文件还是 Chrome 扩展，这些选项都适用。当你需要某个特定状态（例如展开的菜单）而非默认视图时，扩展就是合适的选择。
如果仍有内容在动画中途被捕获或缺失，结果界面会列出警告，换个选项一键重新导入通常是最快的解决办法。
常见问题
不是。html2canvas 是一个把 DOM 近似绘制成位图的 JavaScript 库。HTML to Frames 是一个 Figma 插件，会在 Figma 画布上把页面重建为可编辑图层：框架、文本、矢量和图片，并在可校验通过的地方使用自动布局（Auto Layout）。
可以。文本会以原生 Figma 文本图层导入，包括同一段落内的混合样式、链接、字间距、行高和 text-transform。如果某个字体不可用，Missing fonts（缺失字体）界面会让你在构建页面前选择替代字体，并记住你的选择。
它们内部没有可供重建的 DOM，因此每个这样的区域都会以截图图片的形式，按精确的位置和尺寸导入。WebGL 会在渲染几帧后冻结，以获得稳定的图像。区域周围的一切都保持为可编辑图层。
可以，Pro 方案支持。Reference screenshot（参考截图）选项会在导入内容下方添加一个隐藏、锁定的图片图层。需要将重建图层与原始渲染对比时就把它打开，其余时间保持隐藏，不会碍事。
动画会被冻结，并且如果你选择了相应选项，Cookie 横幅和弹窗会被隐藏，因此捕获结果显示的是稳定后的页面。截图则会拍下那一刻屏幕上的任何内容。如果你需要特定状态，例如展开的菜单，请使用 Chrome 扩展。
线性、径向和锥形渐变，内外阴影，text-shadow，不透明度，混合模式，模糊和背景模糊，clip-path，mask-image，旋转和缩放。暂不支持斜切和 3D 变换、path() clip-path、多层蒙版以及 Display-P3 颜色。完整列表见功能页面。
相关内容
别再手动重画网页了。
粘贴一个链接，几秒钟就能得到真实、可编辑、响应式的 Figma 图层。免费起步——每月 10 次导入。
无需信用卡。Pro 直接在 Figma 内购买。
即将上架 Figma Community