如何把登入後才看得到的頁面匯入 Figma

你需要放進 Figma 的那個頁面，往往正是沒辦法發連結的那個。為什麼貼上網址會回傳登入表單，以及在能越過這一關的工具上該確認什麼。

你真正需要放進 Figma 的那個頁面，往往正是沒辦法發連結的那個。公司內部的管理後台。登入之後才會填上資料的儀表板。還沒公開的預發布版本。你把網址貼進轉換工具，它回傳登入頁——因為那確實就是它看到的東西。

有辦法繞過去，而且不是什麼技巧，是架構不同。這篇講清楚為什麼「貼網址」這條路在這裡走不通、幾種替代方案實際在做什麼，以及把一個私有頁面交給任何工具之前該確認什麼。

為什麼貼上網址不可能行得通

當一個工具向你要網址時，去開啟這個網址的是工具那邊的某個東西。一台伺服器，或者跑在伺服器上的無頭瀏覽器。那台機器有自己的網路位置和自己空著的 cookie 罐。它不是你。

於是它以匿名訪客的身分抵達你的儀表板，拿到匿名訪客該拿到的東西：一個登入表單。重試多少次都不會變，因為缺的是你的工作階段，而工作階段在你的瀏覽器裡。

這也是為什麼這種失敗如此一致。它不是誰能修的 bug——伺服器看不到一個「必須是你」才看得到的頁面。

行不通的繞法

• 把工作階段 cookie 貼到工具裡。 有些工具接受自訂標頭。先不說把工作階段權杖交給第三方有多彆扭，現在的驗證大多壽命很短，也不只綁一個 cookie，所以往往還是失敗。
• 把頁面暫時設為公開。 預發布環境偶爾可以。真實環境幾乎不可能，而且這會改變頁面算繪出來的內容。
• 截圖然後照著重畫。 你得到一張圖。匯入 Figma 的全部理由就是要可編輯的圖層，而截圖一個都沒有。

行得通的做法：在你已經開著的瀏覽器裡擷取

如果轉換發生在你自己的分頁裡，工作階段這個問題就消失了——不是被解決了，而是根本沒出現過。頁面已經算繪在你面前，登入著，資料載入好了，選單還是你留下的那個狀態。在那裡執行的轉換工具讀到的就是你看到的。

這就是以瀏覽器擴充功能為基礎的匯入器的思路，現在有好幾個工具都提供了擴充功能。這一點說清楚：擷取登入後的頁面並不是某一個工具獨有的能力。 html.to.design 就有針對登入或 VPN 之後頁面的擴充功能，其他家也有。如果你在哪裡讀到某家聲稱只有自己做得到，去查證一下。

它們之間真正不同的，是擷取之後發生了什麼。

該問的是另一個問題：擷取到的東西去了哪裡

瀏覽器讀完頁面之後，這些資料要送到 Figma。路徑有兩條，而這個差別比「擷取」這一步更重要。

經過伺服器。 擴充功能把擷取上傳，Figma 外掛再下載。方便，同時也意味著一個私有頁面的內容——文字、客戶名稱、儀表板上的數字——會經過你無法掌控的基礎設施。這類工具通常也提供本機檔案的選項：你把擷取下載下來，自己交給外掛。但那通常不是預設路徑，你得知道它存在才會去選。

完全不經過伺服器。 擷取進入你的剪貼簿或磁碟，Figma 外掛從那裡讀。什麼都不會被上傳，因為沒有可上傳的去處。

如果你要擷取的是簽了保密協議的頁面、帶客戶資料的頁面，或者任何來自受規範環境的畫面，這才是你們資安團隊在意的區分點。不是「能不能在登入後使用」——這一類工具都能——而是「內容會不會離開這台機器，我能不能驗證」。

怎麼自己驗證，而不是選擇相信

兩項檢查，都很快。

讀 Figma 外掛的 manifest

每個 Figma 外掛都在 manifest 裡宣告自己的網路存取權限，而 Figma 會強制執行這個宣告：宣告為無的外掛，程式碼再怎麼嘗試也發不出請求。Snapture Import 的宣告是：

"networkAccess": { "allowedDomains": ["none"] }

這是外掛不具備的能力，而不是誰承諾遵守的政策。任何已安裝外掛的 manifest，你都可以自己讀。

看網路面板

開啟開發者工具，切到 Network，跑一次擷取。你能看到擴充功能發出的請求。對 Snapture 來說是頁面自己的圖片，好讓它們進到你的檔案裡，如果你用付費版還有一次授權驗證。如果某個工具在上傳頁面內容，這裡就會顯出來。

什麼會進來，什麼不會

擷取算繪後的頁面，意味著你得到的是你正在看的這個狀態——包括一些走網址那條路的工具在公開頁面上也搆不著的東西。

• 開著的選單、對話框和浮層會保持開啟，因為擷取讀的是當下的 DOM，而不是重新載入。
• 登入後才存在的資料——表格的列、圖表的數值、角落裡你自己的名字——是以真正的文字進來的。
• 密碼輸入欄應該由工具在擷取時遮蔽。Snapture 在寫入任何東西之前就把值換成圓點；在擷取你填過的表單之前，確認你用的工具也這麼做。

任何工具都無法以圖層帶進來的：WebGL 畫布、跨來源 iframe、影片影格。誰也沒辦法把它們變成向量，因為這些像素並不由 DOM 描述。合理的做法是插入那塊區域的清晰截圖，而不是一個灰色佔位框，Snapture 就是這麼做的。

擷取內部儀表板的實際順序

1. 登入，把頁面調到你想要的狀態，包括需要一起擷取的面板或對話框。
2. 整頁捲到底再捲回來。儀表板會延遲載入表格列和圖表，沒算繪出來的東西是擷取不到的。
3. 擷取整頁，或者只需要某個面板時拖選一個範圍。
4. 貼進 Figma。如果字型被替換了，裝上頁面用的那些字型再重新匯入——被替換的字型會讓文字重新量測，後面的一切都會跑位。

如果儀表板特別大，擷取你需要的那一段，而不是整頁。每個工具都有預算，把真正想要的部分按範圍擷取，比一個中途撞上限制的整頁更快也更準。

簡單說

貼網址的轉換工具看不到登入之後，這是結構決定的，不是誰會去補的缺口。用瀏覽器擴充功能擷取能解決，而且提供這個能力的工具不只一家。真正值得問的不是某個工具能不能擷取登入後的頁面，而是那之後頁面內容會不會離開你的機器——這個問題你一分鐘就能自己驗證。

English · 한국어 · 日本語 · 简体中文 · 繁體中文 · Español · Português · Français · Deutsch · Русский · Italiano · Bahasa Indonesia