Website to Figma：网站导入 Figma，设计机构改版提案指南

每次改版都从同一件枯燥的事开始：把客户当前的网站放进你的设计工具。截图很快，但拿来就是死的。手工重建页面很准确，却要耗掉好几天——这些时间你更想花在真正的改版上。

本指南介绍如何用 HTML to Frames 把网站导入 Figma（website to Figma），生成真实、可编辑的图层，并把导入结果变成客户一眼就能看懂的改版提案。本文面向设计机构和自由设计师，但这套流程同样适用于审查自家产品网站的内部团队。

为什么要把现有网站导入 Figma？

改版提案是一种论证。你在告诉客户：“这是你们现在的样子，这是应该有的样子，原因是这些。”当“现在的样子”准确且可编辑时，这个论证就有力得多。

• 你审查的是真实的东西。 间距、字号层级、颜色使用和组件偏差都能在图层面板里看到，而不是从截图里猜。
• 你在现有结构之上改版。 改一个首屏、换一种卡片样式、重做导航，而页面其余部分保持原样，提供上下文。
• 你可以把改版前后并排展示。 同样的框架尺寸、同样的内容、不同的设计。客户马上就能明白。
• 你省下了重建时间。 原本用来重画现有网站的时间，可以用来探索更多方案。

HTML to Frames 会把页面转换为真实的 Figma 框架、文本、矢量和图片，而不是一张扁平图片。想了解这一区别的背景，请阅读 HTML to canvas 与可编辑图层对比。

Website to Figma 和 URL to Figma 有什么区别？

两种说法都有人搜索，实际上指的是同一个流程。URL to Figma 通常描述操作方式：粘贴一个链接，得到一个设计。Website to Figma 描述的是范围：一个网站的多个页面，往往还涵盖多种屏幕尺寸。HTML to Frames 两者都支持，从单个 URL to Figma 导入，到带关联页面的完整 website to Figma 捕获。

第 1 步：规划要捕获哪些页面

打开 Figma 之前，先列出承载改版故事的页面。对大多数营销网站来说，包括：

1. 首页
2. 一个关键落地页或产品页
3. 价格页
4. 关于我们或团队页
5. 博客列表页和一篇文章
6. 联系页或一个关键表单页

你很少需要整个站点地图。你需要的是每个模板一个页面，因为你要改版的正是模板。六到十个页面通常就够了，正好可以放进一次 Multiple 导入。

第 2 步：一次导入多个页面

打开插件，使用 Multiple（多链接）来源。粘贴最多 10 个链接；它们会依次处理，每个页面在画布上成为一行。Multiple 导入在所有方案中均可使用，包括 Free。

对机构工作来说，有几个细节很重要：

• 一个网站 = 一个宽度。 Desktop 使用 Site width（站点宽度）：插件在导入时测量页面的真实设计宽度。满屏设计以 1920 导入且内容盒子居中，盒式网站以其盒子宽度导入（例如 1200、1280 或 1440），流式网站以 1440 导入。在多页面导入中，同一网站的每个页面共享这个宽度，所以各行能对齐。
• 框架名称易读。 框架命名形如 domain/path — Desktop (1920)，不含协议和 www，方便你在图层面板中区分页面。
• 可按需隐藏 Cookie 横幅和弹窗，动画会被冻结以得到干净的画面。网站按普通访客看到的样子捕获。

导入关联页面，无需逐个找 URL

如果你还没有页面清单，先导入首页。导入完成后，使用 Import linked pages（导入关联页面）：从列表中选择同一网站的其他页面，它们会作为一次 Multiple 导入进行导入。这是抓取主导航目标页面最快的方法，无需从浏览器复制 URL。

第 3 步：捕获响应式套组

客户越来越常在问别的之前先问：“在我手机上是什么样？”用真实的框架来回答。

开启 Responsive set（响应式套组），一键捕获 Desktop + Tablet + Mobile。Tablet 为 768，Mobile 为 390，另外还有 1280 的 Laptop。在 Pro 和 Team 方案中，你可以每次导入最多捕获 4 个屏幕，如果客户的数据分析显示有特殊断点，还可以设置 Custom width（自定义宽度）。同一页面的多个屏幕会并行捕获。

计费保持简单：1 次导入 = 1 个页面及其所有屏幕。首页的 Desktop、Tablet 和 Mobile 只算一次导入。

第 4 步：如果网站支持，加上 Light + Dark

如果客户的网站响应 prefers-color-scheme，Light + Dark（浅色 + 深色，Pro）选项会以两种模式捕获页面。你会得到一个包含 Light 和 Dark 两种模式的变量集合，以及每个屏幕的深色副本。如果深色模式是改版需求的一部分，这是很好的起点，而且它能立刻告诉你哪些组件从未针对深色背景设计过。

注意：Figma Free 文件每个集合只允许一种模式，因此在 Free 文件中会跳过深色模式并给出提示。

