免费 Chrome 扩展
Chrome 扩展转 Figma：登录后的页面和 localhost 也能导入
你的浏览器里显示什么，就抓取什么——后台面板、本地构建、展开的菜单，统统变成可编辑的 Figma 图层。
- 支持需登录的页面、localhost 和内网
- 抓取整个页面，或只抓一个元素
- 无需账户，无统计分析，不加载远程代码
即将上架 Chrome Web Store
网址导入够不到的地方，就交给 Chrome 扩展转 Figma。HTML to Frames 的抓取服务以匿名访客身份访问页面，因此看不到你的管理后台、登录后的应用、笔记本上 localhost 跑着的构建，也进不了内网里的测试服务器。免费的 HTML to Frames Chrome 扩展则直接在你自己的浏览器中抓取，沿用你已经登录的会话。
它还能抓到页面的当前状态。下拉菜单正展开、表单填了一半、弹窗正显示、购物车里有三件商品——进入 Figma 的就是这个样子。对于梳理流程的产品经理、审查真实状态的设计师来说，这往往是不重画就能把这些界面放进设计文件的唯一可行办法。
你可以抓取整个页面，也可以切换到元素选择器，只抓一个组件：悬停高亮，用方向键在父元素和子元素之间移动，按 Enter 抓取，按 Esc 取消。抓取结果会放进剪贴板（或保存为 .h2f 文件），再粘贴到插件的 Browser 标签页即可。也可以用一次性验证码把扩展和插件配对一次，之后点击 Send to Figma，抓取结果就会直接送进已打开的插件。
生成的图层和其他导入方式完全一样：可编辑的文字、矢量、图片，以及经过验证的自动布局（Auto Layout）。每次抓取计为一次导入。
前端开发者可以阅读完整教程 用 Chrome 扩展把 localhost 导入 Figma。公开页面则不需要扩展，用 网址导入 Figma 即可。扩展究竟会发送什么，安全页面 有详细说明。
如何用扩展抓取一个标签页
- 01
安装 Chrome 扩展
把免费的 HTML to Frames 扩展添加到 Chrome，无需注册账户。
- 02
把页面调到你要的状态
登录、启动本地服务器、展开菜单或填好表单，完全按你想抓取的样子准备好。
- 03
抓取整页或单个元素
抓取整个页面，或用选择器高亮并选中某一个元素。
- 04
粘贴或发送到 Figma
粘贴到插件的 Browser 标签页；或用一次性验证码配对一次后，点击 Send to Figma。
扩展能抓到哪些页面
需登录的页面
数据面板、管理后台和账户页面，直接沿用你现有的登录会话抓取。
localhost 与内网
本地开发服务器、测试环境和内网页面，外部服务访问不到的都能抓。
精确的界面状态
展开的菜单、填好的表单、弹窗和购物车，屏幕上是什么样就抓成什么样。
元素选择器
悬停高亮，方向键上下在父子元素间切换，按 Enter 抓取。
一键发送到 Figma
用一次性验证码配对一次，之后的抓取结果直接进入已打开的插件。
隐私优先的设计
无需账户，无统计分析，不加载远程代码；除非你使用 Send to Figma，否则不发送任何内容。
前端开发者如何把 localhost 导入 Figma
开发者经常需要向设计师展示实际做出来的效果，或者把写好的原型带进 Figma 评审。常见做法要么是截图，谁都没法编辑；要么是手动重画一遍。扩展提供了第三种选择：直接抓取 localhost。
因为运行在你自己的浏览器里，扩展看到的就是你的开发服务器实际渲染出来的内容，包括：
- 还没部署到任何地方的功能分支
- 依赖本地数据或模拟 API 的页面
- 位于 VPN 或内网中的测试环境
- 组件调试台和独立的 Story 页面
用元素选择器可以只抓一个组件，而不是整个页面。先高亮它；如果需要连同内边距一起抓，按向上方向键退到它的容器，再按 Enter。得到的是一个根据渲染后的 CSS 推断出 Auto Layout 的 Frame（框架）——一行 flexbox 会变成水平方向的 Auto Layout Frame，间距和内边距都保留下来。
这样，交付就变成了双向的：设计师拿到的是真实实现的可编辑 Frame，可以直接评论或调整已上线的内容。布局之间如何对应，可参考 CSS Flexbox 和 Grid 转 Figma 自动布局指南。
粘贴还是 Send to Figma：两种方式怎么选
把 Chrome 里的抓取结果送进 Figma 有两种方式，生成的图层完全相同。
粘贴
抓取完成后，结果会放进剪贴板。切换到 Figma，打开 HTML to Frames，进入 Browser 标签页粘贴即可。你也可以把抓取结果保存为 .h2f 文件，稍后再导入插件。这种方式下，任何数据都不会离开你的电脑。
Send to Figma
用一次性验证码把扩展和插件连接一次。之后每次抓取都会直接进入已打开的插件，省去剪贴板这一步，连续抓取多个状态时更快。
使用 Send to Figma 时，抓取结果会暂存在我们服务器的内存中，直到你的插件取走为止，最长 30 分钟，不会写入磁盘。
| 粘贴 | Send to Figma | |
|---|---|---|
| 设置 | 无需设置 | 一次性配对验证码 |
| 数据是否离开你的电脑 | 否 | 在内存中暂存最长 30 分钟 |
| 适合场景 | 偶尔抓取 | 快速抓取多个状态 |
无论哪种方式，每次抓取都计为方案中的一次导入，得到的图层也完全一致。
扩展会如何处理你的数据，又绝不会做什么
一个能读取登录后页面的扩展，理应接受严格审视。HTML to Frames Chrome 扩展的设计原则就是尽可能少做事：
- 在你的浏览器中运行。 抓取在本地进行，对象就是你正在查看的页面。
- 无需账户。 使用时不用注册，也不用登录。
- 没有统计分析。 扩展中没有任何使用情况追踪。
- 不加载远程代码。 扩展不会从服务器下载并执行代码。
- 默认不发送任何内容。 只有当你选择 Send to Figma 时，数据才会到达我们这里，而且只在内存中等待你的插件，最长 30 分钟。
抓取内容仅限于你选择抓取的页面。如果页面上显示了个人信息或客户数据，抓取前请先考虑这些数据是否应该出现在共享的 Figma 文件里，并用元素选择器只抓取你需要的部分。
在 Figma 这一侧，插件不会读取你的文件内容，只写入新图层，并只读取自己所建 Frame 的元数据。完整的架构见 安全页面，安装与配对步骤见 使用文档。扩展目前正在准备上架 Chrome Web Store。
常见问题
网址导入由我们的抓取服务以匿名访客身份加载页面，所以访问不了需要登录的页面、localhost 或内网，而且看到的永远是默认状态。扩展则在你自己的浏览器中抓取，带着你的登录会话，页面处于什么状态就抓成什么状态。
可以。切换到元素选择器，悬停高亮某个元素，按向上方向键移到它的父元素，按向下方向键移到子元素，再按 Enter 抓取，按 Esc 取消。这个元素会作为一个独立的 Frame 导入，图层都可以编辑。
先用一次性验证码把扩展和插件配对一次。之后，每次抓取都会直接送进已打开的插件。抓取结果在内存中最多等待 30 分钟，直到插件取走为止，从不写入磁盘。
不会。它没有账户、没有统计分析，也不加载远程代码。除非你对某次抓取使用 Send to Figma，否则它不会向我们发送任何内容。如果你选择粘贴，抓取结果只经过你的剪贴板或 .h2f 文件，始终不会离开你的电脑。
算。扩展的每次抓取都计为你方案中的一次导入。Free 版每月包含 10 次导入，Pro 和 Team 在合理使用范围内不限次数。用量计数每月按 UTC 时间重置，同一次抓取只计一次。
是的。HTML to Frames Chrome 扩展本身免费，也不需要账户。抓取结果通过 Figma 插件导入，计入你的方案用量，而方案可以从 Free 版起步。扩展目前正在准备上架 Chrome Web Store。
相关内容
网页不必再一笔一笔重画
粘贴一个链接，几秒钟后就能拿到真实、可编辑、响应式的 Figma 图层。免费即可上手，每月 10 次导入。
无需绑卡。Pro 版直接在 Figma 内购买。
即将上架 Figma Community