Localhost to Figma：用 Chrome 扩展把任意页面导入 Figma

当页面公开时，URL 导入就能搞定。但你真正需要放进 Figma 的很多页面并不公开：运行在 localhost:3000 上的功能分支、需要登录的管理后台、办公网络中的预发布服务器，或者购物车里已有商品的结账页面。

针对这些场景，HTML to Frames 提供了一个免费的 Chrome 扩展。它从你自己的浏览器中按你所见原样捕获页面，并交给 Figma 插件，转换为带有自动布局（Auto Layout）的可编辑框架、文本、矢量和图片。本指南介绍如何实现 localhost to Figma、如何捕获登录后的页面和特定状态，以及出现问题时该怎么办。

何时用 Chrome 扩展而不是 URL

插件的 Link 来源会在 HTML to Frames 捕获服务上的隔离浏览器中渲染页面。这个浏览器看到的，就是匿名访客在公共互联网上看到的内容。它无法访问你的电脑、你的私有网络或你的登录会话。

当页面属于以下情况时，请使用扩展：

• 在本地运行，例如 localhost、127.0.0.1 或你网络中的开发服务器。
• 需要登录，例如 SaaS 仪表盘、管理面板、账户设置或客户门户。
• 位于私有网络，例如 VPN 后的预发布环境或内网工具。
• 处于特定状态，例如展开的下拉菜单、已填写的表单、弹窗、有商品的购物车，或提交后的错误信息。

对于公开页面，URL to Figma 导入仍是最简单的方式，并且一键即可生成响应式套组。

扩展是什么（以及不是什么）

扩展在你的浏览器中运行。它无需账户，不含任何分析，也不加载远程代码。除非你选择 Send to Figma（发送到 Figma），否则它不会向 HTML to Frames 发送任何内容。即使使用该功能，捕获内容也仅保存在内存中，直到你的插件取走为止，最长 30 分钟。

一次捕获在你的套餐中计为一次导入。扩展本身免费。详见 Chrome 扩展页面。

分步操作：localhost to Figma

1. 安装 HTML to Frames Chrome 扩展，并将其固定到工具栏。
2. 启动开发服务器，在 Chrome 中打开页面，例如 http://localhost:3000/settings。
3. 将窗口宽度设置为你想要的屏幕宽度（下文详述）。
4. 把页面调整到你需要的状态：已登录、数据已加载、菜单已展开。
5. 点击扩展图标，选择捕获整个页面或选择一个元素。
6. 将捕获内容交付到 Figma：通过剪贴板或 .h2f 文件，或使用 Send to Figma。
7. 在 Figma 中，插件会构建图层，并显示结果页面，其中包括框架、图层、自动布局占比以及各类警告。

整页还是单个元素

扩展提供两种捕获模式。

捕获整个页面

这是需要完整评审或重新设计页面时的默认选择：仪表盘、设置页面、开发中的落地页。你会得到一个代表该页面的框架，其中的嵌套框架与 DOM 结构对应。

选择单个元素

很多时候你只需要一个组件：价格卡片、导航栏、数据表格、弹窗。选择元素选取模式后：

• 在页面上悬停，光标下的元素会被高亮。
• 按 ↑ 移到父元素，按 ↓ 移到子元素。
• 按 Enter 捕获高亮的元素。
• 按 Esc 取消。

元素捕获是从线上产品建立组件参考的最快方式，也可以只把某个小部件发给设计师评审，而不带上页面其余部分。

两种交付方式：剪贴板/.h2f 或 Send to Figma

剪贴板和 .h2f

捕获内容会被复制到剪贴板，或保存为 .h2f 文件。在 Figma 中打开插件，进入 Browser 标签页并粘贴。当由别人捕获页面（比如有客户仪表盘访问权限的产品经理），再由设计师稍后导入时，.h2f 文件非常方便。

Send to Figma

如果你经常捕获，可以用一次性代码把扩展与插件连接一次。之后，捕获内容会直接进入已打开的插件，无需粘贴。工作期间请保持插件在 Figma 中打开。

一次捕获 = 当前窗口宽度下的一个屏幕

扩展捕获的是浏览器渲染的内容，因此一次捕获就是当前窗口宽度下的一个屏幕。如果窗口宽 1440 px，你会得到一个 1440 的桌面端框架。

要捕获其他断点，请调整窗口大小后再次捕获：

• 平板： 将宽度调整到约 768 px 后捕获。
• 移动端： 将宽度调整到约 390 px 后捕获。

Chrome DevTools 的设备工具栏可以方便地设置精确宽度。每次捕获计为一次导入。如果页面是公开的，插件的 Link 来源可以在一次导入中生成完整的响应式套组（Desktop + Tablet + Mobile）。

捕获 URL 无法复现的状态

