将网页导出到 Figma

本地工作流

CloneWebsite 不会把网页发送到转换服务器。Chrome 扩展读取当前标签页已经渲染的页面，在内存中生成带版本号的 .cdesign 文件，并由你下载或保存在浏览器本地。CloneWebsite Figma 插件读取该文件，在当前 Figma 文档中创建图层。

已渲染网页 → Chrome 扩展 → 本地 .cdesign 文件 → Figma 插件 → 可编辑图层

.cdesign 是开放的 ZIP 容器，包含 manifest、每个捕获状态对应的 JSON 场景，以及按内容哈希去重的图片资源。

捕获整页或组件

1. 打开目标网页，等待内容和 Web Font 渲染完成。
2. 打开 CloneWebsite 工具栏，将输出目标从 网页 切换到 Figma。
3. 选择 页面克隆 或 组件克隆。
4. 打开 Figma 捕获选项，选择视口和主题组合。默认捕获当前视口与当前主题；还可加入 1440、768、390 像素视口，以及浅色或深色主题，最多六组组合。
5. 需要响应式视口、组件交互状态、iframe/滤镜栅格兜底或更准确的浏览器几何信息时，保持 增强捕获 开启。
6. 点击 开始。组件模式下，在页面中点选组件并确认。
7. 下载生成的 .cdesign 文件，或先保存到扩展的本地项目列表，之后再下载。

Chrome debugger 权限

Chrome 不支持将 debugger 声明为可选权限，因此安装扩展时会授予该权限。只有在开启增强捕获并主动开始 Figma 捕获时，CloneWebsite 才会连接调试器，临时用于模拟视口/主题、强制受支持的组件伪类状态，以及为无法直接转换的视觉子树生成本地截图。捕获成功或失败后，扩展都会与标签页断开调试连接。

关闭增强捕获时，扩展不会连接调试器。基础模式生成当前视口、当前主题和组件 Default 状态，报告会明确列出未生成的增强场景或兜底图层。

Chrome DevTools 与其他调试客户端不能同时控制同一个标签页。如果增强捕获提示连接失败，请先关闭该标签页的 DevTools。

导入 Figma

现在可以直接从 Figma Community 打开 CloneWebsite Design Importer 插件，普通用户不需要构建插件，也不需要导入本地 manifest。

1. 打开一个 Figma Design 文件。首次使用时，在插件页面点击 Open in…；之后可从 Figma 的 Resources → Plugins 菜单再次打开。
2. 在准备编辑的文件中运行 CloneWebsite Design Importer。
3. 将 .cdesign 文件拖入插件，或从电脑中选择文件。
4. 保留需要的视口、主题和交互状态场景，然后点击 Import selected scenes。
5. 导入完成后查看报告，确认字体替换、栅格兜底、缺失资源和捕获警告，再继续交付或编辑。

插件不申请网络权限。文件解析、图片创建、字体匹配和图层生成都在本机 Figma 环境完成。

哪些内容可编辑

• Frame、填充、边框、圆角、阴影和基础混合模式
• 文本内容、字号、行高、对齐、装饰和颜色
• 图片与 SVG 图层
• 高置信度 Flexbox 布局转换为 Figma Auto Layout
• 手动选择的组件转换为 Figma Component
• 增强捕获能够映射组件时，Default、Hover、Focus、Active、Disabled 转换为 Variants

Grid 与自由布局区域采用绝对定位以保留几何结构。复杂滤镜、蒙版、iframe、视频表面和浏览器特有效果可能转换为本地栅格兜底图层。

字体与导入报告

Figma 插件无法把网页远程字体直接安装进编辑器。导入器会先查找 Figma 当前可用的字体族与字重；无法精确匹配时，使用可编辑的本地字体兜底，并在导入报告中列出替换关系。

报告还会列出缺失资源、栅格兜底、不安全 SVG 跳过、图层数量限制和捕获警告。在将导入结果作为正式设计源之前，请先检查报告。

隐私与合规使用

页面内容不会上传到 CloneWebsite。捕获时的网络请求仅用于下载页面已经引用的资源；如果你另行配置了 BYOK AI，则 AI 请求会直连你配置的端点。详见扩展隐私政策。

请只捕获你有权访问和处理的页面。原网站的版权、商标、个人数据与设计权利仍归其权利人所有。