Figma 推出 Chrome 擴充套件：直接把即時網頁轉成可編輯設計圖層

如果你做過 UI 設計，大機率幹過這種苦力活：看到一個網頁的排版或互動特別棒，想借用到自己的設計稿裡，只能一邊開著瀏覽器截圖，一邊在 Figma 里拉參考線、對字型大小、量間距，重新把整個頁面手工畫一遍。

Figma 打算把這個機械重複的步驟徹底抹掉。他們正式推出了一個 Chrome 瀏覽器擴充套件程式，主打功能很簡單，就是把正在執行的即時網頁，直接抓取並轉換成可編輯的 Figma 設計圖層。

告別截圖重繪，網頁直接變畫布

以往把網頁搬進設計稿，要麼靠截圖當背景板描邊，要麼依賴第三方的外掛，效果往往參差不齊，圖層巢狀混亂不說，文字也經常變成散落的向量路徑。

Figma 官方這次拿出的方案更徹底。安裝擴充套件之後，你只需要登入自己的 Figma 賬號，就能在瀏覽任何網站時直接提取頁面。

它不是存一張扁平的圖片，而是把瀏覽器的真實 DOM 結構與樣式，解析成 Figma 裡的原生圖層。網站裡的文本、按鈕、柵格和容器佈局，都會被還原成可以直接選中的物件，甚至無需手動調整就能繼續修改文字和排版。

這意味著無論你是要做競品分析、網頁改版，還是單純蒐集設計靈感，把別人的線上成果拉進自己的工作流，現在只需要點一下滑鼠。

目前限付費使用者，處於 Beta 階段

不過，想立刻用上這個功能還有一點門檻。

Figma 明確表示，該擴充套件程式目前仍處於 Beta 測試階段，而且暫時只面向付費方案使用者開放。免費版使用者可能還需要再等上一段時間。

此外，從網頁到設計圖層的還原度，在複雜的動態網頁上究竟表現如何，比如面對複雜的響應式斷點、現代 CSS 動效和深層巢狀時會不會丟樣式，還有待更多設計團隊在實際業務中檢驗。

為什麼重要

對於每天泡在設計稿裡的設計師來說，這個功能切中的是最高頻的痛點之一。過去耗費半天搭建的競品頁面框架，現在幾秒鐘就能拿到可編輯的原型，把精力真正留給創意本身。我們認為，這對於做改版和設計系統的團隊來說，價效比極高。

從行業競爭來看，Figma 這一步走得相當精準。以往市面上充斥著各種收費的第三方「HTML 轉 Figma」小工具，質量良莠不齊。Figma 官方下場做擴充套件，直接把外部工具的飯碗端走了，同時也進一步收攏了瀏覽器與設計軟體之間的邊界。

看起來，Figma 正在把「所見即所得」的邏輯反向打通。過去是把設計稿變成前端程式碼，現在是直接把線上程式碼倒灌回設計稿。一旦這種雙向轉換完全成熟，設計與前端開發的溝通斷層，可能會被徹底填平。