Figma HTML 插件
Figma HTML 插件：导入的每个图层都能直接编辑
在 Figma 里直接运行，粘贴链接或拖入 HTML，就能得到 Frame、文字和矢量，Auto Layout 都已对照真实页面校验过。
- 任何 Figma Design 文件都能用，无需注册账号
- 五种来源：链接、10 个批量链接、文件、Chrome、AI 工具
- Free 版每月 10 次导入
即将上架 Figma Community
Figma HTML 插件只有一个任务：把以 HTML 和 CSS 存在的东西，变成在 Figma 里能直接拿来设计的东西。各家插件的差别，就在于怎么理解“能拿来设计”。有的贴进来一张截图；有的铺出几百个绝对定位的方块，Frame 一拉伸就塌。EUREKA! 出品的 HTML to Frames 给自己定了更严格的标准：每一个 Frame（框架）、文字图层和矢量，都应该像设计师亲手搭出来的一样。
所以插件分两步工作。第一步，把页面像素级还原。第二步，由内向外逐层遍历 Frame，根据浏览器测得的几何数据推断堆叠、换行、间距、内边距和对齐方式，应用自动布局（Auto Layout），并以 2 px 的容差核对每个子元素的位置。只要某个 Frame 会因此移位，插件就换一套更简单的方案，或保留精确位置并配上合理的约束。在我们对真实网站的测试中，约 86–97% 的 Frame 保留了 Auto Layout，而且设计稿从不错位。
插件就在你平时工作的地方运行。在任意 Figma Design 文件中打开 Plugins → HTML to Frames，选好来源，点 Import 即可。不需要另外注册账号：Free 版会自动开通，Pro 版直接在 Figma 内用 Figma 自己的结账流程购买。
如果你正在比较不同方案，可以先看HTML 转 Figma 总览，在功能页查看具体能转换哪些内容，或者读一读HTML 转 Figma 工具的客观对比。
Figma HTML 插件怎么用
- 01
在 Figma 中打开插件
在 Figma Design 文件里进入 Plugins → HTML to Frames，或按 ⌘/ 输入插件名称。
- 02
选择 HTML 的来源
链接（Link）、批量导入（Multiple，最多 10 个链接）、本地文件（Local file）、配合 Chrome 扩展的浏览器（Browser），或连接 MCP 工具的 AI。
- 03
选择屏幕和选项
Desktop 会按实测的网站宽度打开；Pro 版用 Responsive set 一键加上 Tablet 和 Mobile。
- 04
导入并开始编辑
Frame 按页面和屏幕自动命名，Auto Layout、可编辑文字和矢量都已就绪，随时可改。
好的 Figma HTML 插件应该做到什么
原生图层，而不是图片
Frame、支持混排样式的可编辑文字、由 SVG 转成的矢量，以及保留原始填充与平铺方式的图片。
站得住的 Auto Layout
堆叠、行和网格转为 Auto Layout，并在 2 px 内校验；会移位的 Frame 保留精确位置。
多屏幕响应式
Desktop 采用实测的网站宽度，另有 Laptop、Tablet、Mobile，Pro 版还支持自定义宽度。
不止公开网址
HTML 文件、整个网站文件夹、.zip 压缩包和粘贴的代码，都在隔离的浏览器中打开。
直接产出设计系统
Pro 版生成颜色变量、文本和阴影样式、组件及悬停变体，并优先复用文件里已有的。
从设计上保护隐私
插件从不读取你的文件内容。结果只交付一次，从不写入磁盘。
插件、Chrome 扩展还是 MCP：哪条路适合你
HTML to Frames 是一个产品、三个入口，最终都会在插件里得到同样可编辑的结果。
单独使用 Figma 插件
适合一切有公开地址的页面。粘贴一个链接，或用 Multiple 一次粘贴最多 10 个，抓取服务会在隔离的浏览器中按普通访客看到的样子渲染每个页面，也可以按需隐藏 Cookie 横幅和弹窗。30 MB 以内的本地 HTML 文件、网站文件夹和 .zip 也走同一流程，导入一结束即被删除。
插件 + Chrome 扩展
适合抓取服务访问不到的页面：需要登录的后台、localhost、内网里的测试环境，或处于特定状态的页面，比如展开的菜单、填好的表单。免费的 Chrome 扩展会抓取你浏览器中显示的内容，点 Send to Figma 即可直接送进已打开的插件。
插件 + AI 工具
适合 HTML 还不存在的时候。在插件的 AI 标签页连接 Claude Code、Claude Desktop、Cursor 或任何 MCP 客户端，让它设计一个页面；结果会进入你的插件，并按你自己的方案导入。配置方法见 AI 转 Figma。
如何评估一款 Figma HTML 插件
在让整个团队用上某个工具之前，先用每个候选插件导入同样的三个页面：一个营销页、一个信息密集的产品界面、一个深色主题的页面。然后检查这五点。
- 文字能改吗？ 点一个标题直接输入。如果它是图片的一部分，那导入结果只能当参考，算不上设计稿。
- 拉伸后 Auto Layout 还在吗？ 把 Frame 拖宽一些：行应该随之拉伸，居中的内容应该保持居中，元素不应互相重叠。
- 宽度对吗？ 按 1200 px 设计的网站，不该被硬塞进 1440 px。HTML to Frames 会实测真实的设计宽度，称为 Site width。
- 样式能复用吗？ 看看生成的是颜色变量和文本样式，还是几百个零散的十六进制色值；再看它会不会复用你现有的设计系统。
- 数据去了哪里？ 读一读隐私政策。我们的抓取服务每个结果只交付一次，不在磁盘上留存任何内容，上传的文件在导入后立即删除，详情见安全页面。
五项都过关的工具，才能在真实项目里帮你省时间，而不只是在演示里好看。
方案、限额，以及怎样算一次导入
Free 版包含每月 10 次导入、每次 1 个屏幕、最多 10 个链接的批量导入、Auto Layout 和字体映射。Pro 版首发价每月 $7（原价 $9），在每月 1,000 次的合理使用上限内不限导入次数，每次最多 4 个屏幕，并增加自定义宽度、样式与变量、Snap（贴合现有样式）、组件与悬停状态、Light + Dark、详细图层、参考截图和额外等待。Team 版首发价每月 $22，含 5 个席位，共用一个许可证密钥。
一个页面连同它的所有屏幕算一次导入，同一页面的 Desktop、Tablet 和 Mobile 只计一次。用 Chrome 扩展抓取一次也算一次导入。计数每月按 UTC 时间重置。完整说明见价格页。
常见问题
有。HTML to Frames 的 Free 版每月 10 次导入，每次 1 个屏幕，并包含最多 10 个链接的批量导入、Auto Layout 和字体映射。无需注册账号或绑定银行卡，第一次打开插件时就会自动开通。
在 Figma Design 文件中从 Plugins 打开 HTML to Frames，选择 Link 粘贴网址，或选择 Local file 拖入 HTML 文件、文件夹或 .zip。选好屏幕，保持 Auto Layout 开启，然后点 Import。页面会以可编辑 Frame 的形式出现在画布上。
插件是为 Figma Design 文件打造的，因为 Frame、Auto Layout、变量和组件都只在这里可用。请打开一个 Design 文件来运行它。
单靠插件不行，因为抓取服务只能打开公开地址。安装免费的 HTML to Frames Chrome 扩展即可：它抓取你自己浏览器里显示的内容并发送给插件，需要登录的页面、localhost 和内网页面都没问题。
不会。它只写入导入的图层，并只读取自己所建 Frame 的元数据，比如来源网址和宽度，方便你日后重新导入。检查缺失字体时，字体名称只在本地比对。
主要区别在于：经过校验、不会让设计稿错位的 Auto Layout；实测的网站宽度；从重复结构自动生成组件；一次导入即可得到 Light 和 Dark 两种变量模式；所有方案都能批量导入；上传文件即时删除。替代方案页面对各工具做了并排比较。
网页不必再一笔一笔重画
粘贴一个链接，几秒钟后就能拿到真实、可编辑、响应式的 Figma 图层。免费即可上手，每月 10 次导入。
无需绑卡。Pro 版直接在 Figma 内购买。
即将上架 Figma Community