HTML to frame：每个页面和屏幕都成为一个 Figma 框架

当你在三种屏幕下导入十个页面时，框架名称就很重要了。HTML to Frames 使用一种统一的命名规则：

domain/path?query — Screen (width)

例如 shop.example.com/products?sort=new — Mobile (390)。名称中没有协议和 www，并限制在 60 个字符以内，在画布上始终清晰易读。

Desktop 宽度如何确定

Desktop 屏幕被称为 Site width（网站宽度），因为它是实测的，而不是猜测的：

在多页面导入中，同一站点只使用一个宽度，因此所有 Desktop 框架会排成整齐的一行。其他屏幕使用固定宽度：Laptop 1280、Tablet 768 和 Mobile 390。在 Pro 方案中，需要特定断点时还可以输入 Custom width（自定义宽度）。

每个框架还会保存来源 URL 和宽度，这正是之后能一键重新导入的基础。

统一的命名在 Figma 之外也很有帮助。当你分享某个框架的链接或将其导出时，名称能让开发者准确知道自己看的是哪个页面、哪个断点。

在每个顶层框架内部，层级结构映射 DOM。这让熟悉标记结构的人一看就懂图层面板，也为自动布局提供了真实的容器。

引擎按固定顺序工作：

1. 以绝对定位按像素精确地搭建页面。
2. 由内向外遍历框架，根据实测几何信息推断纵向或横向堆叠、换行行、间距、内边距和对齐方式。
3. 转换响应式意图：居中内容变为 Center，max-width 容器保持居中，等宽卡片和 flex-grow 元素变为 Fill，Logo 与菜单之间的空白变为 Fill 元素。
4. 应用方案，并以 2 px 容差校验每个子元素的位置。
5. 如果不成立，就尝试更简单的方案；否则保留绝对定位。

保留绝对定位的框架会获得 Stretch、Scale、Center、Min 或 Max 等约束，因此调整尺寸时依然表现合理。结果界面会列出每个框架保留绝对定位的原因。

在我们对真实网站的测试中，大约 86% 到 97% 的框架成功推断出自动布局。重点不在于这个数字，而在于背后的保证：设计绝不走样。关于 CSS 如何映射为框架，详见 CSS flexbox 和 grid 转自动布局。

单个框架只能展示一个断点，而真实的设计工作通常至少需要三个。使用 Responsive set（响应式组合）选项，HTML to Frames 一键即可捕获同一页面的 Desktop、Tablet 和 Mobile。

几个实用细节：

• 同一页面的多个屏幕并行捕获，而不是逐个进行。
• 一个页面及其所有屏幕计为一次导入，而不是三次。
• Pro 和 Team 每次导入最多支持四个屏幕；Free 方案每次导入捕获一个屏幕。
• 每个屏幕都是独立的顶层框架，名称中带有屏幕和宽度，一眼就能区分。

由于每个屏幕都按真实宽度捕获，你得到的是网站真正的移动端布局，而不是被硬挤窄的桌面框架。折叠成菜单按钮的导航、从四列变为一列的网格、缩小的字号，都会按网站在该宽度下的实际渲染呈现，因此这套组合是响应式设计评审的可靠起点。

将 Responsive set 与 Multiple 导入结合，即可跨断点捕获多个页面；具体限额请查看价格页面。