粘贴链接
URL to Figma:粘贴链接,网页转 Figma 可编辑图层
进入 Figma 的最快方式。粘贴任意公开 URL,HTML to Frames 即会在你的画布上渲染、测量并重建页面。
- 在隔离的沙盒浏览器中渲染
- 可按需隐藏 Cookie 横幅和弹窗
- 结果仅交付一次,从不写入磁盘
即将上架 Figma Community

URL to Figma 是从线上页面到可编辑设计稿的最短路径:复制地址,粘贴到 HTML to Frames 插件中,选择屏幕并导入。无需安装扩展,无需导出代码,也无需上传文件。只要页面是公开的,这就是最合适的方式,适用于竞品研究、灵感拆解、改版前的客户网站以及你自己的线上页面。
从粘贴到出结果之间,会发生很多事情。页面由 HTML to Frames 采集服务在隔离的沙盒浏览器中加载,呈现效果与普通访客看到的一致。如果你需要,会先隐藏 Cookie 横幅和弹窗。页面会被滚动,让懒加载内容有机会出现;动画会被冻结,以获得干净的画面;同时测量真实的设计宽度,让 Desktop 框架与网站的实际构建方式相符。
随后,插件读取计算后的布局和样式,在你的画布上构建原生 Figma 图层,并在可以验证的地方应用自动布局(Auto Layout)。文字可编辑,SVG 转为矢量,图片保持原有的适配方式。
隐私是设计的一部分。结果只向你的插件交付一次,随后即从内存中删除。它从不写入磁盘,任务记录会在 15 分钟后被清除。完整架构请见安全页面。
对于需要登录的页面或 localhost 上的页面,请改用 Chrome 扩展。如需导入多个页面,请参阅网站转 Figma。如果是第一次使用,指南《如何将 HTML 转换为 Figma》会逐一介绍每种方式。
三步完成 URL 转 Figma
- 01
复制页面地址
任何公开 URL 都可以:首页、产品页、博客文章或价格表。
- 02
粘贴到 Link 标签页
在 Figma 中打开 HTML to Frames,粘贴 URL,并选择 Desktop 或 Mobile 等屏幕。
- 03
Import(导入)
页面会被渲染、测量,并在你当前的 Figma 页面上重建为可编辑图层。
粘贴背后发生了什么
隔离浏览器
页面在独立容器中的沙盒浏览器里加载,与 API 和图片解码相互隔离。
弹窗一扫而空
开启“隐藏 Cookie 横幅和弹窗”后,会在采集前移除同意提示等遮罩层。
加载懒加载内容
页面会被滚动,确保滚动时才加载的内容出现,并冻结动画。
测量出的宽度
Desktop 框架使用网站真实的设计宽度,而不是固定的猜测值。
为慢页面额外等待
在 Pro 版中,可以给较重的页面更多时间完成加载后再采集。
一键 Re-import(重新导入)
来源 URL 保存在框架上,页面变化后即可一键刷新。
URL 导入的幕后流程
粘贴链接看起来是瞬间完成的,但采集服务会做好几件事,让结果与访客看到的一致。
- 隔离加载。 页面在独立容器中运行、带 seccomp 限制的沙盒 Chromium 浏览器中打开。每个请求都经过 SSRF 防护,因此 URL 无法被用来访问内部地址。
- 清理。 开启“隐藏 Cookie 横幅和弹窗”后,同意横幅和遮罩层会在采集前被移除。
- 懒加载内容。 页面会被滚动,确保滚动时加载的图片和区块在采集时已经出现。
- 静止。 动画被冻结,WebGL 在几帧之后也会冻结,因此不会采集到过渡中途的画面。
- 测量。 测量真实的设计宽度:通栏设计为 1920,盒式网站为其内容框宽度,流式网站为 1440。
- 交付。 采集到的结构只向你的插件交付一次,随后从内存中删除。
图片由一个无法访问互联网的独立解码容器处理。随后插件在 Figma 本地构建图层,并应用经过验证的自动布局。对于其他语言的页面,Page language(页面语言)选项可让你在多语言网站上从 15 种语言中选择一种。各选项的说明见文档。
速度:选择合适的选项
大多数情况下,URL 导入只需默认选项即可。当你想要微调时,以下几个设置影响最大:
屏幕
每多一个屏幕就多一次采集。同一页面的多个屏幕会并行采集,完整的响应式组合仍只算一次导入。Free 版每次导入采集一个屏幕;Pro 和 Team 版最多可采集四个。
整页
采集整个滚动页面可以得到完整的设计。如果只需要页面顶部,可以关闭此项。
图片
保留图片可获得完整效果;如果只关心布局和排版,可以关闭图片。
额外等待(Pro)
有些页面在看似加载完成后仍会继续加载内容。额外等待会给它们更多时间,确保后加载的区块也被包含在内。
详细图层(Pro)
当你想检查更详细的图层树,而不是默认结构时,可使用此选项。
如果页面因套餐限制而被截断,结果中会显示一条醒目的紫色 Capture limit(采集上限)条带,让你始终清楚自己看到的是否是完整页面。各套餐的差异详见价格。
URL 导入的隐私保护
粘贴 URL 意味着我们的采集服务会代表你访问该页面,因此关心数据如何处理是理所当然的。
- 渲染在隔离的沙盒浏览器中进行。
- 结果只向你的插件交付一次,随后从内存中删除,从不写入磁盘。
- 任务记录会在 15 分钟后被清除。
- 日志有限:导入日志保留 180 天,IP 地址在 30 天后移除;安全日志保留 90 天。
- 无追踪:插件、扩展和网站中都没有 Cookie、分析工具或追踪像素,数据也从不出售。
你的身份信息同样保持最少。账户标识符由你的 Figma 用户 ID 派生,我们从不会从 Figma 收到你的姓名或邮箱。插件不会读取你的 Figma 文件内容。它只写入新图层,并只读取其自身框架的元数据,例如来源 URL 和宽度。
URL 导入只适用于采集服务能以匿名访客身份访问的页面。对于需要登录的内容,Chrome 扩展会改在你自己的浏览器中采集。完整信息见安全页面。
常见问题
任何采集服务能以匿名访客身份打开的公开网页。需要登录的页面、localhost 上的本地开发服务器以及私有网络地址无法通过这种方式访问;这些情况请使用免费的 Chrome 扩展,它会从你自己的浏览器中采集。
仅在你需要时才会。开启“隐藏 Cookie 横幅和弹窗”后,同意横幅和遮罩层会在采集前隐藏,不会遮挡画布上的页面。如果你正在设计横幅本身,请保持关闭。
Desktop 框架使用测量出的设计宽度,而不是你的显示器宽度。通栏设计为 1920 且内容居中,盒式网站为其内容框宽度,流式网站为 1440。Tablet 768、Mobile 390 和 Laptop 1280 是固定的,Pro 版还提供 Custom width(自定义宽度)。
在非常慢的页面上,加载较晚的内容可能会被遗漏。在 Pro 版中,额外等待会在采集前给页面更多时间。如果页面因套餐限制被截断,会有一条紫色 Capture limit 条带标出。结果页面也会列出警告。
不会。页面在隔离的浏览器中渲染,结果只向你的插件交付一次,随后从内存中删除。它从不写入磁盘,任务记录会在 15 分钟后被清除。不使用任何 Cookie、分析或追踪。
可以。来源 URL 保存在每个框架上,因此你可以一键重新导入。这对于跨版本追踪某个页面、或在设计评审前刷新参考稿非常有用,无需重新粘贴地址或重新设置导入选项。
别再手动重画网页了。
粘贴一个链接,几秒钟就能得到真实、可编辑、响应式的 Figma 图层。免费起步——每月 10 次导入。
无需信用卡。Pro 直接在 Figma 内购买。
即将上架 Figma Community