第 5 步：把导入结果变成审查报告

现在导入结果变成了工作文件。在动手改版之前，先花一小时做审查。

读懂已有的设计系统

启用 Styles & variables（样式与变量，Pro）后，插件会根据使用两次及以上的颜色以及网站的 CSS 自定义属性创建颜色变量，因此 --brand-primary 会变成 brand/primary。你还会得到文本样式和阴影样式。同一网站导入两次也不会新建任何内容，因为数值匹配时会复用已有的变量和样式。

这个集合是一份如实的清单。三十种几乎一样的灰色或十一种正文字号，本身就能在提案中说明问题。

找出重复的组件

启用 Components & hover states（组件与悬停状态，Pro）后，卡片、按钮、菜单项等重复结构会变为组件和实例，带悬停效果的元素会变为包含 Default 和 Hover 变体的组件集。主组件会放在一个“Components · 站点”框架中。对审查而言，这个框架就是一份现成的清单，列出当前网站实际使用的内容。

检查布局结构

大多数框架导入时带有自动布局（Auto Layout），因此你可以调整大小和重新排列。插件先进行像素级精确构建，然后推断堆叠、间距、内边距和对齐，并在保留结果前校验每个子元素的位置。如果某个框架无法干净地表达，它会保留绝对定位并设置合理的约束，结果页面会告诉你原因。完整机制请参阅 自动布局详解。

保留参考图层

开启 Reference screenshot（参考截图），添加一个隐藏、锁定的图层，可切换显示以将导入结果与线上页面对比。当客户问“我们现在真的是这样吗？”时很有用。

第 6 步：制作改版提案

有了准确、可编辑的“改版前”，提案几乎会自己成形。

先复制，再改版

复制每一行导入结果。原件标为 Before（改版前），副本标为 After（改版后），在副本上开始改版。由于内容是真实文本和真实图片，你是在用客户自己的文案和照片做改版，而不是占位文字。

展示改版前后对比看板

把 Before 和 After 框架以相同宽度并排放置。为每个模板添加两三个标注，说明改动：层级更清晰、表单更短、对比度更好、组件更统一。

制作流程原型

导入页面之间的链接会变成 Navigate 交互，固定或吸顶的页头在 Present 模式中照常工作。这意味着你可以在同一个原型里先点击浏览当前网站，再点击浏览提案，在会议中做一次很有说服力的演示。

改版前后：你的工作流有何变化

面向机构的 Team 方案与授权

一个改版项目通常不止一位设计师参与。各方案的对应情况如下：

• Free： $0，每月 10 次导入，每次导入 1 个屏幕，Multiple 导入支持 10 个链接。适合在小网站上试用这套流程。
• Pro： 首发价每月 $7（原价 $9），合理使用范围内无限导入，每次导入最多 4 个屏幕，另含样式与变量、Snap、组件与悬停、Light + Dark、Custom width、Detailed layers、Reference screenshot 和 Extra wait。通过 Figma 自己的结账流程购买。
• Team： 首发价每月 $22（原价 $29），功能与 Pro 相同，通过共享的许可证密钥提供 5 个席位。

对于每月做几个改版项目的机构，Team 让所有人使用同一套功能，无需每位设计师单独购买。详情请见价格。

时间表示例：两周改版冲刺

导入交给插件处理后，一个典型冲刺大致如下。请按你的流程调整。

过去需要一两天重建的导入步骤，现在缩短到第一天上午。

处理客户网站时省时的技巧

• 对于内容加载较晚的网站（例如轮播或懒加载区块），使用 Extra wait（额外等待，Pro）。
• 多语言网站请选择页面语言；插件支持 15 种语言。
• 先解决字体问题。 Missing fonts（缺失字体）页面会在构建前建议替换字体，并按网站记住你的选择。
• 客户在项目中途上线改动时，一键 Re-import（重新导入）。来源 URL 存储在框架上。
• 留意嵌入内容。 地图、没有封面的视频和 WebGL 画布无法成为图层，会以该盒子的截图图片形式导入。
• 需要登录的页面要走浏览器路线。 对于需要登录的客户门户或仪表盘，请使用 Chrome 扩展；参见我们的 localhost 与登录后页面指南。

客户数据与隐私

机构经常被问到客户资料如何处理。页面在隔离的沙盒浏览器中渲染，只交付一次，随后从内存中删除，绝不写入磁盘。插件不会读取你的 Figma 文件内容，只写入图层。安全页面提供了可以转发给客户的详细信息。

总结

把客户的网站导入 Figma 并生成可编辑图层，能把改版中最初、也最繁琐的一步变成一次简短的导入。你会得到准确的“改版前”、基于网站真实 CSS 的审查结果，以及一个提案可以在原件旁自然生长的文件。先从一个模板开始，检查结果，再用 Multiple 和 Import linked pages 导入网站的其余部分。

准备好试试了吗？查看全部功能，阅读文档，或者获取插件，开始你的第一次导入。