HTML轉(zhuǎn)Figma實(shí)戰(zhàn)3步把任意網(wǎng)頁變成可編輯的設(shè)計(jì)稿【免費(fèi)下載鏈接】figma-htmlConvert any website to editable Figma designs項(xiàng)目地址: https://gitcode.com/gh_mirrors/fi/figma-html周五下午六點(diǎn)設(shè)計(jì)師小周收到一條消息明天要評(píng)審的新版產(chǎn)品頁需要先出一版設(shè)計(jì)稿給老板看?？蛇@個(gè)頁面三個(gè)月前就已經(jīng)上線了Figma 里只有舊版文件。小周打開瀏覽器對(duì)著線上頁面打算從零開始把每個(gè)區(qū)塊重新畫一遍。這個(gè)場景你大概率見過——網(wǎng)頁已經(jīng)存在設(shè)計(jì)稿卻要從頭補(bǔ)。figma-html 就是為這種情況準(zhǔn)備的開源方案它把網(wǎng)頁的 HTML 和 CSS 翻譯成 Figma 可識(shí)別的圖層數(shù)據(jù)你得到的不是一張截圖而是能繼續(xù)編輯的文本、形狀和布局。和截圖貼進(jìn)畫板的思路有本質(zhì)區(qū)別——截圖的每個(gè)像素都是死的而 figma-html 交付的是活的圖層。一條命令能跑通的完整鏈路項(xiàng)目分三層各自解決一段問題模塊位置作用Chrome 擴(kuò)展chrome-extension/在瀏覽器里抓取當(dāng)前頁面導(dǎo)出 JSON 文件核心轉(zhuǎn)換庫builder.io/html-to-figma把 DOM 和樣式翻譯成 Figma 節(jié)點(diǎn)數(shù)據(jù)Figma 插件需在 Figma 內(nèi)安裝把 JSON 導(dǎo)入到當(dāng)前畫板核心轉(zhuǎn)換邏輯全在 TypeScript 里擴(kuò)展只是它的一層殼。這意味著你既能點(diǎn)按鈕用也能把轉(zhuǎn)換能力寫進(jìn)自己的腳本。3步把網(wǎng)頁送進(jìn)Figma安裝步驟從克隆倉庫到第一個(gè)可編輯圖層最短路徑只有三步。第一步克隆并構(gòu)建擴(kuò)展git clone https://gitcode.com/gh_mirrors/fi/figma-html cd figma-html/chrome-extension npm install npm run build構(gòu)建產(chǎn)物輸出到chrome-extension/dist目錄。第二步把 dist 加載進(jìn) Chrome打開chrome://extensions右上角打開開發(fā)者模式點(diǎn)擊加載已解壓的擴(kuò)展程序選擇dist文件夾。工具欄會(huì)出現(xiàn) HTML to Figma 的圖標(biāo)。第三步捕獲并導(dǎo)入打開任意一個(gè)想抓取的網(wǎng)頁點(diǎn)擊擴(kuò)展圖標(biāo)再點(diǎn) Capture page瀏覽器會(huì)下載一個(gè)page.figma.json文件。然后在 Figma 里打開 HTML To Figma 插件選擇 upload here指定剛才下載的文件頁面就會(huì)以圖層的形式出現(xiàn)在畫板里。全程不需要寫一行代碼。它能做的4件事核心能力速覽1. 一鍵捕獲當(dāng)前網(wǎng)頁 解決什么場景線上頁面需要重新出設(shè)計(jì)稿時(shí)不必手動(dòng)重建每個(gè)區(qū)塊點(diǎn)擊一次就能拿到完整結(jié)構(gòu)。2. 圖層級(jí)還原不是位圖解決什么場景老板要改一下按鈕文案時(shí)截圖方案只能重畫而這里文本是真文本雙擊就能改。3. 可編程的核心庫解決什么場景想批量把多個(gè)頁面轉(zhuǎn)成設(shè)計(jì)稿、或把轉(zhuǎn)換能力接進(jìn)自己的工具鏈時(shí)可以直接調(diào)用函數(shù)而不是點(diǎn)按鈕。4. 可自定義捕獲范圍解決什么場景整頁太雜、只想導(dǎo)入某個(gè)組件或區(qū)塊時(shí)改一個(gè)選擇器參數(shù)即可。實(shí)戰(zhàn)把產(chǎn)品頁的一個(gè)區(qū)塊單獨(dú)搬進(jìn) Figma擴(kuò)展默認(rèn)抓取整個(gè)body但核心庫支持傳入任意選擇器。打開chrome-extension/src/inject.ts你會(huì)看到整條轉(zhuǎn)換鏈路的入口import { htmlToFigma } from builder.io/html-to-figma; // 第一個(gè)參數(shù)是 CSS 選擇器第二個(gè)參數(shù)控制是否包裹 Frame const layers htmlToFigma(body, location.hash.includes(useFramestrue)); // 序列化成 JSON下載后交給 Figma 插件 var json JSON.stringify({ layers }); var blob new Blob([json], { type: application/json });想要只抓取頁面上的價(jià)格卡片把body改成.price-card重新npm run build刷新擴(kuò)展即可。如果不想動(dòng)擴(kuò)展也可以把核心庫裝進(jìn)自己的項(xiàng)目npm install builder.io/html-to-figmaimport { htmlToFigma } from builder.io/html-to-figma; // 把當(dāng)前文檔轉(zhuǎn)換成 Figma 圖層數(shù)據(jù) const figmaNodes htmlToFigma(document.documentElement);粘貼上面這段代碼跑在任意頁面的控制臺(tái)里就能拿到一份完整的 Figma 節(jié)點(diǎn)結(jié)構(gòu)——它返回的是純數(shù)據(jù)你怎么用都行。新手最容易踩的5個(gè)坑常見錯(cuò)誤修復(fù)坑1抓下來的頁面缺東少西懶加載的圖片和滾動(dòng)才出現(xiàn)的內(nèi)容不會(huì)進(jìn)快照。點(diǎn)擊捕獲前先把頁面滾到底再滾回頂部確保內(nèi)容全部加載完成?？?只有 JSON沒有圖層擴(kuò)展只負(fù)責(zé)產(chǎn)出文件導(dǎo)入這一步必須靠 Figma 插件。先在 Figma 里裝好 HTML To Figma 插件再點(diǎn) upload here?？?構(gòu)建時(shí) Node 版本報(bào)錯(cuò)項(xiàng)目用的是老版本 webpack在高版本 Node 下會(huì)報(bào) OpenSSL 相關(guān)錯(cuò)誤。package.json 里的構(gòu)建腳本已經(jīng)內(nèi)置了NODE_OPTIONS--openssl-legacy-provider別手動(dòng)刪掉這行優(yōu)先使用 Node 16 更省心?？?擴(kuò)展按鈕點(diǎn)擊后無響應(yīng)倉庫里的info/manifest.json沒有聲明 background 配置直接從源碼構(gòu)建的擴(kuò)展可能收不到消息。遇到這種情況檢查dist下的 manifest.json 是否包含background.service_worker聲明按需補(bǔ)充后重新加載擴(kuò)展?？?在 Chrome 應(yīng)用商店頁面里無法使用擴(kuò)展會(huì)攔截以chrome.google.com開頭的頁面彈窗直接提示錯(cuò)誤。這是刻意的保護(hù)換個(gè)普通網(wǎng)頁即可。兩個(gè)提效用法進(jìn)階技巧技巧1用 URL 參數(shù)控制 Frame 包裹inject.ts里檢查了 URL 中的#useFramestrue。給目標(biāo)網(wǎng)頁地址加上這個(gè) hash 再捕獲導(dǎo)入后的圖層會(huì)自動(dòng)包進(jìn) Frame 里方便直接復(fù)用為組件。技巧2改一處代碼只導(dǎo)出目標(biāo)區(qū)域在inject.ts里把選擇器改成任意 CSS 表達(dá)式比如只抓導(dǎo)航欄nav或某個(gè)模塊.hero-section就能得到獨(dú)立區(qū)塊的設(shè)計(jì)稿適合逐個(gè)組件拆解重構(gòu)。下一步跑通一次完整流程先按上面的 3 步走一遍挑一個(gè)你自己做的頁面抓進(jìn) Figma驗(yàn)證文本可編輯、圖層可拖拽這兩個(gè)結(jié)果。然后打開chrome-extension/src/inject.ts讀一遍核心調(diào)用——整個(gè)項(xiàng)目最有價(jià)值的部分就在這十幾行里。想深入改造時(shí)shared/下的類型定義和webpack.config.js里的構(gòu)建配置會(huì)告訴你擴(kuò)展和核心庫是如何組織在一起的。跑通了第一個(gè)頁面后面就是復(fù)制粘貼的事。【免費(fèi)下載鏈接】figma-htmlConvert any website to editable Figma designs項(xiàng)目地址: https://gitcode.com/gh_mirrors/fi/figma-html創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考