如何将网页捕获到 Figma

前往 Chrome 网上应用店，点击「添加至 Chrome」。PixelSync 是一个轻量扩展，仅在你发起捕获时读取页面。捕获内容保留在你的设备上 — 仅发送匿名使用计数以执行捕获限制。

1. 导航到你想捕获的网页。
2. 点击工具栏中的 PixelSync 图标。
3. 点击「捕获整页」。PixelSync 会读取实时 DOM 并将其转换为 Figma 兼容的图层。
4. 结果会自动复制到你的剪贴板。

不需要整个页面？使用「选择元素」模式：

1. 点击 PixelSync 图标。
2. 点击「选择元素」。当你鼠标悬停在页面各区域时，会出现蓝色叠加层。
3. 点击你想要的元素。该区域会被捕获并复制到剪贴板。

打开 Figma，按 ⌘V（Windows 上按 Ctrl+V）。可编辑的图层即刻出现 — 带有真正的 Auto Layout、字体排版、颜色和阴影。部分图片或字体可能需要手动调整（参见下方技巧）。

无需 Figma 插件。PixelSync 以 Figma 原生格式直接写入剪贴板。

在捕获前，在弹窗中开启「智能清理」。这会自动移除不可见元素、空的包装 div 和布局噪音 — 让你的 Figma 图层面板保持干净整洁。

PixelSync 捕获你的浏览器能看到的一切内容 — 包括需要认证的页面。只需登录网站，导航到需要的页面，正常捕获即可。

由于所有处理都在你的浏览器中进行，你的登录凭据和会话数据永远不会离开你的设备。

PixelSync 捕获你当前查看的视口。要捕获移动端或平板布局：

1. 打开 Chrome 开发者工具（F12）并切换设备模式，或直接调整浏览器窗口大小。
2. 设置你想要的视口宽度（例如 iPhone 为 375px）。
3. 刷新页面使 CSS 媒体查询生效。
4. 正常使用 PixelSync 捕获。

PixelSync 按原样捕获你当前的 prefers-color-scheme。要捕获两种主题：

1. 在当前主题下捕获页面。
2. 切换你的系统外观（macOS：系统偏好设置 → 外观，Windows：设置 → 个性化 → 颜色）。
3. 刷新页面并再次捕获。

• •先滚动页面以加载所有懒加载内容。
• •对复杂页面使用「选择元素」 — 捕获范围更小则更快更干净。
• •启用智能清理以保持 Figma 图层整洁。
• •自定义网页字体会以 font-family 名称显示在 Figma 中。在本地安装字体可获得完整效果。
• •复杂的 CSS 特性（混合模式、遮罩、3D 变换）在转换过程中可能会简化。
• •跨域图片可能显示为空框。如果图片无法加载，可能是被网站的 CORS 策略阻止了。
• •输出是可编辑的起点，不是像素级复制品。对于复杂布局，预期需要做少量修改。
• •PixelSync 捕获的是你看到的内容 — 它不会自动滚动或自动触发懒加载内容。请先滚动页面。