把任何網頁變成
可編輯的 Figma 圖層

真實的文字、顏色、Auto Layout 和元件,全部都能直接改。不是截圖。連要登入才看得到的頁面也能擷取,而且全程在你的電腦上完成,什麼都不會上傳。

兩個都需要:擴充功能負責擷取頁面,Figma 外掛負責貼上。都是免費的,一分鐘就好。

運作方式

1

擷取眼前畫面

在任何頁面按一下工具列圖示,開著的選單、彈窗會原封不動一起擷取。 Alt+Shift+C
2

複製到 Figma

取個名字,按下複製。擷取直接進剪貼簿,不用存檔,也不會上傳。
3

安裝外掛,然後貼上

在 Figma Community 搜尋 Snapture Import,執行一次,按 Ctrl+V。文字、Auto Layout 與元件都以可編輯的狀態進來。
🔒 admin.yourcompany.com/dashboard
Revenue overview
Live
Signed inMK
MRR$48,290▲ 12.4%
Seats1,204▲ 3.1%
Churn2.8%▼ 0.4%
Net revenue · last 12 weeksCanvas
Sessions by regionEmbed
Enclosure v4
Recent invoicesTable
NNorthwind Ltd$4,200Paid
VVertex Labs$1,850Due
KKite Systems$3,120Paid
Snapture
要擷取什麼?
整頁
目前看到的整個頁面
框選區域
只要你拖曳的部分
單一元素
懸停後點擊
正在擷取… 圖片 12/12
🔒 admin.yourcompany.com/dashboard
Revenue overview
Live
Signed inMK
MRR$48,290▲ 12.4%
Seats1,204▲ 3.1%
Churn2.8%▼ 0.4%
Net revenue · last 12 weeksCanvas
Sessions by regionEmbed
Enclosure v4
Recent invoicesTable
NNorthwind Ltd$4,200Paid
VVertex Labs$1,850Due
KKite Systems$3,120Paid
框架名稱
將成為此擷取在 Figma 中的框架/檔名。
atlas-overview
複製到 Figma取消儲存
✓ 已複製 — 在 Snapture Import 外掛裡貼上 (Ctrl+V)
Untitled — Figma
Layers
atlas-overview
KPI row · Auto Layout
Invoice row · Component
Revenue overview · Text
atlas-overview
Revenue overview
Live
Signed inMK
MRR$48,290▲ 12.4%
Seats1,204▲ 3.1%
Churn2.8%▼ 0.4%
Net revenue · last 12 weeksCanvas
Sessions by regionEmbed
Enclosure v4
Recent invoicesTable
NNorthwind Ltd$4,200Paid
VVertex Labs$1,850Due
KKite Systems$3,120Paid
Snapture Import
把檔案拖到這裡
或在「複製到 Figma」後按 Ctrl+V
CtrlV
往下捲,流程會跟著播放
功能

專為其他工具搆不著的頁面打造

Snapture 直接讀取瀏覽器裡正在顯示的頁面。只要看得到,就能擷取——登入後的儀表板、內部後台、打開的抽屜與彈出層,Web 元件和 iframe 也不例外。

登入後的頁面

擷取在你已登入的分頁裡執行,所以內部工具、付費儀表板與預發布環境會照著螢幕上的樣子轉換。

像素精準的 Auto Layout PRO

Flex 與 Grid 版面會轉換成真正的 Auto Layout——但前提是 Figma 引擎能把每個元素重現在 0.5px 以內;做不到時保留精確的絕對座標。無論哪種,都不會錯位。

圖示一個不漏

CSS 遮罩圖示、SVG sprite、圖示字型——網頁畫圖示的這三種方式,轉換工具最常弄丟,Snapture 全都處理。

圖表、地圖、3D

WebGL 畫布和跨網域嵌入內容,任何工具都無法轉成圖層。Snapture 會用一張只涵蓋該區域的清晰截圖取代灰色方塊;同源 iframe 則更進一步,直接轉換成真正的圖層。

元件 & 樣式 PRO

重複的卡片會變成帶實例的元件。反覆出現的字體與顏色整理為本機樣式,網站以 CSS 變數定義的顏色則作為 Figma 變數匯入,沿用網站自己的命名——是 brand-primary,不是 #2D7BFF。

剪貼簿直達

擷取完直接貼上,不必存成檔案——內容經剪貼簿直接進外掛,全程不碰伺服器。

批次擷取 PRO

貼上一組網址,或直接從網站地圖讀取,一次最多依序開啟並擷取 30 個頁面。

PRO標記的功能在 5 次免費擷取中全部包含,不必綁卡、不必註冊。Pro 只是取消次數上限。

