跳到正文

粘贴链接

URL to Figma:粘贴链接,网页转 Figma 可编辑图层

进入 Figma 的最快方式。粘贴任意公开 URL,HTML to Frames 即会在你的画布上渲染、测量并重建页面。

  • 在隔离的沙盒浏览器中渲染
  • 可按需隐藏 Cookie 横幅和弹窗
  • 结果仅交付一次,从不写入磁盘

即将上架 Figma Community

URL to Figma:粘贴链接,网页转 Figma 可编辑图层

URL to Figma 是从线上页面到可编辑设计稿的最短路径:复制地址,粘贴到 HTML to Frames 插件中,选择屏幕并导入。无需安装扩展,无需导出代码,也无需上传文件。只要页面是公开的,这就是最合适的方式,适用于竞品研究、灵感拆解、改版前的客户网站以及你自己的线上页面。

从粘贴到出结果之间,会发生很多事情。页面由 HTML to Frames 采集服务在隔离的沙盒浏览器中加载,呈现效果与普通访客看到的一致。如果你需要,会先隐藏 Cookie 横幅和弹窗。页面会被滚动,让懒加载内容有机会出现;动画会被冻结,以获得干净的画面;同时测量真实的设计宽度,让 Desktop 框架与网站的实际构建方式相符。

随后,插件读取计算后的布局和样式,在你的画布上构建原生 Figma 图层,并在可以验证的地方应用自动布局(Auto Layout)。文字可编辑,SVG 转为矢量,图片保持原有的适配方式。

隐私是设计的一部分。结果只向你的插件交付一次,随后即从内存中删除。它从不写入磁盘,任务记录会在 15 分钟后被清除。完整架构请见安全页面。

对于需要登录的页面或 localhost 上的页面,请改用 Chrome 扩展。如需导入多个页面,请参阅网站转 Figma。如果是第一次使用,指南《如何将 HTML 转换为 Figma》会逐一介绍每种方式。

三步完成 URL 转 Figma

  1. 01

    复制页面地址

    任何公开 URL 都可以:首页、产品页、博客文章或价格表。

  2. 02

    粘贴到 Link 标签页

    在 Figma 中打开 HTML to Frames,粘贴 URL,并选择 Desktop 或 Mobile 等屏幕。

  3. 03

    Import(导入)

    页面会被渲染、测量,并在你当前的 Figma 页面上重建为可编辑图层。

粘贴背后发生了什么

隔离浏览器

页面在独立容器中的沙盒浏览器里加载,与 API 和图片解码相互隔离。

弹窗一扫而空

开启“隐藏 Cookie 横幅和弹窗”后,会在采集前移除同意提示等遮罩层。

加载懒加载内容

页面会被滚动,确保滚动时才加载的内容出现,并冻结动画。

测量出的宽度

Desktop 框架使用网站真实的设计宽度,而不是固定的猜测值。

为慢页面额外等待

在 Pro 版中,可以给较重的页面更多时间完成加载后再采集。

一键 Re-import(重新导入)

来源 URL 保存在框架上,页面变化后即可一键刷新。

URL 导入的幕后流程

粘贴链接看起来是瞬间完成的,但采集服务会做好几件事,让结果与访客看到的一致。

  1. 隔离加载。 页面在独立容器中运行、带 seccomp 限制的沙盒 Chromium 浏览器中打开。每个请求都经过 SSRF 防护,因此 URL 无法被用来访问内部地址。
  2. 清理。 开启“隐藏 Cookie 横幅和弹窗”后,同意横幅和遮罩层会在采集前被移除。
  3. 懒加载内容。 页面会被滚动,确保滚动时加载的图片和区块在采集时已经出现。
  4. 静止。 动画被冻结,WebGL 在几帧之后也会冻结,因此不会采集到过渡中途的画面。
  5. 测量。 测量真实的设计宽度:通栏设计为 1920,盒式网站为其内容框宽度,流式网站为 1440。
  6. 交付。 采集到的结构只向你的插件交付一次,随后从内存中删除。

图片由一个无法访问互联网的独立解码容器处理。随后插件在 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