扩展捕获的是页面的当前状态，让那些原本很难重建的页面变得触手可及：

• 展开的菜单和下拉框。 打开菜单，然后捕获整页或选择该菜单元素。
• 已填写的表单和校验错误。 填写字段并提交以触发错误，然后捕获。
• 购物车和结账。 添加商品，捕获带有真实商品条目的购物车。
• 空状态、加载中和有数据状态。 分别捕获同一仪表盘有数据和无数据的样子，建立状态清单。
• 弹窗和提示条。 触发它们，并在其显示时捕获。

对产品团队而言，这是在重新设计或可用性评审之前，把流程的每个状态记录到 Figma 的最快方式。

能转换哪些内容

扩展与其他所有来源共用同一个转换引擎，因此你能获得功能页面中列出的全部能力：布局、混合样式文本、渐变、图片、作为可编辑矢量的 SVG、边框、阴影、模糊、::before/::after、表单字段、shadow DOM 以及 z-index 层级顺序。

自动布局根据浏览器实测的几何信息推断，并经过校验：每个子元素的位置都会以 2 px 的容差进行检查；如果不成立，就尝试更简单的方案，否则该框架保留绝对定位并配上合理的约束。在我们的测试中，根据网站不同，大约 86% 到 97% 的框架推断出了自动布局。如果前端是你自己写的，这篇映射指南会告诉你如何编写能干净导入的 CSS。

无法转为图层的嵌入内容，例如带地图的 iframe、没有封面图的视频或 WebGL 画布，会以该区域的截图图片形式导入。

捕获前快速检查清单

每次捕获前过一遍这份清单，避免返工：

• 宽度： 窗口是否处于你想要的断点，浏览器缩放是否为 100%？
• 数据： 页面是否已完全加载，包括图表、图片和懒加载区块？
• 状态： 菜单、弹窗或表单错误是否正如你希望在 Figma 中呈现的那样可见？
• 内容： 在可能出现真实客户数据的地方，是否已切换到测试账户或示例数据？
• 范围： 你需要整页，还是单个元素更便于评审？
• 交付： 如果使用 Send to Figma，插件是否已在 Figma 中打开？

在这里花两分钟，能省去好几轮重复捕获同一页面的工作。

登录后页面和内部页面的隐私

捕获仪表盘，就意味着捕获上面的所有内容。几条实用规则：

• 捕获在你的浏览器中进行。 除非你粘贴到 Figma 或使用 Send to Figma，否则任何内容都不会离开浏览器。
• Send to Figma 是临时的。 捕获内容在内存中等待插件取走，最长 30 分钟，且不会写入磁盘。
• 先遮蔽敏感数据。 尽量使用测试账户或示例数据，因为屏幕上的内容最终会成为你 Figma 文件中的文本图层。
• 不会读取你的 Figma 文件。 插件只写入图层，并读取它自己创建的框架的元数据。

完整政策请见安全页面。

故障排查

捕获内容缺少后加载的部分

请等待页面完全加载（包括懒加载区块和图表）后再捕获。如果内容随滚动加载，请先把页面滚动一遍。

布局与我看到的不一样

检查窗口宽度；捕获结果严格反映当前宽度。同时确保浏览器没有缩放。

Send to Figma 没有反应

确认插件已在 Figma 中打开。如果配对已经过了很久或换了电脑，请用新的一次性代码重新配对。捕获内容最多等待 30 分钟，在此期间打开插件仍可收到。

在 Browser 标签页粘贴无效

你的剪贴板可能被其他复制操作覆盖了。请重新捕获，或保存为 .h2f 文件后加载该文件。

字体显示不对

本地或需授权的网页字体可能没有安装在你的电脑上。插件的 Missing fonts（缺失字体）界面会在构建前推荐替代字体，并按站点记住你的选择。

部分框架没有自动布局

结果页面会列出框架保留绝对定位的原因，通常是内容重叠或负 margin。该框架仍与页面一致，只是保留了带约束的绝对定位。

开发者工作流中的 localhost to Figma

对前端开发者来说，扩展让设计交付变成双向的：

1. 在本地构建功能。
2. 以桌面端和移动端宽度捕获新页面。
3. 将它们发送到 Figma，放在原始设计旁边。
4. 设计师评审真实实现，添加评论并调整。
5. 你修改后重新捕获并对比。

如果你使用 AI 工具开发，还有一条直接路径：Claude Code、Claude Desktop 或 Cursor 可以通过 MCP 把 HTML 发送到插件。参见通过 MCP 实现 AI to Figma。

开始使用

安装 Chrome 扩展，打开你的本地构建，先捕获一个元素，比如一张卡片或一个按钮，看看导入效果。然后以桌面端和移动端宽度捕获整页。文档详细介绍了配对和 Browser 标签页，价格说明了捕获如何计入导入次数。