如何将 HTML 转为 Figma：HTML to Figma 2026 完整指南

每个设计团队迟早都会遇到同一个难题：你要处理的东西是浏览器里的 HTML，而你想处理它的地方是 Figma。也许是改版前客户的线上网站，也许是开发者刚发布的预发布版本，也许是 AI 工具几秒钟生成的落地页。手工重建要花好几个小时。粘贴截图只能看，不能改。

本指南介绍如何使用 HTML to Frames 插件把 HTML 转为 Figma（HTML to Figma），生成真实、可编辑的图层——框架、文本、矢量和图片。你将了解导入页面的五种方式、如何选择屏幕、应该开启哪些选项、哪些内容能干净转换、哪些不能，以及如何解决最常见的问题：缺失字体。

为什么要把 HTML 转成 Figma？

浏览器和设计工具解决的是不同的问题。浏览器是最终上线内容的事实来源；Figma 是你探索、标注、比较和交付的地方。转换就是把当前的现实搬到你做决策的地方。

团队这样做的常见原因：

• 改版。 从现有网站出发而不是从空白画布开始，先看清实际有什么再动手修改。我们的 网站转 Figma 改版指南对此有更深入的介绍。
• 审查。 逐个图层检查间距、字号层级和颜色使用，而不是靠 DevTools 猜测。
• 设计与代码偏差。 把已上线版本拉回 Figma，与原始设计稿对比。
• 反向开发交付。 前端开发者在 localhost 上构建，设计师在 Figma 中审阅并完善。
• AI 生成的 UI。 Claude、Cursor 等工具能快速生成 HTML；Figma 是你把它打磨到可上线水准的地方。
• 学习。 学生和初级设计师可以逐个图层研究优秀网站。

这些场景的关键词都是可编辑。位图只能让你看到页面，图层才能让你修改它。

把 HTML 导入 Figma 的 5 种方式

HTML to Frames 支持五类网页来源。根据你的 HTML 所在位置选择合适的一种。

1. Link（单个公开 URL）

在 Link（链接）标签页中粘贴任意公开网页的 URL。页面会在隔离的浏览器中渲染、测量，并重建为 Figma 图层。页面可公开访问时，这是最快的途径。有关此流程的更多信息，请参阅 URL to Figma。

2. Multiple（最多 10 个链接）

Multiple（多链接）标签页一次最多接受 10 个链接。它们会依次处理，每个页面在画布上成为一行，因此首页、价格页和博客文章会并排排列，便于比较。Multiple 导入在所有方案中均可使用，包括 Free。

3. 本地文件、文件夹、.zip 或粘贴代码

如果 HTML 还没上线，请使用 Local file（本地文件）标签页：

• 单个 HTML 文件，
• 整个站点文件夹（拖放进来，然后选择要导入的页面），
• .zip 压缩包，或
• Paste code（粘贴代码）——原始 HTML 和 CSS。

上传文件最大 30 MB。文件在隔离的浏览器中从内存打开（绝不通过 file://），并在导入完成后立即删除。未完成的上传会在 2 分钟后删除。完整细节请见安全页面。

4. Browser（免费的 Chrome 扩展）

有些页面服务器无法访问：需要登录的仪表盘、localhost、私有网络，或处于特定状态的页面——打开的菜单、已填写的表单、加了商品的购物车。对于这些页面，请安装免费的 HTML to Frames Chrome 扩展。

你可以捕获整个页面，也可以选择单个元素（悬停高亮，用方向键移动到父元素或子元素，按 Enter 捕获，按 Esc 取消）。结果会复制到剪贴板或保存为 .h2f 文件，然后粘贴到插件的 Browser（浏览器）标签页。更简单的方式是：用一次性代码将扩展与插件连接一次，然后使用 Send to Figma（发送到 Figma），捕获结果就会直接进入打开的插件。

5. 通过 MCP 使用 AI 工具

