HTML to Frames 使用文档

1. 打开 Figma（桌面应用或浏览器），进入 HTML to Frames 的 Community 页面。
2. 点击 Open in… 或 Try it out 并选择一个文件。插件会保存到你的账户中。
3. 下次从菜单启动：Plugins → HTML to Frames——或按 ⌘/（Windows 上为 Ctrl /）并输入 HTML to Frames。

插件适用于 Figma Design 文件。无需注册账号：Free 方案自动启用，Pro 在 Figma 内购买。

1. 在 Import（导入）标签页中，保持来源为 Link，粘贴一个 URL，例如你自己的首页。
2. 在 Screens 下，Desktop 已选中并显示 Site width（网站宽度）——插件会在导入时实测页面的真实设计宽度。在 Pro 方案中，点击 Responsive set 即可加上 Tablet 和 Mobile。
3. 保持 Auto Layout 开启。点击 Import。
4. 观察进度：页面被渲染、图片被处理、图层被生成，然后应用并校验自动布局。
5. 结果页面会显示框架和图层数量、应用了自动布局的框架占比、缺失字体以及所有警告。

你的页面会以一行框架的形式出现在画布上，命名形如 yoursite.com — Desktop (1920)。所有文本、图片和矢量都可以编辑。

Link

任意公开页面。需要登录、运行在 localhost 或内网中的页面无法被抓取服务访问——这些请使用 Chrome 扩展。

Multiple

最多粘贴 10 个链接，每行一个。它们会依次导入，每个页面各占一行。同一网站的页面共享同一个实测宽度，因此能整齐对齐。

Local file

选择一个 HTML 文件、一个网站文件夹或一个 .zip（最大 30 MB）。对于文件夹，可以选择要导入的页面。你也可以选择 Paste code（粘贴代码），粘贴带有内联或内嵌 CSS 的 HTML。文件在隔离的浏览器中从内存打开，导入完成后立即删除。

Browser

粘贴用 HTML to Frames Chrome 扩展抓取的内容（⌘V），拖入 .h2f 文件，或者把扩展连接一次后使用 Send to Figma。参见 Chrome 扩展。

AI 工具

在 AI 标签页中连接 MCP 客户端，让你的 AI 工具发送页面。参见 AI 工具（MCP）。

Site width 在导入时实测得出：包含通栏区块的布局会放进 1920 的框架中，内容盒居中；真正的盒式网站使用其盒子宽度（例如 1200 或 1280）；流式布局使用 1440。Free 每个页面导入 1 个屏幕；Pro 和 Team 最多 4 个。同一页面的所有屏幕计为1 次导入。

在生成图层之前，插件会检查页面上哪些字体在你电脑上的 Figma 中不可用。Missing fonts（缺失字体）界面会为每种字体建议一个替代——优先选择首个单词相同的字体族，其次是 CSS 字体栈中第一个已安装的字体，最后是 Inter。你也可以搜索并选择其他字体族，然后决定是为当前网站还是所有网站记住这个选择。Skip（跳过）会仅此一次使用建议字体，不做保存。在该选项下点击 forget saved 可清除已保存的选择。

开启 Styles & variables（Pro）后：

• 至少使用两次的颜色——以及与网站 CSS 自定义属性匹配的颜色——会变成变量，放在名为 Colors · yoursite.com 的集合中。名称尽可能取自网站的令牌（--brand-primary → brand/primary），否则按色相和色阶命名（blue/500）。
• 至少使用两次、或字号在 20 px 及以上的字体排版会变成文本样式，命名形如 yoursite.com/Heading/32/40 Bold。
• 重复的阴影会变成阴影样式 sm、md、lg、xl。
• 如果你的文件中已有取值相同的变量或样式，会直接复用。

Snap to my file's styles 更进一步，把近似值映射到你自己的设计系统上。

开启 Components & hover states 后，重复结构会变成组件，放在页面旁边的 Components · yoursite.com 框架中，每次出现都会成为带有自己文本和图片的实例。带有悬停效果的元素会变成组件集，包含 State=Default 和 State=Hover 两个变体。

