MarketchSketch 設計稿獲取 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/marketchMarketch 是一個 Sketch 插件可以把 Sketch 設計稿導出成一個 HTML 頁面你在瀏覽器里點元素就能直接量尺寸、復制 CSS 樣式。還在逐個量尺寸、抄色值接過設計稿的同學都熟悉這個流程用測量工具一個一個量寬高的像素值再從樣式面板里手動抄填充色元素之間的間距全靠放大畫布目測。這些數字在設計稿和代碼之間來回謄抄很容易抄錯。Marketch 的思路是把這件事搬到瀏覽器里完成它把畫板ArtboardSketch 中獨立的畫布區域通常對應一個頁面或一屏內容連同圖片、圖層數據導出成一個 HTML 文件打開后點誰看誰。下面從安裝到導出走一遍完整流程。三步裝好 Marketch 插件前置條件一句話需要 Sketch 3 或更高版本并且文件里必須包含畫板否則插件無法工作。克隆倉庫git clone https://gitcode.com/gh_mirrors/ma/marketch解壓其中的marketch.sketchplugin.zip文件雙擊解壓出來的marketch.sketchplugin安裝即完成裝好后 Sketch 菜單欄會出現 marketch 菜單項也可以直接用快捷鍵 CommandShiftM 觸發導出。從選畫板到拿到 CSS真實工作流勾選要導出的頁面與畫板打開插件面板后左上角是頁面和畫板的選擇區。勾選想導出的對象支持多選、跨頁面確認導出后得到的是一張包含所有畫板的 HTML 頁面可以整體瀏覽也可以直接發給同事看。如果某個頁面或畫板不想出現在導出里把它的名字加上-前綴即可被排除。如何拿到任意元素的 CSS在導出頁面中點擊任意元素右側面板會立刻給出它的 X/Y 坐標、寬高、填充色和圓角等參數并生成對應的 CSS 代碼比如一個按鈕可能顯示background: #4cd964; border-radius: 4px; width: 75px; height: 32px;直接復制進自己的樣式文件即可不用再對著設計稿逐個數字核對。測量兩個元素之間的間距布局對齊時最頭疼的是間距。選中一個元素后把鼠標懸停到另一個元素上兩者之間的距離會實時顯示出來不用再反復放大縮小畫布目測。把當前元素導出成 PNG需要把某個元素單獨變成圖片時比如切圖給產品確認選中它之后點擊 Export Activity Layer 按鈕元素會以 PNG 格式導出把生成的圖片拖到桌面即可保存。導出頁面是空的先看這三個常見坑文件里沒有畫板Marketch 依賴畫板收集圖層信息內容直接放在畫布上、沒放進畫板的話導出頁面會是空的。把內容收進畫板再試一次。右側面板缺少部分文字、形狀元素v1.0.24 為了繞過 Sketch v52 的 API 變更采用了臨時方案該版本中文字和形狀元素可能不會出現在右側面板里但導出功能本身已恢復屬于已知現象。Sketch 版本過老插件要求 Sketch 3 及以上老版本 Sketch 無法使用。源碼結構與相關資源插件分兩部分CocoaScript 腳本負責從 Sketch 抓取數據并打包進每個導出的 zip 中index.html負責展示圖層和圖片兩者結構和定位 bug 的分工見 contribution.md。發現問題的話建議按 issue-template.md 提供信息再提交 issue。項目由 tudou527 發起MForever78、noyobo、xunuo、rayps 等多位貢獻者也參與了維護歡迎提 PR 參與開發。【免費下載鏈接】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創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 Marketch：Sketch 設計稿獲取 CSS 與測量尺寸的完整工作流
MarketchSketch 設計稿獲取 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/marketchMarketch 是一個 Sketch 插件可以把 Sketch 設計稿導出成一個 HTML 頁面你在瀏覽器里點元素就能直接量尺寸、復制 CSS 樣式。還在逐個量尺寸、抄色值接過設計稿的同學都熟悉這個流程用測量工具一個一個量寬高的像素值再從樣式面板里手動抄填充色元素之間的間距全靠放大畫布目測。這些數字在設計稿和代碼之間來回謄抄很容易抄錯。Marketch 的思路是把這件事搬到瀏覽器里完成它把畫板ArtboardSketch 中獨立的畫布區域通常對應一個頁面或一屏內容連同圖片、圖層數據導出成一個 HTML 文件打開后點誰看誰。下面從安裝到導出走一遍完整流程。三步裝好 Marketch 插件前置條件一句話需要 Sketch 3 或更高版本并且文件里必須包含畫板否則插件無法工作。克隆倉庫git clone https://gitcode.com/gh_mirrors/ma/marketch解壓其中的marketch.sketchplugin.zip文件雙擊解壓出來的marketch.sketchplugin安裝即完成裝好后 Sketch 菜單欄會出現 marketch 菜單項也可以直接用快捷鍵 CommandShiftM 觸發導出。從選畫板到拿到 CSS真實工作流勾選要導出的頁面與畫板打開插件面板后左上角是頁面和畫板的選擇區。勾選想導出的對象支持多選、跨頁面確認導出后得到的是一張包含所有畫板的 HTML 頁面可以整體瀏覽也可以直接發給同事看。如果某個頁面或畫板不想出現在導出里把它的名字加上-前綴即可被排除。如何拿到任意元素的 CSS在導出頁面中點擊任意元素右側面板會立刻給出它的 X/Y 坐標、寬高、填充色和圓角等參數并生成對應的 CSS 代碼比如一個按鈕可能顯示background: #4cd964; border-radius: 4px; width: 75px; height: 32px;直接復制進自己的樣式文件即可不用再對著設計稿逐個數字核對。測量兩個元素之間的間距布局對齊時最頭疼的是間距。選中一個元素后把鼠標懸停到另一個元素上兩者之間的距離會實時顯示出來不用再反復放大縮小畫布目測。把當前元素導出成 PNG需要把某個元素單獨變成圖片時比如切圖給產品確認選中它之后點擊 Export Activity Layer 按鈕元素會以 PNG 格式導出把生成的圖片拖到桌面即可保存。導出頁面是空的先看這三個常見坑文件里沒有畫板Marketch 依賴畫板收集圖層信息內容直接放在畫布上、沒放進畫板的話導出頁面會是空的。把內容收進畫板再試一次。右側面板缺少部分文字、形狀元素v1.0.24 為了繞過 Sketch v52 的 API 變更采用了臨時方案該版本中文字和形狀元素可能不會出現在右側面板里但導出功能本身已恢復屬于已知現象。Sketch 版本過老插件要求 Sketch 3 及以上老版本 Sketch 無法使用。源碼結構與相關資源插件分兩部分CocoaScript 腳本負責從 Sketch 抓取數據并打包進每個導出的 zip 中index.html負責展示圖層和圖片兩者結構和定位 bug 的分工見 contribution.md。發現問題的話建議按 issue-template.md 提供信息再提交 issue。項目由 tudou527 發起MForever78、noyobo、xunuo、rayps 等多位貢獻者也參與了維護歡迎提 PR 參與開發。【免費下載鏈接】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創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考