如果你用 AI 助手构建 UI，可以在插件的 AI 标签页中连接 Claude Code、Claude Desktop、Cursor 或任何 MCP 客户端。它会提供一个令牌和可直接复制粘贴的配置。之后助手可以调用 import_html（HTML 最大 2 MB）、import_url 或 import_status，页面会进入你打开的插件，并按你自己的方案导入。目前尚不支持 claude.ai 的网页连接器。更多信息请参阅 AI to Figma。

应该用哪种方式？

分步操作：用 HTML to Frames 转换页面

以下是典型公开页面的完整流程。

1. 在 Figma 设计文件中打开插件，选择 Link 标签页。
2. 粘贴要转换页面的 URL。
3. 选择屏幕——Desktop（Site width）、Laptop、Tablet、Mobile，或一键选择 Responsive set（响应式套组）。
4. 检查选项，例如 Auto Layout、Full page、Images 和 Hide cookie banners & popups。
5. 开始导入。 如果页面使用了你未安装的字体，在构建任何内容之前会出现 Missing fonts（缺失字体）页面。
6. 为缺失字体选择替换字体（或接受建议）。
7. 查看结果页面。 它会列出框架数、图层数、自动布局占比、缺失字体和警告。
8. 开始编辑。 你的页面现在是一组嵌套的 Figma 框架，包含真实的文本、矢量和图片。

每个屏幕都成为独立的框架，命名形如 example.com/pricing — Desktop (1920)——不含协议和 www，最长 60 个字符——因此大量导入时在图层面板中也便于浏览。

选择屏幕：Site width 详解

屏幕选择比看起来更重要。以错误宽度渲染的页面，要么被尴尬地拉伸，要么被挤进设计师从未打算的布局里。

Desktop = Site width

HTML to Frames 不会随便选个 1440 碰运气。它会在导入时测量页面的真实设计宽度：

• 满屏设计（背景从一边铺到另一边）以 1920 导入，内容盒子居中。
• 真正的盒式网站以其盒子宽度导入——例如 1200、1280 或 1440。
• 没有固定容器的流式网站以 1440 导入。

测量得出，而非猜测。在多页面导入中，一个网站的所有页面使用同一个宽度，因此各框架能对齐。

其他屏幕

• Laptop——1280
• Tablet——768
• Mobile——390
• Custom width（自定义宽度）——任意所需宽度（Pro）

Responsive set 一键提供 Desktop、Tablet 和 Mobile。同一页面的多个屏幕会并行捕获。

在 Free 方案中，每次导入包含一个屏幕。Pro 和 Team 每次导入最多支持四个屏幕。重要的是，一次导入 = 一个页面及其所有屏幕，因此同一页面的响应式套组只算一次导入。方案详情请参阅价格。

值得了解的选项

默认设置适用于大多数页面，但以下选项值得了解：

• Auto Layout（自动布局）——根据浏览器几何推断堆叠、间距、内边距和对齐，并在保留结果前进行校验。自动布局详解介绍了其工作原理。
• Styles & variables（样式与变量，Pro）——创建颜色变量、文本样式和阴影样式，并复用文件中已有的样式。
• Snap to my file's styles（对齐到我文件的样式，Pro）——没有完全匹配时，把颜色和文本对齐到你自己设计系统中最接近的样式。
• Full page（完整页面）——捕获整个滚动页面，而不只是第一屏。
• Images（图片）——包含或跳过图片填充。
• Hide cookie banners & popups（隐藏 Cookie 横幅和弹窗）——按普通访客看到的样子捕获页面，不含浮层。
• Color scheme（配色方案）——Light、Dark 或 Light + Dark（Pro），后者会构建一个同时包含两种模式的变量集合。
• Detailed layers（详细图层，Pro）、Reference screenshot（参考截图，Pro，一个用于对比的隐藏锁定图层）和 Extra wait（额外等待，Pro，用于加载缓慢的页面）。
• Accordion text as notes（折叠文本转为注释）——默认关闭；把折叠的 <details> 文本转为 Figma 注释。
• Page language（页面语言）——15 种语言，适用于多语言网站。