隱私

任何資料都不會離開你的電腦。

Figma 外掛的 manifest 裡寫著 networkAccess: "none"。Figma 會強制執行,所以外掛就算想發網路請求也做不到。這不是我們承諾遵守的政策,而是我們不具備的能力。

沒有伺服器、沒有帳號、沒有任何追蹤。擷取在分頁裡就地運算,只會存進你的磁碟或剪貼簿。
擴充功能確實會發三種請求,我們不藏著:抓取頁面自己的圖片放進檔案、訂閱 Pro 時驗證授權金鑰、按批次擷取時讀取網站地圖。三者都不攜帶你頁面的內容。
密碼欄位在擷取當下就會遮罩,你打過的字不會出現在檔案裡。
內部後台、預備環境、公司登入之後的畫面都能直接用。根本沒有上傳的去處,也就沒有上傳風險可言。

擷取時打開開發者工具的網路面板看看,除了這些請求什麼都沒有。完整說明在隱私權政策裡。

為什麼選 Snapture

結構上就沒有伺服器

別的工具改設定也能把擷取留在本機。Snapture 沒有會設錯的地方——因為根本沒有可以傳送的伺服器。

Snapture有伺服器路徑的工具
想要私密的話一直都是要選本機選項
免費版給你什麼全部功能,5 次擷取每月額度
登入 / 互動狀態一律支援不一定
需要帳號不需要需要
Pro 價格$5/月通常更貴
價格

免費就能用。划得來,再升 Pro。

完整功能免費試 5 次。Pro 只是取消這個上限。

Free
$0
5 次擷取
  • 5 次擷取 — 功能完整
  • 登入頁面、圖示、圖表
  • 剪貼簿直達
  • 不必綁卡、不必註冊
加到 Chrome
Pro 推薦
$5 /month
或 $49/年(省 2 個月)
  • Free 的全部功能
  • 像素精準的 Auto Layout
  • 重複卡片自動元件化
  • 文字與顏色樣式——保留 Token 名稱
升級 Pro 按年付費 — $49(省 2 個月)
已經在用 Snapture? 你現有的版本可以繼續照常使用。更新後會用上新引擎,免費方案提供 5 次功能完整的擷取。
常見問題

常見問題,一次說清楚

我的頁面資料真的安全嗎?

是的,從架構上就是。轉換在你的瀏覽器分頁內完成,結果只會進入你的磁碟或剪貼簿——根本不存在能接收它的 Snapture 伺服器。Figma 外掛在資訊清單中宣告零網路存取,這由 Figma 強制執行,任何人都能查驗。擴充功能確實會發出少量請求:為了讓圖片出現在檔案裡而抓取頁面本身的圖片、使用 Pro 時驗證授權金鑰,以及你點擊批次擷取時讀取網站地圖。它們都不攜帶頁面內容,而且全部寫在隱私權政策裡。

和 html.to.design 這類工具有什麼不同?

那些工具也能用它們自己的瀏覽器擴充功能擷取登入後的頁面,選對選項還能把檔案留在本機。差別在於 Snapture 沒有選項可選:沒有伺服器,所以私密路徑就是唯一路徑;Figma 外掛以 networkAccess: "none" 發布,由 Figma 代我們強制執行。除此之外,我們的免費版是完整產品而非閹割版,而且只有當 Figma 引擎能在 0.5px 內還原頁面時才套用 Auto Layout。

免費版具體能用什麼?

5 次擷取,而且這 5 次都是完整版——登入後的頁面、圖示、漸層、圖表擷圖、Auto Layout、元件、樣式擷取、剪貼簿流程。什麼都沒有保留,所以你可以用自己的網頁判斷值不值得付費。用完 5 次後,Pro 取消這個上限。

字型在 Figma 裡看起來不太一樣。

Figma 只能用你電腦裡已安裝的字型。Snapture 會完整記下原頁面的字型堆疊,所以把缺的字型(例如 Pretendard 或 Inter)裝起來、重開 Figma,畫面就會完全一致。在那之前,Figma 會先拿最接近的已安裝字型代替。

一套授權可以裝在多台電腦上嗎?

可以,授權涵蓋你的個人裝置,最多可啟用 3 台。換電腦後如果卡在上限,寫信給我們,我們馬上幫你重設。

退款政策是什麼?

如果 Snapture 在你的頁面上不好用,購買後 14 天內告訴我們,我們會請金流服務商全額退款。不用填表單,不囉唆。

別再重畫已經存在的東西。

裝好擴充功能,擷取你正在看的頁面,貼進 Figma。看到成果,一分鐘就夠。