Figma 插件
HTML to Figma：HTML 转 Figma，得到可编辑图层，而不是截图
HTML to Frames 能把任意网页转换为真正的 Figma 框架、文本、矢量和图片，自动布局（Auto Layout）在保留之前都会经过校验。
- 五种来源：链接、多个链接、本地文件、Chrome 标签页、AI 工具
- 自动布局逐个子元素校验，设计绝不走样
- Free 方案每月 10 次导入
即将上架 Figma Community
把 HTML 转成 Figma 听起来很简单，直到你打开结果：要么是一张无法编辑的平面图片，要么是一堆绝对定位的方块，框架一调整尺寸就散架。HTML to Frames 是 EUREKA! 出品的 Figma 插件，走的是另一条路。它在真实浏览器中渲染页面，测量每一个元素，再在你的画布上用原生 Figma 图层重建页面：框架、支持混合样式的可编辑文本、由 SVG 转换而来的矢量，以及保留原有填充方式和平铺效果的图片。
插件会先以绝对定位按像素精确地搭建页面。然后由内向外遍历各个框架，根据浏览器测得的几何信息推断出纵向/横向堆叠、换行行、间距、内边距和对齐方式。每套自动布局方案应用后，都会以 2 px 的容差校验每个子元素的位置。如果方案不成立，就改用更简单的方案；如果都不合适，该框架会保留绝对定位，并配上合理的约束。你得到的是一个像设计师亲手搭建的文件，而不是描摹出来的稿子。
HTML 放在哪里，就可以从哪里导入：公开 URL、一次最多 10 个链接、本地 HTML 文件、网站文件夹或 .zip、粘贴的代码、你自己 Chrome 里的标签页，或通过 MCP 连接的 AI 工具。功能概览列出了所有可转换的内容，从渐变、阴影到 ::before 伪元素和 shadow DOM。
如果你是第一次使用，分步指南如何把 HTML 转换为 Figma会带你完成第一次导入。如果你主要处理线上网站，请看 URL to Figma；对于需要登录的页面或 localhost 上的页面，Chrome 扩展才是合适的途径。价格从 $0 起，每月 10 次导入，价格页面介绍了 Pro 增加的功能。
四步完成 HTML 转 Figma
- 01
打开插件并选择来源
根据 HTML 所在的位置，选择 Link、Multiple、Local file、Browser 或 AI。
- 02
选择屏幕和选项
选择 Desktop、Laptop、Tablet 或 Mobile，并开关 Auto Layout、Images 或 Hide cookie banners & popups 等选项。
- 03
处理缺失字体
在开始构建之前，Missing fonts（缺失字体）界面会推荐替代字体，并按站点记住你的选择。
- 04
检查结果
结果界面会显示框架、图层、自动布局占比和警告，包括每个保留绝对定位的框架的原因。
转换结果为何可编辑
原生图层，而非像素
框架、文本、矢量和图片都可以像手绘内容一样选中、重命名和修改样式。
经过校验的自动布局
堆叠、间距、内边距和对齐方式根据实测几何信息推断，并在 2 px 以内校验通过后才会保留。
真实的文本样式
混合样式、链接、字间距、行高和 text-transform 都会转为可编辑文本。
渐变、阴影、模糊
线性、径向和锥形渐变，内外阴影，混合模式，模糊和背景模糊都会被保留。
响应式屏幕
可捕获 Desktop、Laptop 1280、Tablet 768 和 Mobile 390，Pro 方案还能一键生成完整的响应式组合。
五种导入方式
可从链接、最多 10 个链接、本地文件、Chrome 标签页或通过 MCP 连接的 AI 工具导入。
可编辑图层 vs. 截图
许多号称能把 HTML 转成 Figma 的工具，其实只是贴了一张页面图片。做情绪板还行，但也仅此而已：你无法修改标题、替换颜色或移动卡片。HTML to Frames 则是重建页面结构。
| 截图导入 | HTML to Frames | |
|---|---|---|
| 文本 | 像素 | 支持混合样式的可编辑文本 |
| 图标和 Logo | 像素 | SVG 转为可编辑矢量 |
| 布局 | 平面图片 | 嵌套框架 + 经过校验的自动布局 |
| 颜色 | 凭肉眼取色 | 精确数值，可选颜色变量（Pro） |
| 调整尺寸 | 图片被拉伸 | 自动布局和约束随之响应 |
坦白说，有一个例外。无法成为图层的内容，例如嵌入的地图 iframe、没有封面图的视频或 WebGL 场景，会以该区域的截图图片形式导入。页面其余部分仍然可编辑，所以即使首屏带有背景视频，标题、按钮和导航依然可以编辑。
如果你还是想要像素参考，Pro 提供 Reference screenshot（参考截图）选项：在导入内容下方放置一个隐藏、锁定的图层，方便你随时将重建结果与原页面对比。想深入了解两者区别，请阅读 HTML to canvas 与可编辑图层对比。
五种来源，同一种结果
无论哪种来源，输出的结果都是同一类型，所以你可以按实际情况任选。
Link 和 Multiple
粘贴一个公开 URL，或最多 10 个链接，依次逐个处理。每个页面在画布上各占一行。所有方案（包括 Free）都支持 Multiple 导入。
Local file
拖入单个 HTML 文件、整个网站文件夹（然后选择要导入的页面）、.zip，或直接粘贴 HTML 和 CSS。单次上传最大 30 MB，导入完成后立即删除。
Browser
免费的 Chrome 扩展可以捕获浏览器中看到的内容：需要登录的仪表盘、localhost、内网，以及页面的当前状态，例如展开的菜单或已填写的表单。详见 Chrome 扩展转 Figma。
AI 工具
在插件的 AI 标签页中连接 Claude Code、Claude Desktop、Cursor 或其他 MCP 客户端，生成的页面就会进入你打开的插件。详见 AI to Figma。
无论选择哪种来源，一次导入都计为一个页面及其所有屏幕，因此同一页面的 Desktop、Tablet 和 Mobile 捕获只算一次导入。每个框架都会保存来源 URL，线上页面更新后，一键即可重新导入。
转换器能处理哪些内容
现代 CSS 正是大多数 HTML 转 Figma 工具丢失还原度的地方。HTML to Frames 读取的是浏览器计算后的结果，因此能处理大量属性：
- flexbox 和 grid 布局，在成立时转换为自动布局（参见 CSS flexbox 和 grid 转自动布局）
- 边框（包括某一侧颜色不同的情况）和圆角
- 带有
object-fit、background-size、平铺和高分辨率srcset的图片 clip-path、mask-image、::before和::after、CSS 计数器，以及按 Chrome 方式绘制的列表标记- CSS 旋转和缩放、不透明度、
filter: grayscale/opacity - 表单字段、上标和下标、shadow DOM 以及 z-index 层级顺序
部分内容暂不支持：斜切和 3D 变换、path() clip-path、多层蒙版以及 Display-P3 颜色。我们公开列出这些限制，让你在导入前就心中有数。完整列表请见功能页面，设置问题可在文档中找到解答。
当某些内容无法精确还原时，结果界面会告诉你。它会列出缺失字体、警告、获得自动布局的框架占比，以及每个保留绝对定位的框架的原因。你永远不必猜测哪些部分需要复查。
常见问题
不是。HTML to Frames 会把页面重建为原生 Figma 图层：框架、可编辑文本、由 SVG 转换的矢量以及图片。只有无法成为图层的区域，例如地图 iframe、没有封面图的视频或 WebGL 画布，才会以该区域截图的形式导入，周围的一切依然可编辑。
五种：公开链接、一次 Multiple 导入最多 10 个链接、本地文件（单个 HTML 文件、网站文件夹、.zip 或粘贴的代码）、通过免费扩展捕获的 Chrome 标签页，以及通过 MCP 连接的 AI 工具，例如 Claude Code、Claude Desktop 或 Cursor。
会。在按像素精确搭建页面之后，插件会推断堆叠、间距、内边距和对齐方式，应用后以 2 px 容差校验每个子元素。如果方案失败，就尝试更简单的方案；否则该框架保留绝对定位并配上约束，设计不会走样。
有。Free 方案每月包含 10 次导入，每次导入一个屏幕，并且支持一次最多 10 个链接的 Multiple 导入。Pro 每次导入最多四个屏幕，并增加样式与变量、组件、Light + Dark 等功能，首发价每月 $7。
页面在隔离的沙箱浏览器中渲染。结果只交付一次，随后从内存中删除；从不写入磁盘，任务记录在 15 分钟后清除。上传的文件在导入完成后立即删除。
在构建之前，插件会显示 Missing fonts（缺失字体）界面并推荐替代字体。你的选择会按站点记住，也可以设为对所有站点生效，因此重复导入同一站点时不会再次询问。所有方案（包括 Free）都支持字体映射。
别再手动重画网页了。
粘贴一个链接，几秒钟就能得到真实、可编辑、响应式的 Figma 图层。免费起步——每月 10 次导入。
无需信用卡。Pro 直接在 Figma 内购买。
即将上架 Figma Community