选择 Color scheme → Light + Dark（Pro）。页面会在不重新加载的情况下读取两次——分别使用 prefers-color-scheme: light 和 dark。每个发生变化的颜色都会变成同时具有 Light 和 Dark 值的变量，每个屏幕旁还会放置一份深色副本，其集合设置为 Dark。Starter 方案下的 Figma 文件每个集合只允许一种模式；这种情况下插件会提示已跳过深色模式。仅通过 JavaScript 开关（而非系统设置）切换主题的网站，会以默认主题导入。

• 在 Present（演示）模式下链接依然可用：外部链接打开其 URL；指向你也导入了的页面的链接会变成 Navigate 交互。
• 滚动时固定和粘性页头保持原位；水平轮播和滚动区域可以滚动。
• 导入完成后，Import linked pages（导入关联页面）会列出在该页面上发现的同一网站的其他页面。勾选你需要的，它们会以相同设置作为 Multiple 导入。
• 选中一个已导入的框架并点击 Re-import，即可从保存的来源 URL 获取最新版本。

对于抓取服务无法访问的页面，请使用免费的 HTML to Frames Chrome 扩展：需要登录的页面、localhost、内网，以及页面的确切状态（展开的下拉菜单、已填写的表单）。

1. 安装扩展并将其固定到工具栏。
2. 打开页面，点击扩展 → Capture this page（抓取此页面），或 Select an element（选择元素）只抓取一部分（移动鼠标，↑ 选择父元素，↓ 返回，Enter 确认，Esc 取消）。
3. 抓取内容会复制到剪贴板（或下载为 .h2f 文件）。
4. 在 Figma 中打开插件 → Browser 标签页 → 按 ⌘V 或拖入文件。

Send to Figma： 在插件的 Browser 标签页中点击 Connect（连接）获取一次性代码，在扩展的 Connect to Figma 下输入。此后主按钮会变为 Send to Figma，抓取内容直接进入你打开的插件。

扩展按当前窗口宽度抓取一个屏幕——调整窗口大小即可得到平板或手机布局。每次抓取计为 1 次导入。

1. 打开插件 → AI 标签页 → Connect an AI tool（连接 AI 工具）。系统会创建一个个人令牌，并且只显示一次。
2. 为你的客户端复制配置：Claude Code（一条 claude mcp add 命令）、Claude Desktop（使用 mcp-remote 的配置）或 Cursor & others（包含 URL 和请求头的 JSON）。
3. 在 Figma 中保持插件打开，然后让你的 AI 工具导入页面，例如：“做一个包含三个方案的价格页，并用 HTML to Frames 发送到 Figma。”

可用工具：import_html（HTML 最大 2 MB，可选名称和屏幕）、import_url（任意公开 URL）和 import_status。导入在你的插件中按你的方案运行，工具会收到一份摘要——框架数、图层数、自动布局占比和缺失字体。Create a new token（创建新令牌）会使旧令牌失效；Disconnect（断开连接）会将其移除。claude.ai 中的网页连接器暂不支持。

1 次导入 = 1 个页面及其全部屏幕。计数器每月（UTC）重置。如果很长的页面因方案限制被截断，该框架会带有一条紫色的 Capture limit（抓取上限）标记，让你一目了然。在 Plan 标签页中通过 Figma 结账购买 Pro；Team 成员在同一标签页中输入许可证密钥，也可以从某个账户中移除密钥以释放席位。

页面和我在浏览器里看到的不一样。 开启 Hide cookie banners & popups，对加载慢的动画尝试 Extra wait，或使用 Chrome 扩展准确抓取你看到的内容。

“This address can't be reached.”（无法访问此地址） 抓取服务只能打开公开地址。对于 localhost、VPN 后的预发布环境或需要登录的页面，请使用 Chrome 扩展。

文字换行不一样。 通常是字体差异——在 Missing fonts 界面中把缺失字体映射到正确的字体族。

有些框架没有自动布局。 当自动布局会导致元素偏移时，这是有意为之。打开结果页面上的诊断列表查看原因（间距不均、重叠、文字大小）。

某些内容是空白的。 地图、iframe 和 WebGL 场景会以图片形式抓取；如果仍然空白，该内容可能需要用户操作或登录。

“Limit reached.”（已达上限） 你已用完本月的 Free 导入次数。次数在每月 1 日（UTC）重置，或升级到 Pro 获得无限导入。

仍然无法解决？请将 URL 和截图发送至 [email protected]。