如何將網頁擷取到 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 擷取的是你看到的內容 — 它不會自動捲動或自動觸發延遲載入內容。請先捲動頁面。