Sketch 插件 Marketch 完整指南設(shè)計稿一鍵生成可測量 HTML 并讀取 CSS【免費下載鏈接】marketchMarketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.項目地址: https://gitcode.com/gh_mirrors/ma/marketch拿到設(shè)計稿后你通常要先拿標尺一個個量元素的坐標和間距這個過程繁瑣、容易出錯設(shè)計一改就得重來。Marketch 是一個 Sketch 插件它能從 Sketch 設(shè)計稿自動生成可測量的 HTML 頁面——打開頁面每個圖層的位置、尺寸和 CSS 樣式都能直接看到、直接復制。 前置條件與最簡安裝步驟Marketch 需要在 Sketch 3 及以上版本里運行且文件里必須有畫板。安裝一共三步git clone https://gitcode.com/gh_mirrors/ma/marketch克隆倉庫拿到插件文件解壓 marketch.sketchplugin.zip雙擊 marketch.sketchplugin 安裝驗證是否裝好打開任一 Sketch 文件頂部菜單欄出現(xiàn)marketch菜單并含Export as zipFile項即可使用。 Marketch 三項核心能力這些功能的原理一致插件通過 Sketch API 讀取各圖層屬性寫成數(shù)據(jù)文件生成的頁面再按數(shù)據(jù)渲染。點擊元素查看位置與尺寸點擊任意元素右側(cè)面板立即顯示它的 X/Y 坐標和寬高。插件在導出時記錄每個圖層的框架和疊放順序頁面據(jù)此渲染出標尺。從右側(cè)面板直接取用 CSS面板會輸出填充色、圓角等現(xiàn)成樣式例如background: #4cd964; border-radius: 4px; width: 75px; height: 32px;屬性名與 Sketch 實際顯示對齊復制即可用。懸停即得兩元素實時間距選中一個元素把鼠標移到另一個元素上兩者間的距離馬上顯示出來。它基于記錄的坐標直接計算對齊時不再需要手動量尺。批量導出多頁面畫板勾選多個頁面和畫板一次導出包含它們的 HTML。每個畫板連同圖層被打包進一個 zip附統(tǒng)一入口頁方便整包查看和分享。 導出流程五步跑通選中一批畫板、跑一次導出全程五步打開設(shè)計稿左上角勾選頁面與畫板菜單欄執(zhí)行導出CommandShiftM解壓 zip 并打開 index.html點擊元素看坐標與 CSS懸停另一元素得到間距 使用 Marketch 容易踩的坑?? 文件沒有畫板時插件會直接拒絕導出?? 頁面或畫板名以-開頭會被自動排除可用它隱藏草稿 圖層名以svg開頭時按 SVG 格式導出 1.0.24 版右側(cè)面板不顯示文字與形狀屬已知限制 Marketch 項目現(xiàn)狀與參與入口當前版本 1.0.24仍在持續(xù)維護最近一次修復是為適配 Sketch 52 的 API 變動。參與路徑有兩條報 bug按 issue 模板提供 Sketch 版本、描述和截圖改代碼先讀 貢獻指南了解 CocoaScript 與 index.html 兩部分Marketch 把量、查、對變成了點、看生成的測量頁還能直接分享給團隊。從倉庫裝好它打開任一 Sketch 文件照著上面五步跑一遍幾分鐘就能看到第一份可測量頁面。感謝 MForever78、noyobo、xunuo、rayps 幾位貢獻者的支持?！久赓M下載鏈接】marketchMarketch is a Sketch 3 plug-in for automatically generating html page that can measure and get CSS styles on it.項目地址: https://gitcode.com/gh_mirrors/ma/marketch創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考