哇！Figma 的 Chrome 擴充套件也太強了吧
哇！Figma 的 Chrome 擴充套件也太強了吧。
只要點一下「Capture Page」，再匯入 Figma，就能直接把整個網頁畫面抓下來，而且連所有元件都幫你整理好，完成度超高……
也太猛了！
為什麼這對前端跟設計師都有感
以前要把一個現成網頁「搬」進 Figma，不外乎兩條路：截圖貼進去當底圖描，或是設計師對著畫面一個一個元件重畫。前者沒有圖層，後者超花時間。
這個擴充套件直接把網頁的結構抓下來——不是一張死圖，而是分好圖層、可以再編輯的元件。對前端來說，這代表：
- 想參考某個網站的排版，抓下來就能量間距、看顏色、拆元件
- 改版前先把舊頁面搬進 Figma，當作對照的基準
- 跟設計師討論時，有一份可以直接動手改的稿，而不是只能比手畫腳
怎麼用
- 裝好 Figma 的 Chrome 擴充套件
- 開到你想抓的網頁，點擴充套件裡的 Capture Page
- 回到 Figma 匯入，畫面跟元件就都進來了
Figma 擴充套件下載連結：
一點小提醒
完成度雖然高，但抓下來的結構不一定百分之百等於原始設計意圖——它是還原「瀏覽器渲染出來的結果」，所以複雜的互動、動畫、或是用奇技淫巧切出來的版面，匯入後還是要自己再檢查、整理一下圖層。當成「加速起手式」很好用，當成「完全不用調整」就會踩雷。
整體來說，這工具把「網頁 → Figma」這段以前最痛的流程縮到一個按鈕，真的滿值得放進工具箱的。