哪些能转换，哪些不能

目标是得到一个真正能用来工作的设计文件，所以有必要准确了解哪些内容会被转换。

转换为可编辑图层的内容

• 布局：嵌套框架，并在可校验处应用自动布局
• 文本：混合样式、链接、字间距、行高和 text-transform
• 颜色和渐变——线性、径向和圆锥渐变，包括 px 色标和重复渐变
• 图片：支持 object-fit、background-size、平铺和高分辨率 srcset
• SVG：可编辑矢量
• 边框（包括单独一边颜色不同）、圆角和阴影（内阴影、外阴影和 text-shadow）
• 不透明度、混合模式、模糊和背景模糊
• CSS 旋转和缩放、filter: grayscale/opacity
• ::before 和 ::after、clip-path、mask-image
• 表单字段、按 Chrome 方式绘制的列表标记、CSS 计数器、上标和下标
• Shadow DOM 以及正确的 z-index 顺序

以图片形式导入的内容

有些内容无法用图层表示。iframe（例如嵌入的地图）、没有封面的视频、WebGL 或 3D 画布以及 object/embed 元素会被捕获为仅该盒子的截图。页面其余部分仍可编辑。HTML to canvas 对比一文解释了原因。

暂不支持

• 倾斜和 3D 变换
• path() 裁剪路径
• 多层遮罩
• Display-P3 颜色

获得干净结果的技巧

几个习惯会带来明显差别：

1. 对营销网站开启“Hide cookie banners & popups”。否则同意弹窗可能会盖住你的首屏区块。
2. 需要登录的页面使用 Chrome 扩展。 服务器无法以你的身份登录，而你的浏览器已经登录了。
3. 有意识地捕获状态。 先在浏览器中打开菜单或填写表单，再用扩展捕获。
4. 只需要一个组件（例如价格卡片或导航栏）时，选择单个元素。捕获范围越小，整理起来越快。
5. 对内容加载较晚的页面使用 Extra wait（Pro）。
6. 需要证明导入结果与线上页面一致时，添加 Reference screenshot（Pro）——这是一个隐藏、锁定的图层，可以打开进行对比。
7. 导入响应式套组，而不是分三次导入。它只算一次导入，而且框架会排在一起。
8. 首次导入后使用 Import linked pages（导入关联页面），选择同一网站的其他页面——它们会作为 Multiple 导入进入。
9. 线上页面变化时，一键 Re-import（重新导入）。来源 URL 存储在框架上。

解决缺失字体问题

缺失字体是导入页面看起来“不对劲”的最常见原因。网站可能使用了授权字体，或你本地没有安装的网络字体。

HTML to Frames 会在构建图层之前处理这个问题：

1. 捕获完成后，Missing fonts 页面会列出页面使用的、Figma 找不到的每个字体系列。
2. 插件会为每个字体建议一个替换字体。你可以接受，也可以选择其他字体。
3. 你的选择会按网站记住——如果你愿意，也可以对所有网站生效——这样下次从同一域名导入时就不会再询问。

字体映射在所有方案中均可使用。字体只在本地列出；插件不会读取你的 Figma 文件内容。如果你打算长期继续这个设计，安装网站实际使用的字体仍然是最准确的选择。

下一步

把 HTML 转为 Figma 只是第一步。真正的价值在于你如何使用这些图层：

• 计划改版？请阅读 HTML to design 工作流。
• 处理 AI 生成的页面？请参阅 AI to Figma 以及我们的 通过 MCP 将 AI 生成的 UI 导入 Figma 指南。
• 需要 localhost 或登录后的页面？从 Chrome 扩展开始。
• 在比较工具？我们的替代方案页面客观地列出了各个选项。

准备好后，获取插件，在你正在处理的页面上试一试。文档详细介绍了每个选项。